Content Security Policy for React Apps

Content Security Policy (CSP) is an HTTP response header that tells the browser which content sources are trusted. By declaring exactly which scripts, styles, images, and fonts are allowed to load, CSP prevents injected malicious content from executing — even if an XSS vulnerability allows the attacker to inject HTML into the page.

default-src 'self' sets the baseline: all resource types (scripts, styles, images, fonts, frames) may only load from the same origin. script-src 'self' narrows script loading to the same origin, blocking scripts from external CDNs unless explicitly listed. These two directives together form the foundation of a restrictive CSP.

eval() converts a string into executable code at runtime — which is exactly what XSS payloads need. A CSP with script-src 'self' (without 'unsafe-eval') blocks eval() and related functions like new Function() and setTimeout(string). This eliminates a major class of XSS payload execution.

'strict-dynamic' in script-src grants trust to scripts loaded by already-trusted scripts. This enables dynamic script loading patterns used by bundlers without requiring you to whitelist every CDN URL. A trusted script can load additional scripts, and those inherit trust.

If your application needs a specific inline script (like an analytics initialization snippet), you can compute its SHA-256 hash and add 'sha256-base64hash' to script-src. Only scripts matching that exact hash are allowed to execute inline. Any attacker-injected script will have a different hash and be blocked.

A nonce is a cryptographically random value generated by the server for each request. The server adds the nonce to both the script tag (<script nonce="abc123">) and the CSP header (script-src 'nonce-abc123'). Only scripts bearing the correct nonce execute. Attackers cannot predict the nonce, so injected scripts cannot use it.

CSP supports violation reporting via report-uri /csp-violation-endpoint or the newer report-to directive. When the browser blocks a resource due to CSP, it sends a JSON report to the endpoint. Monitoring these reports helps you identify both legitimate configuration issues and active attack attempts.

In Next.js, add CSP headers in middleware: create middleware.ts, generate a nonce, set the Content-Security-Policy header, and pass the nonce to the page via a response header. The page layout reads the nonce from the header and applies it to all inline scripts and style tags.

Content-Security-Policy-Report-Only is the testing mode: the browser enforces nothing but sends violation reports for everything that would have been blocked. Deploy in Report-Only mode first, fix all violations, then switch to the enforcing Content-Security-Policy header to avoid breaking the application.

When CSP blocks a resource, Chrome DevTools console shows a red error message identifying the blocked URL and the violated directive. These messages are invaluable during development and testing. Each violation must be resolved either by fixing the policy, moving the resource to an allowed source, or using a nonce/hash.

A practical React SPA CSP: default-src 'self'; script-src 'self' 'strict-dynamic' 'nonce-NONCE'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.yourdomain.com; frame-ancestors 'none'. The frame-ancestors 'none' also prevents clickjacking by blocking your app from being embedded in iframes.

What does script-src 'self' in a Content Security Policy prevent?

CSP is an HTTP header declaring trusted content sources. default-src 'self' and script-src 'self' block external scripts and eval. Inline scripts are allowed via hashes or nonces. 'strict-dynamic' supports dynamic script loading. Use Content-Security-Policy-Report-Only to test before enforcing. Next.js implements CSP via middleware. DevTools console shows violations in real time.