Content Security Policy (CSP) Explained: How to Prevent XSS

What CSP Does

Cross-Site Scripting (XSS) is one of the most common web vulnerabilities. An attacker injects malicious JavaScript into your page — through a comment field, URL parameter, or compromised dependency — and that script runs in the user's browser, potentially stealing session tokens or data.

A Content Security Policy tells the browser exactly which sources of content are trusted. Even if an attacker manages to inject a script tag, the browser will refuse to execute it if the source is not on the approved list.

The CSP Header

Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-r4nd0m'; style-src 'self' 'unsafe-inline'; img-src * data:

Key Directives

Values

Nonce-Based CSP (Recommended for SPAs)

Instead of unsafe-inline, generate a random nonce per request and include it in both the header and the script tag:

<!-- Server generates nonce per request -->
<script nonce="r4nd0m123">/* this script is allowed */</script>

Content-Security-Policy: script-src 'nonce-r4nd0m123'

Since the attacker cannot guess the nonce, injected scripts are blocked.

Report-Only Mode

Start with Content-Security-Policy-Report-Only to log violations without blocking anything:

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report

Review reports, fix legitimate sources, then switch to enforcement mode.

Check your CSP with our Security Headers Checker.