mediumCWE-358A05:2021

Missing Content-Security-Policy Header

The Content-Security-Policy (CSP) header is absent, leaving browsers without instructions on which sources of scripts, styles, and resources to trust.

How It Works

Without CSP, if an attacker injects a malicious script into your page (via XSS), the browser will execute it without question. CSP is a browser-enforced allowlist that blocks scripts from unexpected origins, inline script execution, and data: URI tricks — it's your last line of defense when XSS occurs.

Vulnerable Code
// BAD: no CSP header in Next.js config
// next.config.ts — no headers() defined
export default {
  // CSP not set anywhere
};
Secure Code
// GOOD: strict CSP in Next.js headers
// next.config.ts
const cspHeader = `
  default-src 'self';
  script-src 'self' 'nonce-{NONCE}';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  connect-src 'self';
  frame-ancestors 'none';
`;
export default {
  async headers() {
    return [{ source: '/(.*)', headers: [{ key: 'Content-Security-Policy', value: cspHeader }] }];
  }
};

Real-World Example

British Airways (2018) — attackers injected 22 lines of JavaScript into the payment page. A strict CSP would have blocked the malicious script from loading. The breach compromised 500,000 customers and resulted in a £20 million fine.

How to Prevent It

  • Add a Content-Security-Policy header to all responses via Next.js headers() or nginx config
  • Start with report-only mode (Content-Security-Policy-Report-Only) to test without breaking things
  • Use nonces for inline scripts instead of 'unsafe-inline'
  • Test your CSP at csp-evaluator.withgoogle.com

Affected Technologies

Next.jsnodejsnginxapache

Data Hogo detects this vulnerability automatically.

Scan Your Repo Free

Related Vulnerabilities