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
HTTP Header
Content-Security-Policy: default-src 'self'HTML Meta Tag
<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.