Skip to content
TextArray
100% local

CSP header generator

Build a Content-Security-Policy header from per-directive fields, ready to deploy.

Output

CSP header generator

A Content-Security-Policy header is the strongest single defense against XSS a website can deploy — and one of the easiest headers to get subtly wrong. Fill in the directives you need, leave the rest blank, and the policy assembles itself: default-src as the baseline, with script-src, style-src, img-src, connect-src, font-src and frame-ancestors overriding it where you say so. Empty fields are omitted entirely, which is correct CSP: an absent directive falls back to default-src instead of accidentally allowing everything.

The generator fixes the classic mistake for you: CSP keywords must be quoted, and an unquoted self does not mean "this origin" — it means a host literally named self. Type self, none or unsafe-inline bare and they come out properly quoted; hosts and schemes like https://cdn.example.com or data: stay as they are.

The output format matches where the policy will live: a raw header line for reading and pasting, an HTML meta tag for static sites without server access, or the exact add_header and Header set lines for nginx and Apache configs. The upgrade-insecure-requests toggle appends the directive that transparently rewrites stray http:// subresources to https.

Start strict — default-src 'self' alone — deploy, open the browser console, and add sources as real violations appear; that loop produces tighter policies than guessing upfront. Everything runs locally in your browser: your architecture, CDN choices and API endpoints never leave your device.

FAQ

Why must 'self' be quoted?
Because CSP distinguishes keywords from host names by the quotes. 'self' with quotes means "this page's own origin"; self without quotes means a server literally named self. The generator quotes the known keywords for you automatically.
What happens when I leave a directive empty?
It is left out of the policy, and the browser falls back to default-src for that resource type. That is the intended way to write CSP — only override where the rules genuinely differ.
Should I use the meta tag or the header?
The header, whenever you control the server — it covers every response and supports all directives. The meta tag is the fallback for static hosting without header control, but note frame-ancestors and report-uri are ignored in meta CSPs.
How do I find out what sources my site needs?
Deploy a strict policy (default-src 'self'), open the browser devtools console, and use the site. Every blocked resource logs a violation naming the directive and the URL — add those sources deliberately, one by one. Consider Content-Security-Policy-Report-Only for trying a policy without breaking anything.
Is anything I type uploaded anywhere?
No. The policy is assembled entirely in your browser — your domains and endpoints never leave your device.