Missing Content Security Policy (CSP)

CSP is the "nuclear option" against Cross-Site Scripting (XSS). It tells the browser exactly which domains are allowed to run code on your page.

Business Risk

Without CSP, any script injected into your page (via a compromised ad, a malicious npm package, or a user comment) can execute with full permissions. It can steal cookies, read local storage, and redirect users. CSP blocks unauthorized scripts from loading entirely.

Technical Details

Pitfall: Don't just set `default-src: *`. That does nothing. Start with `default-src 'none'` and unlock only what you need. Use `Content-Security-Policy-Report-Only` header first to see what *would* break without actually breaking it, logging violations to a service like Sentry or URIports.

Remediation Guide

// next.config.js
// Only use 'unsafe-inline' if necessary (e.g. Google Tag Manager)
const cspHeader = `
    default-src 'self';
    script-src 'self' 'nonce-{random}' 'strict-dynamic';
    style-src 'self' 'unsafe-inline';
    object-src 'none';
    base-uri 'self';
    frame-ancestors 'none';
    block-all-mixed-content;
`;

javascript

External References

Verify Your Fix

Applied the configuration change? Run a live scan to confirm the vulnerability is patched.