Content Security Policy Builder
Assemble a valid CSP header or meta tag, directive by directive.
How to use
- 1 Choose whether you want a header value or a <meta> tag.
- 2 For each directive, type the allowed sources separated by spaces.
- 3 Let the builder quote keywords and validate the combination.
- 4 Copy the generated policy into your server config or HTML head.
About Content Security Policy Builder
A Content-Security-Policy (CSP) is one of the most effective defences a website has against cross-site scripting and data-injection attacks.
It tells the browser exactly which sources of scripts, styles, images, fonts and other resources are allowed to load, so even if an attacker injects markup, the browser refuses to run code from anywhere you have not approved.
Writing the policy by hand is fiddly, though: every keyword source has to be wrapped in single quotes, directives are separated by semicolons, and a single typo can silently break your whole page.
This builder takes care of the syntax for you.
Fill in the directives you care about — default-src, script-src, style-src, img-src, connect-src, frame-ancestors and more — listing each allowed source separated by spaces.
The tool quotes the well-known keywords automatically (self, none, unsafe-inline, strict-dynamic and so on), recognises nonce- and hash-based sources, leaves real hosts and schemes untouched, de-duplicates repeated entries, and orders the directives consistently.
It also catches common mistakes, such as combining the special none source with other values in the same directive, and reports them plainly.
Choose whether you want the raw header value to set in your server or CDN, or a ready-to-paste <meta http-equiv> tag for static HTML.
Everything is generated locally in your browser — nothing is uploaded or stored — so it is safe to use with internal hostnames and works offline.
Start strict, then loosen individual directives only as far as your app genuinely needs.
FAQ
Do I need to add the single quotes around self and none?
No. Type the bare keyword and the builder wraps it in single quotes for you. It also quotes nonce- and hash-based sources automatically.
Should I use the header or the meta tag?
An HTTP response header is preferred and supports every directive. The <meta> tag is useful for static hosting, but cannot set directives like frame-ancestors, which browsers ignore in meta form.
Why is combining none with other sources an error?
The 'none' keyword means "allow nothing" for that directive, so pairing it with an actual source is contradictory. The builder flags it so you fix the policy.