Content Security Policy (CSP) for Next.js & Stripe Elements

Strict Content-Security-Policy (CSP) header implementation that satisfies PCI-DSS SAQ A requirements while allowing Stripe.js payment elements.

1. Attack Signature & Impact Analysis

Critical (Card Data Stealing / XSS)

Magecart and XSS attacks inject unauthorized JavaScript into checkout pages to skim credit card details. A strict CSP locks down authorized script origins completely.

2. Production Hardening Configuration (`next.config.mjs or Nginx security headers`)

Deploy this validated configuration to your production server or reverse proxy:

// Next.js Strict CSP Headers with Stripe Support
const cspHeader = `
    default-src 'self';
    script-src 'self' 'unsafe-inline' https://js.stripe.com;
    frame-src 'self' https://js.stripe.com https://hooks.stripe.com;
    connect-src 'self' https://api.stripe.com https://maps.googleapis.com;
    img-src 'self' data: https://*.stripe.com;
    style-src 'self' 'unsafe-inline';
    font-src 'self' data:;
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'none';
    upgrade-insecure-requests;
`.replace(/\s{2,}/g, ' ').trim();

3. Live Simulation & Rule Verification Command

Execute these commands to verify that traffic is actively mitigated without service downtime:

# Check live HTTP response headers for CSP
curl -I https://yourdomain.com | grep -i content-security-policy
# Test compliance on Google CSP Evaluator: https://csp-evaluator.withgoogle.com

4. Common Misconfigurations & Troubleshooting Gotchas

⚠️ Production Caution: Do not omit `frame-src https://js.stripe.com`, otherwise 3D Secure (3DS) two-factor authentication popups on European cards will be blocked by the browser.

5. Best Paired With (Complementary Defense Recipes)

Security engineers implementing this rule frequently deploy these complementary baselines: