Also known as: Content Security Policy, content-security-policy header
Definition
CSP (Content Security Policy) is an HTTP response header that tells the browser which sources of scripts, styles, images, and other resources are allowed to load on a page. A well-configured CSP blocks injected scripts even if an XSS vulnerability exists in the application code.
Content Security Policy is set via the Content-Security-Policy response header. The header lists allowed origins per resource type: script-src 'self' 'nonce-abc123'; style-src 'self' 'unsafe-inline'; img-src 'self' data:. The browser refuses to load any resource that does not match the policy and logs the violation.
A Routing Middleware (or proxy) generates a random nonce per request and injects it into both the CSP header and the inline <script nonce="..."> tags rendered by the app. Inline scripts without the nonce are blocked, which stops attacker-injected scripts from running even if the HTML contains them.
XSS happens when attacker-controlled HTML reaches the page. Even with React's escaping and Server Components, a single use of React's raw-HTML escape-hatch prop can introduce injection. CSP blocks the injected script from executing, turning a code-execution bug into a console-warning bug. The XSS still exists, but the impact is contained.