CSP Header Generator
Build Content Security Policy headers visually — configure directives, sources, and export as HTTP header or meta tag
default-srcFallback for other directivesscript-srcJavaScript sourcesstyle-srcCSS stylesheet sourcesimg-srcImage sourcesfont-srcWeb font sourcesconnect-srcXHR, WebSocket, fetch sourcesmedia-srcAudio and video sourcesobject-srcPlugin sources (Flash, etc.)frame-srciframe sourcesworker-srcWeb Worker sourcesform-actionForm submission targetsbase-uriBase element URLsframe-ancestorsWho can embed this pageAdditional Options
Generated Policy
Content-Security-Policy: default-src 'self'<meta http-equiv="Content-Security-Policy" content="default-src 'self'">CSP Header Generator
Build Content Security Policy headers visually — configure directives, sources, and export as HTTP header or meta tag
Features
- Visual builder for all major CSP directives
- Toggle source values with one click
- Add custom domains per directive
- Strict security preset with one click
- Export as HTTP header or HTML meta tag
- upgrade-insecure-requests and block-all-mixed-content support
- 100% client-side — no data sent to servers
How to use
- Configure each directive by clicking source values.
- Add custom domains in the text field for each directive.
- Enable additional options like upgrade-insecure-requests.
- Copy the generated HTTP header or meta tag.
Tips & Best Practices
- Start with a strict policy and loosen it as needed.
- Always set object-src to 'none' unless you need plugins.
- Test your CSP in report-only mode before enforcing it.
FAQ
What is Content Security Policy?
CSP is an HTTP header that helps prevent XSS attacks by controlling which resources a browser is allowed to load for a page.
What does 'self' mean in CSP?
'self' allows resources from the same origin (same scheme, host, and port) as the page itself.
Should I use upgrade-insecure-requests?
Yes, if your site uses HTTPS. It instructs the browser to automatically upgrade HTTP requests to HTTPS, which prevents mixed-content warnings without requiring you to rewrite every legacy URL in your codebase.
What is the difference between 'unsafe-inline' and 'nonce'?
'unsafe-inline' allows all inline scripts and styles, which defeats most XSS protection. A nonce (number used once) is a random per-request token that allows only the inline scripts you explicitly tag with it — this gives you the convenience of inline scripts while keeping CSP strict.
Should I deliver CSP via HTTP header or meta tag?
Prefer the HTTP header (Content-Security-Policy) because it is processed before any HTML parsing and supports all directives including frame-ancestors and report-uri. Meta tags are a fallback for static hosting where you cannot configure response headers, but they cannot enforce frame-ancestors or sandbox.
How do I test a CSP without breaking my site?
Use Content-Security-Policy-Report-Only instead of Content-Security-Policy. The browser will log violations to your report-uri endpoint without blocking any resources, letting you fine-tune the policy from real traffic before enforcing it.
Does CSP fully prevent XSS attacks?
CSP is a defense-in-depth layer that blocks many XSS vectors but is not a silver bullet — bypasses exist via JSONP endpoints, open redirects, or unsafe inline handlers. Combine CSP with proper input sanitization, output encoding, and Trusted Types for the strongest protection.
Is the CSP generator client-side and free?
Yes, the generator runs entirely in your browser — your domain names, directives, and configuration never reach any server. The tool is free with no signup or rate limits.