Content-Security-Policy Header Generator
Build a Content-Security-Policy header directive by directive, with source chips and copy-ready meta, nginx, and Apache snippets. Everything runs in your browser.
The CSP Generator runs entirely in your browser. The directives, hosts, and schemes you enter to build your Content-Security-Policy never leave your device and are not uploaded to ArrayKit.
Open the Cache-Control Header Generator
About CSP Header Generator
The CSP Generator builds a Content-Security-Policy header one directive at a time. Fill in default-src, script-src, style-src, img-src, connect-src, font-src, frame-src, and more by clicking source chips like 'self', 'none', 'unsafe-inline', data:, and https:, or by typing custom hosts such as cdn.example.com. Keyword sources are single-quoted for you while hosts and schemes stay bare, so the policy is always valid. Empty directives are dropped automatically and everything is emitted in canonical order. Flip the report-only toggle to test a policy in monitor mode before you enforce it, then copy the raw header, an HTML meta tag, or ready-to-paste nginx and Apache snippets. Built for developers hardening a site against XSS and clickjacking, right in the browser — the policy you build never leaves your device.
Features
- Per-directive editor for default-src, script-src, style-src, img-src, connect-src, font-src, frame-src, and more
- One-click source chips: 'self', 'none', 'unsafe-inline', 'unsafe-eval', data:, https:, blob:, and *
- Add custom hosts and schemes; keywords are single-quoted while hosts stay bare
- Report-only toggle emits Content-Security-Policy-Report-Only to test without blocking
- Directives are ordered canonically and empty directives are dropped automatically
- Copy the raw header, an HTML meta http-equiv tag, or nginx and Apache add_header snippets
- Duplicate sources inside a directive are removed as you build
- Runs entirely in your browser — the policy you build is never uploaded
How to use the CSP Header Generator
- Click source chips or type a host to add sources to each directive you need
- Leave directives you do not want empty — they are dropped from the output
- Toggle Report-Only if you want to monitor violations before enforcing
- Copy the Content-Security-Policy header value or the meta, nginx, or Apache snippet
Example
Input
default-src: 'self'
script-src: 'self' https:
img-src: 'self' data:
object-src: 'none'
Output
Content-Security-Policy: default-src 'self'; script-src 'self' https:; img-src 'self' data:; object-src 'none'
Keywords like 'self' are quoted; schemes such as https: and data: stay bare.
Common errors & troubleshooting
- The browser reports 'Refused to load' errors after adding the policy. — A source is missing for that resource type. Add the host or scheme to the matching directive (or to default-src as a fallback) and rebuild the header.
- Inline scripts or styles stop working once the policy is live. — CSP blocks inline code unless you allow it. Add 'unsafe-inline' to script-src or style-src, or better, move to a nonce or hash source token.
- The meta tag version is ignored while the response header works. — Some directives such as frame-ancestors, report-uri, and sandbox only work as a real HTTP header, not in a <meta> tag. Prefer the header snippet for those.
- Report-Only mode is blocking requests instead of just logging them. — Check the header name. Enforcement uses Content-Security-Policy; monitoring uses Content-Security-Policy-Report-Only. The toggle switches the name for you.
Frequently asked questions
- What does this CSP generator produce?
- It builds a full Content-Security-Policy header value from the directives and sources you choose, then gives you the raw header, an HTML meta tag, and nginx and Apache add_header snippets you can paste into your config.
- Which CSP sources get single quotes and which do not?
- Keyword sources like 'self', 'none', 'unsafe-inline', 'unsafe-eval', and 'strict-dynamic', plus nonces and hashes, are single-quoted. Hosts and schemes such as https:, data:, and cdn.example.com are left bare. The tool quotes them correctly for you.
- What is the report-only toggle for?
- It switches the header name to Content-Security-Policy-Report-Only, which reports violations without blocking anything. Use it to stage a new policy on a live site and watch the console before you enforce it.
- Can I deliver the whole policy as a CSP meta tag?
- Mostly, yes — the tool emits a <meta http-equiv> tag for the enforcing policy. But frame-ancestors, report-uri, report-to, and sandbox are ignored in a meta tag, so use the HTTP header snippet when your policy relies on them.
- Why does the header leave out directives I did not fill in?
- Directives with no sources are dropped so the output stays clean and valid. default-src acts as the fallback for any fetch directive you leave empty, so you only need to override the ones that differ.
- Does building the CSP header send my hosts anywhere?
- No. The CSP Generator runs entirely in your browser. The directives and hosts you enter stay on your device and are never uploaded to ArrayKit.
Related tools
- Cache-Control Header Builder — Assemble a correct HTTP Cache-Control header from plain toggles and human time units, with copy-ready nginx, Apache, and meta snippets.
- .htaccess Generator — Toggle and configure common Apache .htaccess snippets with live output.
- Nginx Config Generator — Build an nginx server block (static, reverse proxy, SSL, gzip, caching) from simple toggles.
- Meta Tag Generator — Generate SEO, Open Graph and Twitter Card meta tags for your page from a simple form.
- robots.txt Generator — Visually build a robots.txt with user-agent rules, allow/disallow paths, crawl-delay and sitemaps.
- htpasswd Generator — Generate Apache/nginx .htpasswd entries with bcrypt or SHA-1 hashed passwords, in your browser.
All ArrayKit tools