Content Security Policy (CSP) Header Generator
Content Security Policy (CSP) is a critical security layer that helps detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. Building a policy manually can be complex; our visual generator helps you construct valid, secure headers in seconds.
100% Private & Secure
This tool runs completely inside your browser using client-side WebAssembly and JS. Zero data is ever sent to our servers.
Policy Output
Fallback for other fetch directives.
Allowed sources for JavaScript.
Allowed sources for CSS.
Allowed sources for images.
Allowed URLs for fetch/XHR/WebSockets.
Allowed sources for web fonts.
Allowed sources for nested browsing contexts (iframes).
Allowed sources for plugins (flash, etc).
Allowed sources for audio/video.
'unsafe-inline' or 'unsafe-eval' in production unless absolutely necessary. Using 'self' restricts resources to your own origin.How to use this tool
- Customize each CSP directive (like script-src, img-src) by adding allowed sources.
- Use 'self' to allow resources from your own domain, or list external URLs.
- The policy header is generated in real-time at the top of the interface.
- Click 'COPY HEADER' to copy the full string for your server configuration or meta tag.
Example Usage
default-src 'self'; script-src 'self' trusted.com;
Only allows scripts from your domain and trusted.com.
When to use this tool
- Securing a production Next.js or React application against XSS vulnerabilities.
- Limiting where frames and objects can be loaded from to prevent clickjacking.
- Ensuring all connections (AJAX/Fetch) are made restricted to specific API endpoints.
Frequently Asked Questions
What is 'self'?
'self' is a keyword that refers to the origin from which the protected document is being served, including the same URL scheme and port number.
What is the difference between frame-src and child-src?
frame-src specifies valid sources for nested browsing contexts (iframes). child-src was intended to cover both iframes and workers, but it is deprecated in favor of frame-src and worker-src in newer CSP versions.
Does CSP prevent all Cross-Site Scripting (XSS)?
While CSP is an incredibly powerful defense-in-depth layer, it should be used alongside input sanitization and output encoding for a complete security posture.
Why use CSP?
It is one of the most effective ways to prevent hackers from executing malicious JavaScript on your site. Modern browsers won't run external scripts unless they are specifically whitelisted in your policy.
Can I use CSP in a <meta> tag?
Yes, you can place your policy in an HTML meta tag like this: <meta http-equiv='Content-Security-Policy' content='...'>, though setting it via server headers is generally preferred for performance and edge-case support.