Bug Circuit

Free tool · no signup

Content-Security-Policy generator

Build a Content-Security-Policy header by choosing where your pages may load scripts, styles, images and frames from. It grades the result and starts in Report-Only mode so nothing breaks.

By the Bug Circuit security team · Last updated

Build your policy

Header
Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'; object-src 'none'; base-uri 'none'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests
  • style-src 'unsafe-inline' is common because many sites use inline styles, and it is a much smaller risk than inline scripts.

Self-check: grade A

  • No nonce or hash on scripts

    A host allowlist is hard to keep safe. Google's recommended strict policy uses a per-response nonce plus 'strict-dynamic'.

    Note
  • No serious weaknesses found

    This policy blocks the common injection routes. Test it in Report-Only mode on your real pages before enforcing it.

    OK

Add it as an HTTP response header, or use the security headers generator for Nginx, Apache, Netlify, Vercel and Next.js snippets. Run in Report-Only mode first, fix what the reports show, then switch to enforcing.

What is a Content-Security-Policy? An HTTP header that tells the browser which sources of scripts, styles, images and frames your pages may use, so an injected script cannot run. Build one below, deploy it as Report-Only first, fix what the reports show, then enforce it.

How it works

What a CSP protects you from

The most common web attack is cross-site scripting (XSS): an attacker gets their JavaScript onto your page, through a comment box, a URL parameter or a compromised third-party script, and it runs with the full trust of your site. A Content-Security-Policy is a second line of defence. Even if the injection happens, the browser refuses to run a script that is not on your list.

It also stops clickjacking (frame-ancestors), tricks that rewrite relative links (base-uri) and old plugin content (object-src).

Two styles: allowlist or nonce

A host allowlist (script-src 'self' https://js.stripe.com) is simple and works for static sites, but every host you list can run code on your pages, and some popular CDNs host files that attackers can abuse. Keep the list short.

A strict policy uses a nonce: your server creates a fresh random value on every page load, puts it in each legitimate script tag, and lists it in the header with 'strict-dynamic'. Only scripts carrying that value run, and the scripts they load are trusted. This is the policy Google recommends, and it needs your server to generate the nonce.

Roll it out without breaking the site

Send the header as Content-Security-Policy-Report-Only first (the default here). The browser reports what it would have blocked, without blocking anything. Fix the legitimate sources that show up, then switch the header name to Content-Security-Policy. The generator also grades your policy as you build it, using the same checks as the CSP checker.

Worked examples

A static site that loads everything from its own domain

Self-only, no extra hosts, inline styles allowed.

Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self'; object-src 'none'; base-uri 'none'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests

A solid starting point. It blocks inline and third-party scripts, so add any host you really need.

Adding Stripe checkout

Script host https://js.stripe.com and frame https://js.stripe.com.

script-src 'self' https://js.stripe.com; frame-src https://js.stripe.com

Each service documents the hosts it needs. Add only those.

Frequently asked questions

What is a Content-Security-Policy?
A response header that tells the browser which sources it may load scripts, styles, images, frames and connections from for your pages. Anything else is blocked, which stops most injected scripts.
What does Report-Only mean?
The browser applies the policy but only reports violations instead of blocking them. It lets you find what would break before you turn enforcement on.
Why is 'unsafe-inline' bad for scripts?
It allows every inline script on the page, including one an attacker injects, which removes the main protection of a CSP. Use a nonce or hashes instead. For styles it is a much smaller risk, so many sites allow it.
Where do I add the header?
In your web server or hosting settings (Nginx, Apache, Netlify, Vercel, Cloudflare) or in your framework. The security headers generator turns the result into snippets for each.
Will a CSP break my site?
It can if it blocks something you use, such as an analytics script or a font. That is exactly what Report-Only mode is for. Deploy it, browse your site, read the reports and add the sources that are needed.
Is a CSP enough on its own?
No. It limits the damage of an injection bug but does not fix it. You still need to fix the bug, and a manual security test is how real injection points get found.

Keep reading

Security Headers CheckerSee which headers your site sends.Manual vs automated testingWhat a scanner misses.

See what attackers see, for free

Run the free passive check on your website. No login, no impact on your site, results in seconds.

Ready for the full manual audit? See pricing

CSP Generator: Content-Security-Policy Builder · Bug Circuit