Skip to content
FixSecurityHeadersScan a site

How to add Content-Security-Policy on Vercel

Last updated · Reviewed by a CISSP-certified security practitioner

To add Content-Security-Policy on Vercel, set the header in vercel.json with the value default-src 'self'; script-src 'self'; style-src 'self'; …. Controls which scripts, styles and frames a page may load. Commit and redeploy; headers apply on the next deployment. Then confirm it with curl -I or a free FixSecurityHeaders scan.

What does Content-Security-Policy do?

CSP is an allow-list for where your page may load scripts, styles, images, frames and connections from. It is the strongest defence against cross-site scripting.

Risk if missing: Without a CSP, any injected script (XSS, a compromised third‑party tag, a Magecart skimmer) runs with full access to your users' sessions and payment forms.

What is the Vercel configuration?

Add this to vercel.json:

vercel.json
{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data: https:; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests"
        }
      ]
    }
  ]
}

How do I add it step by step?

  1. Open vercel.json.
  2. Paste the Content-Security-Policy configuration shown below.
  3. Commit and redeploy; headers apply on the next deployment.
  4. Run curl -I https://yourdomain.com and look for the content-security-policy line.
  5. Scan your site on FixSecurityHeaders to confirm the grade improved.

How do I verify it worked?

terminal
curl -sI https://yourdomain.com | grep -i "content-security-policy"
# expected:
# content-security-policy: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data: https:; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests

Check your site now

Free scan, instant grade, exact fixes for your stack.

What are the common mistakes?

  • Deploy as Content-Security-Policy-Report-Only first and watch reports before enforcing.
  • 'unsafe-inline' and 'unsafe-eval' in script-src remove most of the XSS protection. Use nonces or hashes.
  • Analytics, chat widgets and payment iframes need their hosts added explicitly.
  • Only one CSP header should be sent; multiple policies are intersected, which often blocks more than expected.
  • vercel.json headers don't apply to Next.js middleware responses — set them in next.config.js for Next apps.
  • The source pattern "/(.*)" matches every path.

Quick reference

HeaderContent-Security-Policy
Recommended valuedefault-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data: https:; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests
StackVercel
Wherevercel.json
CompliancePCI DSS 4.0 6.4.3, PCI DSS 4.0 11.6.1, OWASP ASVS V14.4.3, SOC 2 CC6.8, NIST 800-171 3.13.1

FAQ

What value should I use for Content-Security-Policy?

A safe default is default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data: https:; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; form-action 'self'; upgrade-insecure-requests. Deploy as Content-Security-Policy-Report-Only first and watch reports before enforcing.

Why isn't Content-Security-Policy showing up on Vercel?

vercel.json headers don't apply to Next.js middleware responses — set them in next.config.js for Next apps. Also clear any CDN or page cache, and check you edited the config that actually serves your domain.

Does Content-Security-Policy affect SEO or performance?

No measurable performance cost — it's a few bytes per response. It doesn't affect rankings directly, but a misconfigured policy can break page resources, so test before enforcing.

Which compliance frameworks reference Content-Security-Policy?

PCI DSS 4.0 6.4.3, PCI DSS 4.0 11.6.1, OWASP ASVS V14.4.3, SOC 2 CC6.8, NIST 800-171 3.13.1.

Related guides