Content Security Policy (CSP) Configuration Guide

Web applications are vulnerable to XSS attacks. Content Security Policy headers can prevent script injection but are complex to configure correctly.

Start strict, then relax as needed:

# Strict CSP (best for new apps)
Content-Security-Policy:
  default-src 'none';
  script-src 'self';
  style-src 'self';
  img-src 'self' data:;
  font-src 'self';
  connect-src 'self';
  base-uri 'self';
  form-action 'self';
  frame-ancestors 'none';

# With nonce-based inline scripts (recommended)
Content-Security-Policy:
  script-src 'nonce-{random}' 'strict-dynamic';

# Report-only mode for testing
Content-Security-Policy-Report-Only:
  default-src 'self';
  report-uri /csp-report;

Common directives:

• default-src: Fallback for all resource types
• script-src: JavaScript sources
• style-src: CSS sources
• connect-src: XHR, fetch, WebSocket
• frame-ancestors: Who can embed this page (replaces X-Frame-Options)

Implementation:

// Express middleware
const crypto = require('crypto');
app.use((req, res, next) => {
  const nonce = crypto.randomBytes(16).toString('base64');
  res.locals.nonce = nonce;
  res.setHeader('Content-Security-Policy',
    `script-src 'nonce-${nonce}' 'strict-dynamic'`);
  next();
});

CSP is the strongest defense against XSS. Even if an attacker finds an injection point, CSP prevents unauthorized scripts from running.

Securing web applications against XSS