Security headers › Content-Security-Policy
How to add the Content-Security-Policy header in Next.js
CSP tells the browser which sources of scripts, styles, images and frames are allowed on your pages.
Next.js configuration (next.config)
async headers() {
return [
{
source: "/:path*",
headers: [{ key: "Content-Security-Policy", value: "default-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self'" }],
},
];
}Add the headers() function to your Next.js config and restart or redeploy. Headers set by a proxy or CDN in front can override these.
Before you deploy
A strict CSP can break analytics, fonts and inline scripts. Start with Content-Security-Policy-Report-Only, watch the reports, then enforce. The value here is a starting point you will need to extend.
Verify it works
curl -sI https://your-site.com | grep -i content-security-policyOr run a free Korrali Web scan to check this and every other security header at once.