Astro¶

Astro added built-in CSP support in Astro 6 via a security.csp option. It is hash-based and works across static, server-rendered and SPA output, which is genuinely useful - and it has one limitation that matters a great deal if you want to know what your policy is blocking.

What Astro gives you¶

security.csp in astro.config.mjs, typed boolean | object and defaulting to false. Added in Astro 6.0.
Automatic hash generation for the scripts and styles Astro bundles, including ones loaded dynamically. SHA-256 by default, configurable to SHA-384 or SHA-512.
Additional hashes via security.csp.scriptDirective.hashes and security.csp.styleDirective.hashes - values must start with sha256-, sha384- or sha512-.
Extra directives via security.csp.directives.
Works in build and preview, not in development.

Astro's CSP cannot report¶

Astro delivers the policy as a <meta http-equiv="content-security-policy"> element in the document head, and it configures script-src and style-src automatically. A <meta> tag policy silently ignores report-uri and report-to, so no matter what you put in security.csp.directives, Astro's built-in CSP will never send you a violation report.

That is a real gap rather than a nitpick: it means the built-in feature cannot tell you what it blocked, and cannot produce evidence for an assessor.

Getting reports anyway¶

Send a Content-Security-Policy-Report-Only header, with the two Reporting API headers, from whatever serves your Astro site, alongside Astro's own <meta> policy. Your URLs come from the Setup page:

Content-Security-Policy-Report-Only: default-src 'none'; script-src 'report-sha256'; form-action 'none'; frame-ancestors 'none'; report-uri https://abc123.report-uri.com/r/d/csp/reportOnly; report-to default
Reporting-Endpoints: default="https://abc123.report-uri.com/a/d/g"
Report-To: {"group":"default","max_age":31536000,"endpoints":[{"url":"https://abc123.report-uri.com/a/d/g"}],"include_subdomains":true}

The Reporting-Endpoints and Report-To headers tell the browser where report-to default sends reports, including the CSP Integrity reports that 'report-sha256' turns on.

Our Netlify, Cloudflare and Nginx pages cover setting it in the places Astro sites usually live. Report-only blocks nothing, so it runs safely alongside the enforcing <meta> policy.

Things to watch for¶

External scripts and styles are not supported out of the box. Astro hashes what it bundles; anything from a third-party origin needs adding to the directives yourself.
View transitions using <ClientRouter /> are incompatible with Astro's CSP implementation.
Astro uses hashes, not nonces. That is the right call for a mostly-static output - hashes survive caching in a way nonces cannot - but it means every inline change invalidates a hash, which Astro handles for its own output and not for yours.
The feature is off in development, so a policy problem will first appear in a preview or production build.

Official documentation¶

Astro - Configuration Reference: security.csp

Start Monitoring with Report URI¶

Already using us for CSP? Find your CSP reporting directives on Setup, or view your CSP reports.

New to Report URI? Create an account and grab your CSP reporting directives from the Setup page.

Start your free trial