Dev
Mock CSP Header Generator
Content-Security-Policy headers are one of the most effective browser security controls, but they are also one of the easiest to misconfigure — a policy that is too strict silently breaks your site, while one that is too loose defeats the purpose. This tool generates a CSP header string at one of three strictness levels to help you learn the directive syntax and plan your own policy. The "strict" option produces a tightly locked policy: default-src, script-src, style-src, and img-src all limited to 'self', object-src set to 'none', and frame-ancestors set to 'none' (which prevents clickjacking). "moderate" allows a CDN for scripts and fonts, permits inline styles with 'unsafe-inline', and accepts HTTPS images. "report-only" emits a Content-Security-Policy-Report-Only header that sends violation reports to /csp-report without blocking anything. Choose a level, copy the header, and paste it into your server config or a response in a test. Start with report-only against a live site to discover what a strict policy would block before you enforce it.
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Choose a strictness level.
- Click Generate to produce a CSP header.
- Test it in report-only mode first.
- Adapt the sources to your app.
Use Cases
- •Learning Content-Security-Policy
- •Hardening a website
- •Documenting security headers
- •Testing CSP configuration
- •Demoing web security
Tips
- →Start with report-only mode.
- →A strict CSP can break a site.
- →Allow only the sources you need.
- →frame-ancestors guards against clickjacking.
FAQ
what does each strictness level produce
"strict" locks everything to 'self' with object-src 'none' and frame-ancestors 'none'. "moderate" allows a CDN for scripts and fonts, permits 'unsafe-inline' for styles, and accepts HTTPS images. "report-only" uses the Content-Security-Policy-Report-Only header with a report-uri directive — violations are reported but nothing is blocked.
what is report-only mode and why start with it
The Content-Security-Policy-Report-Only header sends a violation report to your report-uri when a request would have been blocked, but does not actually block anything. Starting with report-only on a live site reveals which legitimate resources a strict policy would break, so you can add them to the allowlist before switching to enforcement mode.
why might a strict CSP break my site
A strict policy blocks anything not explicitly allowed — inline scripts and styles, third-party CDNs, analytics pixels, embedded fonts. If your site relies on any of these, they will silently fail under a strict CSP. The moderate level shows how to open specific exceptions without discarding the policy entirely.
what does frame-ancestors none do
frame-ancestors 'none' prevents any page from embedding your site in an iframe, which defeats clickjacking attacks where an attacker overlays a hidden iframe of your site to trick users into clicking hidden UI. The strict level includes this directive; the moderate and report-only levels do not.
You might also like
Popular tools from other categories that share themes with this one.
Try these next
More free tools from other corners of the catalog, picked by shared themes.