Add a Content-Security-Policy on Netlify

Why it matters

Without a CSP the browser runs any script that ends up in your pages, so a single injection bug gives an attacker control of what visitors see and do. A policy limits where scripts, frames and plugins may load from.

Staged change. Do this in stages and check each one before the next, so a mistake does not break your site or your mail.

The fix

1. Stage 1: add the lines below to the _headers file in the publish directory (or a [[headers]] block in netlify.toml) and redeploy. They do not apply to Netlify Functions, Edge Functions or proxied responses; those must send the header themselves.
2. Browse every page type with the developer console open and add the sources it reports to the policy.
3. Stage 2: when nothing legitimate is reported, rename the header to Content-Security-Policy.

/*
  Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self'; img-src 'self' data: https:; object-src 'none'; base-uri 'self'; frame-ancestors 'self'; form-action 'self'

Read the documentation ↗(opens in a new tab)

Related

• Reported by the Content-Security-Policy check
• Enforce the report-only Content-Security-Policy
• Send the Content-Security-Policy as an HTTP header
• Restrict where scripts can load from
• Replace 'unsafe-inline' scripts with nonces or hashes
• Remove 'unsafe-eval' from script-src
• Remove wildcard sources from script-src
• Set object-src to 'none'
• Add base-uri to the Content-Security-Policy
• Reduce reliance on inline styles
• Fix the Content-Security-Policy syntax