Content Security Policy (CSP) Generator

Build a Content-Security-Policy directive by directive. Toggle the sources you trust and watch the header and the equivalent meta tag update live, both ready to copy. It runs in your browser.

This CSP generator turns a set of checkboxes into a working Content-Security-Policy header, so you don’t have to memorise the syntax of every directive. Treat it as a content security policy generator and a csp header builder in one: pick which sources each directive trusts — ’self’, ’none’, a nonce, or your own CDN domains — and the header string rewrites itself as you go. It also emits the matching <meta http-equiv> tag for cases where you can’t set a real header. As a quick csp maker it starts from a sensible lock-everything-to-self default so the output is useful the moment the page loads.

Fallback for every fetch directive below.

Where scripts may load and run from.

Where stylesheets may load from.

Where images may load from.

Plugins such as <object>. Usually set to none.

What the document <base> tag may be set to.

Response header
Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; object-src 'none'; base-uri 'self'
Meta tag
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; object-src 'none'; base-uri 'self'">

The header is the stronger option. frame-ancestors, report-uri and sandbox only work when sent as a header, not via the meta tag.

How it works

  1. 1

    Enable the directives you need

    Tick default-src, script-src, style-src and any others. Anything left off inherits from default-src.

  2. 2

    Choose the trusted sources

    Click the keyword chips (’self’, ’none’, https:, data:) or type your own hosts and nonces in the field.

  3. 3

    Copy the header or meta tag

    Grab the full Content-Security-Policy header line, the value on its own, or the <meta> tag for your <head>.

Instant & 100% private — nothing is uploaded

Everything runs locally in your browser. Your code, text and files are processed on your own device and are never sent to a server — so there are no upload waits, no size limits from us, and nothing is ever stored or logged.

Frequently asked questions

What does a Content Security Policy actually do?
It tells the browser which sources of scripts, styles, images and other content are allowed to load on your page. Anything not on the list is blocked, which shuts down most cross-site scripting and content-injection attacks.
Should I use the header or the meta tag?
The response header is stronger and is the recommended option. The meta tag is a fallback for static hosts where you can’t set headers, but it can’t express frame-ancestors, report-uri or sandbox — this csp header builder shows both so you can pick.
What’s the difference between ’self’ and ’none’?
’self’ allows content from your own origin (same scheme, host and port). ’none’ blocks everything for that directive. They’re mutually exclusive, so this csp maker drops the other sources if you pick ’none’.
Why is ’unsafe-inline’ risky?
It permits inline <script> and style attributes, which is exactly what injection attacks rely on. Prefer a nonce or hash instead. The tool lets you add ’unsafe-inline’ when you must, but it’s worth avoiding on script-src.
Does this content security policy generator send my policy anywhere?
No. The whole thing runs in your browser with no network calls, so your directives and domain names never leave the page.