Free tool
Content Security Policy generator
Tick what your site loads and get a CSP header that will not break it, formatted for Next.js, Vercel, Netlify, Nginx or Express. Starts in Report-Only mode so you can test before enforcing.
Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self'; style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; img-src 'self'; font-src 'self' https://fonts.gstatic.com; connect-src 'self'; frame-src 'none'; media-src 'self'; worker-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests
Report-Only sends the policy without enforcing it, so you can watch the browser console for violations for a day, add anything legitimate, then switch to the enforcing header. Nothing you type here leaves your browser.
How to roll it out without breaking anything
- Deploy the Report-Only header first. Nothing is blocked; violations show in the browser console.
- Click through your app for a day, including checkout, login and any embeds. Add every origin that shows up as a violation and is legitimately yours.
- Switch the header name to
Content-Security-Policy. If you used the nonce option, make sure your framework injects the same nonce into every script tag on each response. - Confirm it with the security headers checker. For what each directive does, read the CSP for Next.js guide.
Frequently asked questions
What is a Content Security Policy?
A Content Security Policy (CSP) is an HTTP response header that tells the browser which origins are allowed to load scripts, styles, images, fonts, frames and network requests on your page. If an attacker manages to inject a script tag, the browser refuses to run it unless its origin is on the list. It is the single strongest defense against cross-site scripting, which is why it carries the most weight in any security headers grade.
Why start with Content-Security-Policy-Report-Only?
An enforcing CSP that is missing one origin breaks that feature for every visitor, silently. The Report-Only variant sends the same policy but only logs violations to the browser console and to your report endpoint if you set one, without blocking anything. Deploy it for a day, add the legitimate origins the reports surface, then rename the header to the enforcing version.
Should I use a nonce or 'unsafe-inline' for scripts?
A nonce. 'unsafe-inline' allows every inline script, including an injected one, so it cancels most of the XSS protection a CSP exists to provide. A nonce is a random value generated per response and placed on both the header and each legitimate script tag; injected scripts do not have it and are blocked. Next.js supports nonces via middleware; the generator emits 'strict-dynamic' alongside the nonce so scripts loaded by trusted scripts are allowed too.
Does this generator handle Supabase, Stripe and Google Fonts?
Yes. Those are the three most common CSP breakages in AI-built apps: Supabase needs its project origin in connect-src for REST and wss for realtime, Stripe needs js.stripe.com in script-src and frame-src, and Google Fonts needs fonts.googleapis.com in style-src plus fonts.gstatic.com in font-src. Tick the box and the directives are added; for Supabase you can paste your project URL to replace the wildcard.
How do I know the policy is actually being sent?
Open your deployed site and run it through a security headers checker, or look at the response headers in the browser's network tab. A common mistake is setting the header only on some routes or only in development. Apply it once in middleware, next.config headers, or your server config so every response carries it.
A CSP is the browser layer. What about the app?
A good policy stops injected scripts. It does nothing about an API key shipped in your bundle, a dashboard that renders without a login, or a database readable with the public key. Prbl scans the app itself for the mistakes AI coding tools ship most.
Run a free scan