Frontend Web Security: OWASP Top 10 Mitigation & Content Security Policy

1. Cross-Site Scripting (XSS): Anatomy & Defenses

Cross-Site Scripting remains the most pervasive and destructive client-side vulnerability. XSS occurs when an attacker injects malicious JavaScript into a trusted web application, which the victim's browser subsequently executes with the application's full origin privileges:

• Reflected XSS: Malicious script payloads are embedded inside an HTTP request (such as a search query parameter: ?q=<script>...</script>) and immediately reflected back unescaped in the server's HTML response.
• Stored XSS (Persistent): The attacker saves a malicious payload into the backend database (via comments, user profiles, or product reviews). Whenever any user views that page, the database serves the unescaped script, compromising thousands of sessions.
• DOM-based XSS: The vulnerability exists entirely within client-side JavaScript. The client script reads data from an untrusted source (like location.hash or document.referrer) and passes it to an unsafe sink—such as element.innerHTML, document.write(), or eval().

2. Content Security Policy (CSP Level 3): Strict Cryptographic Nonces

Even with rigorous code reviews, complex applications importing hundreds of third-party npm packages cannot rely on code-level sanitization alone. Content Security Policy (CSP) provides a browser-enforced perimeter that restricts where scripts, styles, images, and fonts can load from, completely blocking XSS payload execution.

Legacy CSP architectures relied on broad domain allowlists (e.g., script-src https://trusted.com). However, security research has proven domain allowlists fragile due to open redirectors, JSONP endpoints, and shared CDN vulnerabilities. Modern enterprise architectures enforce Strict Nonce-Based CSP (Level 3):

• The server generates a cryptographically random, unguessable Base64 string (a nonce) on every single HTTP request: nonce-EDNnf03nceIOfn39fn3e9h3sdfa.
• The server sends the CSP header: Content-Security-Policy: script-src 'nonce-...' 'strict-dynamic' 'unsafe-inline' https:; object-src 'none'; base-uri 'none';.
• Any <script> tag without the matching nonce="..." attribute is immediately blocked and terminated by the browser engine, rendering injected XSS payloads completely harmless.
• The 'strict-dynamic' directive allows legitimate scripts that possess the valid nonce to load downstream child dependencies dynamically without maintaining fragile URL domain allowlists.

3. Cross-Site Request Forgery (CSRF) & Modern Cookie Architecture

Cross-Site Request Forgery tricks an authenticated user's browser into executing unwanted actions on a vulnerable web application (e.g., changing passwords, transferring funds) by submitting unauthorized POST requests from an attacker-controlled third-party website.

Modern web security resolves CSRF through the SameSite Cookie Attribute (RFC 6265bis):

• SameSite=Strict: The cookie is never sent in cross-site requests, even when following an external link. Ideal for highly sensitive banking sessions.
• SameSite=Lax: Default in modern browsers. The cookie is withheld on cross-site sub-requests (such as third-party image tags or AJAX POST queries), but sent when a user navigates directly via a top-level link.
• HttpOnly: Forbids client-side JavaScript from reading the cookie via document.cookie, protecting session tokens from XSS theft.
• Secure: Enforces that cookies are transmitted exclusively over encrypted TLS/HTTPS connections.

4. Production HTTP Security Header Suite

5. Production Implementation: Express Security Headers Middleware with Nonces

The following production TypeScript middleware for Express/Node.js generates per-request cryptographic nonces, injects strict CSP Level 3 headers, and configures complete security protection:

// middleware/securityHeaders.ts
import { Request, Response, NextFunction } from 'express';
import crypto from 'crypto';

export function securityHeadersMiddleware(req: Request, res: Response, next: NextFunction) {
  // Generate a cryptographically secure 128-bit random nonce
  const nonce = crypto.randomBytes(16).toString('base64');
  res.locals.cspNonce = nonce;

  const cspDirectives = [
    "default-src 'self'",
    `script-src 'self' 'nonce-${nonce}' 'strict-dynamic' https:`,
    "style-src 'self' 'unsafe-inline' https://fonts.googleapis.com",
    "font-src 'self' https://fonts.gstatic.com data:",
    "img-src 'self' data: https:",
    "connect-src 'self' https://api.enterprise.com",
    "object-src 'none'",
    "base-uri 'none'",
    "form-action 'self'",
    "frame-ancestors 'none'",
    "upgrade-insecure-requests"
  ].join('; ');

  res.setHeader('Content-Security-Policy', cspDirectives);
  res.setHeader('Strict-Transport-Security', 'max-age=63072000; includeSubDomains; preload');
  res.setHeader('X-Content-Type-Options', 'nosniff');
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');
  res.setHeader('Permissions-Policy', 'camera=(), microphone=(), geolocation=()');

  next();
}

Frequently Asked Questions: Frontend Web Security