Content Security Policy (CSP) Generator
Build a Content-Security-Policy header by toggling directives — get the HTTP header and the <meta> tag form.
Quick answer: Build a Content-Security-Policy header by toggling directives — get the HTTP header and the <meta> tag form.
Last updated
Frequently asked questions
- What is a Content Security Policy?
- A header that tells the browser exactly which origins are allowed to load scripts, styles, images, fonts and frames on your page. A correctly-tuned CSP defeats most XSS attacks even if your input sanitisation has a hole.
- Should I deploy as a header or a meta tag?
- Header if you can — CSP via meta tag has fewer allowed directives (no <code>frame-ancestors</code>, <code>sandbox</code> or <code>report-uri</code>). Use the meta tag only when you can't change server response headers.
- Why is <code>'unsafe-inline'</code> in <code>script-src</code> a bad idea?
- It tells the browser inline <code><script></code> tags are allowed — which is exactly what most XSS attacks inject. Migrate to nonces or hashes; modern frameworks make this straightforward.
- What about <code>'unsafe-eval'</code>?
- Allows <code>eval()</code> and <code>new Function()</code>. Some bundlers (older webpack configs, certain templating libraries) need it; modern alternatives don't. Audit before keeping it.
- Should I include <code>upgrade-insecure-requests</code>?
- Yes if your site is HTTPS-only — it auto-upgrades any <code>http://</code> requests in your HTML to <code>https://</code>, fixing mixed-content warnings without code changes.
- What's the difference between <code>frame-src</code> and <code>frame-ancestors</code>?
- <code>frame-src</code> controls who you can embed; <code>frame-ancestors</code> controls who can embed you. The latter replaces the older <code>X-Frame-Options</code> header.
- How do I test the policy?
- Deploy with <code>Content-Security-Policy-Report-Only</code> first (rename the header). Browsers will report violations to <code>report-uri</code> without enforcing — you can fix issues before turning enforcement on.
- Does the policy block third-party analytics?
- Only if you don't allow them. Add the analytics origins (e.g. <code>https://www.google-analytics.com</code>) to <code>script-src</code> and <code>connect-src</code>.
- Are my settings uploaded?
- No — the entire builder runs in your browser. The generated policy never leaves your device.
- How do I generate per-request nonces?
- Your server generates a fresh random nonce per response and inserts it both in the CSP header (<code>'nonce-XYZ'</code>) and on every inline <code><script></code> tag. Most modern frameworks have a helper for this.