What is Content Security Policy (CSP)?

Content Security Policy (CSP)

Published: July 6, 2026 · Updated: July 9, 2026

Content Security Policy (CSP) is a browser security mechanism controlled by the Content-Security-Policy HTTP header, in which a site declares the allowed sources of resources: scripts, styles, images, fonts or network connections. The browser blocks anything that does not fit the policy.

CSP is the main defense-in-depth layer against XSS attacks — even if an attacker injects code into the page, the policy prevents it from executing. Directives such as frame-ancestors also protect against clickjacking, replacing the older X-Frame-Options header.

Key directives

default-src — the default policy for all resource types.
script-src / style-src — script and style sources; modern policies use nonces or hashes instead of domain lists.
frame-ancestors — who may embed the page in an iframe (clickjacking protection).
report-to / report-uri — reporting policy violations to a designated endpoint.

How to deploy safely

Start with Content-Security-Policy-Report-Only mode, which only reports violations without blocking, analyze the reports, and only then enforce the policy. Avoid 'unsafe-inline' and broad whitelists — the recommended direction is a strict, nonce-based CSP with 'strict-dynamic'.

Example

A starter policy in Report-Only mode — collects violations without blocking scripts in production.

HTTP header (Report-Only)

HTTP

Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self' 'nonce-abc123' 'strict-dynamic'; style-src 'self' 'nonce-abc123'; report-uri /csp-report

Script with a nonce matching the policy

HTML

<script nonce="abc123" src="/app.js"></script>

Sources & further reading

MDN — Content Security Policy (CSP) docs
W3C — Content Security Policy Level 3 standard
OWASP — CSP Cheat Sheet docs

Content Security Policy (CSP)

Key directives

How to deploy safely

Example

Sources & further reading

Related terms

Check public security signals