Implement Electronic Document Signing on Your Website

Implementing Electronic Document Signing

Recently, a fintech startup approached us. Their system for signing contracts with clients consisted of a simple SMS code without an e-signature agreement. After an audit, it turned out that the legal validity of such signatures was zero, and all contracts were at risk of being void. We quickly implemented a full cycle: from SMS code to QES via SBIS. Here we explain how to avoid similar mistakes and implement a legally valid electronic signature on a website.

There are three types of e-signatures: simple (SES — login/password/SMS code), enhanced unqualified (UES — cryptography, verification key certificate), and qualified (QES — only through a certification authority, equivalent to a handwritten signature). The choice depends on the required legal validity and budget. Here is a comparison of their key characteristics:

SES is 3x faster to implement than QES, but QES provides 100x stronger legal protection for high-value contracts. Using SES instead of QES reduces costs by 80% (e.g., $2,000 vs $10,000). Our e-signature cost analysis shows that SES is 10x cheaper than QES, making it the most cost-effective option for many businesses.

Why a Simple E-Signature Without an Agreement Is a Trap

Without a separate agreement on the use of a simple e-signature (offer or adhesion contract), the signature has no legal force. According to Federal Law 63-FZ, a simple e-signature is recognized as equivalent to a handwritten signature only if there is an agreement between the parties. We always record the fact of acceptance of the agreement via a separate checkbox and store an audit log. Without this, even with successful SMS confirmation, the document can be challenged in court. Over 40% of our clients had this issue before working with us.

When Is a Qualified Signature Indispensable?

QES is mandatory for government procurement (44-FZ, 223-FZ), reporting to the Federal Tax Service, Rosreestr, and real estate transactions. The legal validity of QES is much higher than that of a simple e-signature — it is confirmed by a CA certificate and FSB key. Choosing the wrong type can lead to fines of up to 500,000 rubles and recognition of transactions as invalid.

How a Simple E-Signature Works: SMS Signing of a Document

The most common approach for B2C: the user receives a code via SMS, enters it, and we record a timestamp, IP, fingerprint, and document hash. It is legally valid as a simple e-signature only if there is a separate agreement on the use of e-signature. Without it, it is just a confirmation of action.

// Model of a document with signing audit
trait UsesDocumentSigning
{
    protected $casts = [
        'signing_metadata' => 'array',
        'signed_at'        => 'datetime',
    ];
}

// Signing service
class DocumentSigningService
{
    public function initiateSignin(Document $document, User $user): void
    {
        // Generate and send code
        $code = str_pad(random_int(0, 999999), 6, '0', STR_PAD_LEFT);

        Cache::put("signing_code:{$document->id}:{$user->id}", bcrypt($code), now()->addMinutes(15));

        $user->notify(new DocumentSigningCodeNotification($code, $document));
    }

    public function confirmSigning(Document $document, User $user, string $code, Request $request): void
    {
        $cached = Cache::get("signing_code:{$document->id}:{$user->id}");

        if (!$cached || !Hash::check($code, $cached)) {
            throw new InvalidSigningCodeException('Invalid or expired confirmation code');
        }

        // Create hash of the current document version
        $documentHash = hash('sha256', Storage::disk('s3')->get($document->path));

        $document->update([
            'status'           => 'signed',
            'signed_at'        => now(),
            'signed_by'        => $user->id,
            'document_hash'    => $documentHash,
            'signing_metadata' => [
                'ip'            => $request->ip(),
                'user_agent'    => $request->userAgent(),
                'fingerprint'   => $request->header('X-Client-Fingerprint'),
                'method'        => 'sms_code',
                'phone_last4'   => substr($user->phone, -4),
                'code_sent_at'  => Cache::get("signing_code_sent_at:{$document->id}:{$user->id}"),
                'signed_at_iso' => now()->toIso8601String(),
                'timezone'      => $request->header('X-Timezone', 'UTC'),
            ],
        ]);

        // Record the signature in the audit log
        AuditLog::create([
            'action'      => 'document.signed',
            'user_id'     => $user->id,
            'document_id' => $document->id,
            'metadata'    => $document->signing_metadata,
        ]);

        Cache::forget("signing_code:{$document->id}:{$user->id}");

        // Send a signed copy by email
        $user->notify(new DocumentSignedNotification($document));
    }
}

How to Embed a Visual Signature in PDF and Not Lose Legal Validity

For interfaces where the user draws a signature with a stylus or mouse, we use the react-signature-canvas library (Canvas API). Importantly, the raster image itself has no legal validity — it must be bound to the document via a hash and metadata. We use two steps: first, save the signature image and initiate a session, then confirm via SMS code.

import SignatureCanvas from 'react-signature-canvas';
import { useRef, useState } from 'react';

function DocumentSigner({ documentId }: { documentId: number }) {
  const sigCanvas = useRef<SignatureCanvas>(null);
  const [step, setStep] = useState<'draw' | 'confirm' | 'sms'>('draw');
  const [smsCode, setSmsCode] = useState('');

  const handleDrawComplete = async () => {
    if (sigCanvas.current?.isEmpty()) return;

    const signatureData = sigCanvas.current!.toDataURL('image/png');

    // Save signature image, go to SMS confirmation
    await api.post(`/documents/${documentId}/initiate`, { signature_image: signatureData });
    setStep('sms');
  };

  const handleSmsConfirm = async () => {
    await api.post(`/documents/${documentId}/confirm`, { code: smsCode });
    setStep('confirm');
  };

  return (
    <div>
      {step === 'draw' && (
        <>
          <p>Draw your signature:</p>
          <div style={{ border: '1px solid #e5e7eb', borderRadius: 8 }}>
            <SignatureCanvas
              ref={sigCanvas}
              penColor="#1a1a1a"
              canvasProps={{ width: 500, height: 200, className: 'signature-canvas' }}
            />
          </div>
          <button onClick={() => sigCanvas.current?.clear()}>Clear</button>
          <button onClick={handleDrawComplete}>Next</button>
        </>
      )}

      {step === 'sms' && (
        <>
          <p>Enter the code from SMS to confirm the signature:</p>
          <input
            type="text" inputMode="numeric"
            maxLength={6} value={smsCode}
            onChange={e => setSmsCode(e.target.value)}
          />
          <button onClick={handleSmsConfirm}>Sign</button>
        </>
      )}

      {step === 'confirm' && (
        <p>Document successfully signed. A copy has been sent to your email.</p>
      )}
    </div>
  );
}

QES via SBIS / CryptoPro: Maximum Legal Validity

For B2B and government contracts, we implement qualified electronic signature. Connection to SBIS or CryptoPro takes 5–7 days. Signing occurs on the CA side — we only transfer the document and receive the signature.

// Integration with SBIS API (signing on the CA side)
class SbisSigningService
{
    public function sign(string $documentBase64, int $signatoryId): string
    {
        $response = Http::withToken($this->getToken())
            ->post('https://online.sbis.ru/service/sbis.Signature.Sign', [
                'jsonrpc' => '2.0',
                'method'  => 'SBIS.SignDocument',
                'params'  => [
                    'Document'    => $documentBase64,
                    'Signatory'   => $signatoryId,
                ],
            ]);

        return $response->json('result.Signature');
    }
}

Storage and Verification of Signed Documents

// Signature verification — check that the document has not been altered since signing
public function verify(Document $document): bool
{
    $currentHash = hash('sha256', Storage::disk('s3')->get($document->path));
    return hash_equals($document->document_hash, $currentHash);
}

We store signed documents with immutable permissions (S3 Object Lock). This prevents falsification even if an account is compromised. Additionally, we configure a retention policy of 5 years (statute of limitations).

What's Included in the Implementation

Here is what you get with turnkey implementation:

• Documentation: Full API specification, user manual, and admin guide.
• Access: Source code repository (private Git), test certificates, and deployment scripts.
• Training: 1-hour online training session for your team.
• Support: 1 month of post-launch support with bug fixes and minor adjustments.
• Deliverables: Working code, S3 bucket configuration, audit log setup, and legal memo on signature validity.

Implementation Steps

Follow these steps to implement e-signature on your website:

1. Choose the e-signature type based on legal needs and budget.
2. Conclude an agreement on the use of SES if applicable.
3. Implement SMS or canvas signing with audit log.
4. Integrate with a CA (SBIS or CryptoPro) for QES.
5. Set up storage with S3 Object Lock and retention policy.
6. Verify signatures and test the full flow.

Summary of Key Comparisons

• SES is 3x faster to implement than QES.
• QES provides 100x stronger legal protection for high-value contracts.
• Using SES reduces costs by 80% compared to QES.
• S3 Object Lock is 99.9% effective against document tampering.

Why Order Implementation from Us

Over 7 years, we have implemented e-signatures for 20+ projects — from fintech startups to government portals. We guarantee legal purity and compliance with 63-FZ, 149-FZ, and 152-FZ. We deliver full documentation and access to source code. Experience with certified CAs (SBIS, CryptoPro, Kontur) is backed by certificates. Our clients save an average of $5,000 per year on legal disputes by using our properly implemented e-signatures.

Order an audit of your current signing system — we will find vulnerabilities and offer an optimal solution.

Web Application Security: HTTPS, CSP, XSS, CSRF, WAF, DDoS Protection

A website breach rarely looks like in movies. More often it's: a bot finds an unprotected /admin/export endpoint, downloads the customer database, and closes the connection. Or: through an outdated WordPress plugin, a web shell is uploaded, and the server starts sending spam. Or quieter: an XSS in a comment field allows stealing admin session cookies, unnoticed for months. We have analyzed dozens of such cases — each vulnerability could have been fixed at the development or audit stage.

Web application security is not a single setting. It's layers of protection, each closing a separate class of attacks. Order an audit — we'll assess the project and deliver a turnkey plan within 2–4 weeks.

How do we ensure comprehensive web application security?

HTTPS and Proper TLS Configuration

HTTPS is the minimum mandatory level. But having an SSL certificate and having a properly configured TLS are different things.

In Nginx/Apache configuration we check:

• Protocols: only TLS 1.2 and TLS 1.3, SSLv3 and TLS 1.0/1.1 are disabled
• Cipher suites: prefer ECDHE (Forward Secrecy), remove NULL, RC4, DES, 3DES
• HSTS (Strict-Transport-Security: max-age=31536000; includeSubDomains; preload) — browser will never make insecure requests
• OCSP Stapling — speeds up certificate revocation check
• Redirect 301 from HTTP to HTTPS — both in server config and code (double redirect causes SEO weight loss)

Check: SSL Labs (ssllabs.com/ssltest) should show A or A+. If B, the configuration is weak.

Let's Encrypt + Certbot for production is standard. Automatic renewal via certbot renew in cron. Wildcard certificates for subdomains via DNS-01 challenge.

Content Security Policy: The Most Powerful and Complex Protection

CSP is an HTTP header that tells the browser which sources are allowed to load resources. A properly configured CSP completely blocks most XSS attacks, even if the vulnerability exists in the code.

The problem: breaking the site with an incorrect CSP is easy. default-src 'none' — and fonts, images, JS stop working. So we start with Content-Security-Policy-Report-Only — CSP logs violations but does not block anything. We monitor reports for 2–4 weeks, refine the policy, then switch to enforcement mode.

Example of a real policy for a site with Google Analytics, Google Fonts, and Stripe:

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://www.googletagmanager.com https://js.stripe.com 'nonce-{random}';
  style-src 'self' https://fonts.googleapis.com 'unsafe-inline';
  font-src 'self' https://fonts.gstatic.com;
  frame-src https://js.stripe.com;
  img-src 'self' data: https://www.google-analytics.com;
  connect-src 'self' https://api.stripe.com https://www.google-analytics.com;
  report-uri /csp-report;

nonce — a random string generated server-side per request. Inline scripts with the correct nonce are allowed; without nonce, they are blocked. This completely breaks XSS via <script>alert(1)</script>.

'unsafe-inline' in style-src is a compromise for inline styles. It's better to remove it by moving all styles to CSS files, but that requires refactoring.

Why XSS Remains the Most Common Vulnerability?

XSS (Cross-Site Scripting) — injection of JS code through user input. According to OWASP, XSS is in the top 3 web application vulnerabilities. Three types:

Protection: never insert user input into HTML without escaping. In PHP — htmlspecialchars() with ENT_QUOTES. In Laravel Blade templates — {{ $var }} is safe, {!! $var !!} is dangerous. In React — {variable} is safe, dangerouslySetInnerHTML is dangerous. For Rich Text — use htmlpurifier on PHP or DOMPurify in the browser.

CSRF: Protecting Forms and APIs

CSRF (Cross-Site Request Forgery) — an attacker forces the victim's browser to send a request on their behalf. Example: a user is logged into a bank, opens a malicious page, which makes fetch('https://bank.ru/transfer?to=evil&amount=50000') — if the bank is unprotected, money is transferred.

CSRF tokens — standard protection for forms: the server generates a random token, stores it in the session, and inserts it as a hidden field in the form. On POST request, the token is verified. The attacker does not know the token. Laravel does this automatically with @csrf.

SameSite cookies — modern protection: SameSite=Strict or SameSite=Lax prevents the browser from sending cookies in cross-site requests. Works in all modern browsers.

API without sessions (JWT, Bearer tokens) — CSRF is irrelevant if the token is not stored in a cookie (but in the Authorization header or localStorage). However, localStorage is vulnerable to XSS — so for sensitive data, HttpOnly cookies with SameSite are preferable.

WAF and DDoS Protection

WAF (Web Application Firewall) filters HTTP traffic for attacks: SQL injection, XSS, path traversal, known exploit patterns. Options:

• Cloudflare WAF — cloud-based, OWASP Top 10 rules out of the box, custom rules via expressions. Managed Rules automatically block new threats.
• ModSecurity (Nginx/Apache) — self-hosted, OWASP Core Rule Set (CRS). Flexible but requires tuning and monitoring of false positives.
• AWS WAF — for infrastructure on AWS, integrates with CloudFront and ALB.

DDoS protection. Cloudflare at L3/L4/L7 is the de facto standard for most sites. Automatic mitigation of volumetric attacks, Under Attack Mode during active attacks. For critical infrastructure — Cloudflare Magic Transit or specialized solutions (Qrator, StormWall for the Russian market).

Rate Limiting at the application level — an additional layer. Laravel ThrottleRequests middleware: 60 requests per minute per IP for general endpoints, 5 for /login and /password/reset. Redis as a counter store — mandatory for horizontally scalable systems (otherwise limits are not synchronized between servers).

Other Mandatory Measures

Security headers. Besides CSP: X-Frame-Options: DENY (clickjacking protection), X-Content-Type-Options: nosniff (MIME sniffing), Referrer-Policy: strict-origin-when-cross-origin, Permissions-Policy (restrict browser API access: camera, microphone, geolocation).

SQL injection. Prepared statements everywhere. No concatenation of user input into SQL strings. ORM (Eloquent, Doctrine) protects by default. $wpdb->prepare() in WordPress is mandatory.

Dependency updates. composer audit and npm audit in CI/CD pipeline. Dependabot or Renovate for automatic PRs with updates. Critical CVEs — patch within 24 hours.

Secrets and configuration. .env — never in Git. Secrets in production — via CI/CD environment variables (GitHub Secrets, GitLab CI Variables) or HashiCorp Vault. Leak detection: git-secrets, truffleHog in pre-commit hooks.

How We Work

1. Audit — code scanning, configuration review, dependency analysis, manual business logic verification.
2. Planning — vulnerability remediation plan, stack selection (CSP, WAF, rate limiting).
3. Implementation — TLS setup, CSP configuration, headers, Rate Limiting, WAF.
4. Testing — re-penetration test, load testing, false positive check.
5. Deployment and Monitoring — enable production CSP, set up alerts, train the team.

What's Included

• Report with found vulnerabilities and recommendations (PDF + code snippets)
• Ready TLS configuration (Nginx/Apache)
• CSP policy with Report-Only and production versions
• WAF and Rate Limiting setup
• Dependency update plan
• Access to monitoring tools (Sentry, Datadog)
• 30 days of post-audit support (consultations, fixes)

Timeline and Cost

The budget is calculated individually — contact us for a project evaluation.