CSP Framework Examples
Copy-paste Content Security Policy configurations for popular frameworks and platforms. Each example is a tested starting point — customize it for your specific third-party services.
CSP Header Builder
Build Content Security Policy headers visually with framework presets, security analysis, and multi-format output.
Directives
Fetch Directives
Document Directives
Navigation Directives
Output Format
Generated Policy
Content-Security-Policy: upgrade-insecure-requests
Security Analysis
Policy Stats
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.
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.
Frequently Asked Questions
Why does my Next.js app break with a strict CSP?
Next.js uses inline scripts for hydration and CSS-in-JS libraries often inject inline styles. You need 'unsafe-inline' for style-src and either nonces or 'unsafe-eval' for script-src. Use the Next.js CSP preset in the builder as a starting point.
How do I add CSP to Nginx?
Add this to your server block: add_header Content-Security-Policy "your-policy-here" always; The 'always' keyword ensures the header is sent even on error responses (404, 500). Test with Content-Security-Policy-Report-Only first.
Can I use CSP with a CDN like Cloudflare?
Yes. Set CSP at your origin server. CDNs pass through response headers by default. Some CDNs (Cloudflare Workers, Vercel Edge) also let you add or modify headers at the edge. Make sure your CSP allows your CDN's domain in the relevant directives.
Related Generate Tools
CSS Gradient Generator
Create beautiful CSS gradients visually with live preview
QR Code Generator
Generate customizable QR codes from text or URLs
Color Palette Generator
Generate harmonious color palettes using color theory algorithms
Box Shadow Generator
Design CSS box shadows visually with multiple layers, presets, and live preview