Skip to main content
Dev · 283 tools

Mock CSP Header Generator

Generates example Content-Security-Policy headers for web security

CSP HeaderExample — click Generate for yours
Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' https://fonts.example.com

Generated 16 words · 192 characters

About this 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

  1. Choose a strictness level.
  2. Click Generate to produce a CSP header.
  3. Test it in report-only mode first.
  4. 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.