Netlify¶

Netlify is one of the few hosting platforms that solves the hard part of CSP for static sites: generating a unique nonce per request. Edge functions run per request, so a statically generated site can still carry a nonce-based policy - which normally means giving up static generation entirely.

What Netlify gives you¶

Headers set declaratively in your _headers file or netlify.toml, including Content-Security-Policy-Report-Only for a dry run.
A Content Security Policy extension, installed by a Team Owner and enabled per site under Project configuration > Build & Deploy > Content Security Policy.
Dynamic nonce generation using edge functions, either through the extension or the @netlify/plugin-csp-nonce build plugin if you prefer configuration as code.
Built-in violation reporting through the extension, viewable under Logs & Metrics > Functions - and Netlify's own documentation names Report URI as one of the third-party options if you would rather have proper aggregation, alerting and history.

Sending reports to Report URI¶

Add the headers to your _headers file. 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}

That is the same starting policy we recommend for the CSP Wizard. The two Reporting API headers are what report-to sends through. 'report-sha256' in script-src turns on CSP Integrity, which reports a hash of every script that loads. Swap the header name to Content-Security-Policy and the report-uri endpoint to enforce once your reports are clean.

Things to watch for¶

The extension is installed at team level but enabled per site. Installing it is not the same as turning it on, and it is an easy step to miss.
If you use both the _headers file and the extension, be clear about which one is producing the header you are looking at - two policies means the browser enforces the intersection.
Nonce generation via edge functions runs on every request, so it interacts with your caching strategy. A page cached with its header will serve a stale nonce.

Official documentation¶

Netlify - Content Security Policy

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. Prefer a guided setup? The CSP Wizard builds a policy from your reports automatically once you're signed in.

Start your free trial