Add a Content-Security-Policy on Vercel

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 header below to vercel.json (merge it into an existing headers array) and redeploy.
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, change the key to Content-Security-Policy. For per-request nonces in Next.js, generate the policy in proxy.ts (called middleware.ts before Next.js 16) instead of vercel.json.

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy-Report-Only",
          "value": "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