CSP Header Generator

CSP Header Generator — What It Does

Toggle individual Content-Security-Policy directives, add allowed source domains for each, and instantly get the complete CSP header value or an equivalent <meta> tag. The tool validates your policy and warns about common insecure patterns like 'unsafe-inline' or 'unsafe-eval'.

Key CSP Directives

• default-src — Fallback for all resource types not covered by a specific directive
• script-src — Controls which scripts can execute (most critical for XSS prevention)
• style-src — Controls which stylesheets and inline styles are allowed
• img-src — Controls which image sources can load (including data: URIs and blob:)
• connect-src — Controls fetch, XHR, WebSocket, and EventSource destinations
• font-src — Controls font file origins (Google Fonts, CDNs, self-hosted)
• frame-src — Controls which origins can be embedded in iframes
• report-uri / report-to — Where the browser sends violation reports for monitoring

CSP Deployment Strategy

Rolling out CSP safely:

1. Start with Content-Security-Policy-Report-Only to log violations without breaking anything
2. Set up a report-uri endpoint to collect violation logs (or use a service like report-uri.com)
3. Analyze the reports and allowlist legitimate sources
4. Tighten the policy: replace 'unsafe-inline' with nonces or hashes where possible
5. Switch from Report-Only to enforcing Content-Security-Policy

Common Mistakes

• Using 'unsafe-inline' for scripts — This defeats the purpose of CSP against XSS. Use nonces ('nonce-abc123') or hashes instead.
• Forgetting connect-src — Even if script-src is locked down, your JavaScript can still exfiltrate data via fetch/XHR if connect-src is open.
• Overly permissive wildcard subdomains — *.example.com allows any subdomain, including ones that might be compromised or user-controlled.

Frequently Asked Questions

What is Content-Security-Policy (CSP)?

CSP is an HTTP response header that tells browsers which sources of content (scripts, styles, images, fonts, etc.) are allowed to load on a page. It is one of the most effective defenses against Cross-Site Scripting (XSS) attacks because it prevents execution of scripts from unauthorized origins.

What does default-src do?

default-src is the fallback directive. If a more specific directive (like script-src or style-src) is not defined, the browser uses the default-src value for that resource type. Setting default-src to 'self' and then overriding specific directives is a common pattern.

Why does my page break after adding CSP?

CSP blocks any resource not explicitly allowed. Common issues: inline scripts blocked (need 'unsafe-inline' or a nonce/hash), third-party scripts like Google Analytics blocked (add their domain to script-src), inline styles blocked (add 'unsafe-inline' to style-src or use nonces), and fonts from CDNs blocked (add the CDN to font-src).

What is the difference between a nonce and a hash in CSP?

A nonce is a random token generated per request and added to both the CSP header and the script tag. A hash is the SHA-256/384/512 digest of the script content. Nonces are easier for dynamic pages; hashes are better for static, known inline scripts.

Should I use Content-Security-Policy or Content-Security-Policy-Report-Only?

Start with Report-Only — it logs violations without blocking anything, so you can see what would break. Once your policy is clean, switch to the enforcing Content-Security-Policy header. You can use both simultaneously: enforce a baseline and report-only a stricter policy.