Fix Content Security Policy on Vercel

Last updated: April 2026

Add a Content-Security-Policy header to Vercel via vercel.json or next.config.js for Next.js projects.

vercel.json — basic CSP

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; frame-ancestors 'none'; object-src 'none'"
        }
      ]
    }
  ]
}

With Google Fonts and Analytics

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "default-src 'self'; script-src 'self' https://www.googletagmanager.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; frame-ancestors 'none'; object-src 'none'"
        }
      ]
    }
  ]
}

next.config.js alternative

module.exports = {
  async headers() {
    return [{
      source: '/(.*)',
      headers: [{
        key: 'Content-Security-Policy',
        value: "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; frame-ancestors 'none'; object-src 'none'"
      }],
    }];
  },
};

Verify after deploy

curl -sI https://yourapp.vercel.app | grep -i content-security