Content Security Policy (CSP), the complete reference
How CSP works, its headers, the values you put in a directive, and every directive, with reporting throughout.
Last update:
Content Security Policy (CSP) is an HTTP response header that tells the browser which resources a page is allowed to load and execute. The browser enforces it: a script, stylesheet, image, frame or connection that no directive permits is blocked before it runs. That is what makes CSP the primary defense against cross-site scripting (XSS) and content injection, and the reason it is the only control that stops an injected script even when the injection itself succeeds.
A policy is a semicolon-separated list of directives, each naming a resource type and the sources allowed for it:
Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-r4nd0m'; object-src 'none'; base-uri 'none'CSP can also report instead of block. Content-Security-Policy-Report-Only carries the
same policy, enforces nothing, and sends a
csp-violation report for
everything it would have blocked, so you can measure a policy against real traffic before
you turn it on.
The parts of a policy
| Part | What it is | Reference |
|---|---|---|
| Header | Content-Security-Policy enforces, -Report-Only only reports. A <meta> element can carry a policy too, with limits. | Headers |
| Directive | The resource type being governed: script-src, img-src, frame-ancestors. | Directives |
| Source list | The values after a directive: keywords, hosts, schemes, hashes, nonces. | Values |
| Fallback | Most fetch directives fall back to default-src when absent. | default-src |
| Reporting | report-to (and legacy report-uri) name where violations are sent. | report-to |
Directives by role
Every directive has its own page. Grouped by what it governs:
| Role | Directives |
|---|---|
| Fetch | default-src, script-src, script-src-elem, script-src-attr, style-src, style-src-elem, style-src-attr, img-src, font-src, media-src, object-src, connect-src, manifest-src, frame-src, child-src, worker-src, fenced-frame-src |
| Document | base-uri, sandbox |
| Navigation | form-action, frame-ancestors |
| Reporting | report-to, report-uri |
| Trusted Types | require-trusted-types-for, trusted-types |
| Other | upgrade-insecure-requests, webrtc |
| Deprecated or removed | block-all-mixed-content, plugin-types, prefetch-src, navigate-to, referrer, require-sri-for |
A policy worth copying
Content-Security-Policy:
default-src 'self';
script-src 'self' 'nonce-{RANDOM}';
style-src 'self' 'unsafe-inline';
img-src 'self' data:;
connect-src 'self';
object-src 'none';
base-uri 'none';
frame-ancestors 'none';
report-to csp-endpointobject-src 'none' and base-uri 'none' close the two bypasses that defeat an otherwise
strict policy: plugin content, and an injected <base> element that repoints every
relative script URL. frame-ancestors 'none' is the modern replacement for
X-Frame-Options. A fresh nonce per response is what lets you drop 'unsafe-inline' from
script-src, which is where nearly all of CSP's XSS protection comes from.
Sub-sections
Introduction
What CSP is, and how directives, values, and headers fit together.
Report-Only
The Content-Security-Policy-Report-Only header, testing a policy without enforcing it.
Values
What goes inside a directive: keywords, host- and scheme-source, hashes and nonce, and the report-sha256 keyword.
Directives
One page per directive, grouped by role: fetch, document, navigation, reporting, and more.
Start here
- New to CSP? Read what CSP is.
- Writing your first policy? Start from
script-srcanddefault-src. - Deploying safely? Ship
Content-Security-Policy-Report-Onlyfirst and tighten from the reports. - Checking a live policy? Run it through the CSP evaluator.
Reporting
Every blocked resource produces a csp-violation report naming the directive that blocked it and the URL it blocked, delivered over the Reporting API. Those reports are how a policy is built: ship it Report-Only, read what it would have blocked, and tighten. CentralCSP collects and aggregates them per site, so a rollout is driven by what your visitors' browsers actually observed rather than by guesswork.