Next.js CSP configuration

In Next.js, set CSP headers in next.config.js using the headers() function, or in middleware.ts for dynamic nonce-based CSP. Next.js requires 'unsafe-eval' for development hot reload and 'unsafe-inline' for styled-jsx. For production, use nonces with 'strict-dynamic' for the strongest policy.

// Next.js — CSP in next.config.js
const cspHeader = `
  default-src 'self';
  script-src 'self' 'unsafe-eval' 'unsafe-inline';
  style-src 'self' 'unsafe-inline';
  img-src 'self' blob: data:;
`;

// Express middleware
app.use((req, res, next) => {
  res.setHeader("Content-Security-Policy",
    "default-src 'self'; script-src 'self'");
  next();
});

// Nginx
add_header Content-Security-Policy "default-src 'self'; script-src 'self'" always;

// Vercel (vercel.json)
{ "headers": [{ "key": "Content-Security-Policy", "value": "default-src 'self'" }] }

Nginx and Apache CSP headers

In Nginx, use: add_header Content-Security-Policy "default-src 'self'; script-src 'self'" always; — the 'always' flag ensures the header is sent on error pages too. In Apache, use: Header always set Content-Security-Policy "default-src 'self'; script-src 'self'". Place these in your server block or .htaccess respectively.

Vercel and Netlify CSP headers

On Vercel, add headers in vercel.json under the headers array with a source pattern. On Netlify, use the [[headers]] section in netlify.toml or a _headers file. Both platforms support wildcards for applying CSP across all routes.