Content Security Policy Generator
Generate Content Security Policy headers to protect your website from XSS attacks and control resource loading.
Security Presets
Configure Directives
fetch Directives
default-srcFallback for other fetch directives
Examples: 'self', 'self' https:, 'none'
script-srcSources for JavaScript execution
Examples: 'self', 'self' 'unsafe-inline', 'self' https://cdn.example.com
style-srcSources for stylesheets
Examples: 'self', 'self' 'unsafe-inline', 'self' https://fonts.googleapis.com
img-srcSources for images
Examples: 'self', 'self' data:, 'self' https: data:
font-srcSources for fonts
Examples: 'self', 'self' https://fonts.gstatic.com, 'self' data:
connect-srcSources for XHR, WebSocket, and EventSource
Examples: 'self', 'self' https://api.example.com, 'self' wss:
media-srcSources for audio and video
Examples: 'self', 'self' https://media.example.com, 'none'
object-srcSources for plugins (object, embed, applet)
Examples: 'none', 'self', 'self' https://plugins.example.com
frame-srcSources for nested browsing contexts (iframe)
Examples: 'self', 'none', 'self' https://www.youtube.com
worker-srcSources for Worker, SharedWorker, or ServiceWorker
Examples: 'self', 'none', 'self' blob:
manifest-srcSources for web app manifests
Examples: 'self', 'none', 'self' https://cdn.example.com
document Directives
base-uriRestrict URLs for <base> elements
Examples: 'self', 'none', 'self' https://example.com
navigation Directives
form-actionRestrict form submission URLs
Examples: 'self', 'none', 'self' https://api.example.com
frame-ancestorsRestrict embedding this page in frames
Examples: 'none', 'self', 'self' https://trusted.example.com
reporting Directives
report-uriURL to send CSP violation reports
Examples: https://example.com/csp-report, /csp-violation-endpoint
Generated Content Security Policy
CSP Policy
default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; connect-src 'self'; media-src 'self'; object-src 'none'; frame-src 'self'; worker-src 'self'; manifest-src 'self'; base-uri 'self'; form-action 'self'; frame-ancestors 'self'
HTTP Header
Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; connect-src 'self'; media-src 'self'; object-src 'none'; frame-src 'self'; worker-src 'self'; manifest-src 'self'; base-uri 'self'; form-action 'self'; frame-ancestors 'self'
HTML Meta Tag
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; connect-src 'self'; media-src 'self'; object-src 'none'; frame-src 'self'; worker-src 'self'; manifest-src 'self'; base-uri 'self'; form-action 'self'; frame-ancestors 'self'">
Nginx Configuration
add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; connect-src 'self'; media-src 'self'; object-src 'none'; frame-src 'self'; worker-src 'self'; manifest-src 'self'; base-uri 'self'; form-action 'self'; frame-ancestors 'self'";
Apache Configuration
Header always set Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; font-src 'self'; connect-src 'self'; media-src 'self'; object-src 'none'; frame-src 'self'; worker-src 'self'; manifest-src 'self'; base-uri 'self'; form-action 'self'; frame-ancestors 'self'"
Download Configuration
⚡ Security Tips
- • Start with Report-Only mode to identify breaking changes
- • Avoid 'unsafe-inline' and 'unsafe-eval' when possible
- • Use nonces or hashes for inline scripts/styles instead
- • Regularly review and update your CSP as your site evolves
- • Monitor CSP violation reports to catch attacks and misconfigurations
- • Use 'strict-dynamic' with nonces for modern CSP implementations
Related Tools
About This Tool
How It Works
- Configure CSP directives to control resource loading
- Use security presets for common security levels
- Generate headers for various web servers
- Test with Report-Only mode before enforcement
Common Use Cases
- Prevent XSS attacks and code injection
- Control third-party resource loading
- Implement defense-in-depth security
- Comply with security best practices
Frequently Asked Questions
What is a Content Security Policy (CSP) and why do I need it?
CSP is a security feature that helps prevent cross-site scripting (XSS) attacks and data injection by controlling which resources (scripts, styles, images, etc.) can be loaded on your website. It acts as an additional layer of security to protect against malicious code execution.
What's the difference between enforcement and report-only mode?
Enforcement mode actively blocks violations of your CSP policy, while report-only mode logs violations without blocking them. Use report-only mode first to test your policy and identify potential issues before enforcing it on your live site.
Which security preset should I choose?
Start with "Strict Security" for maximum protection, "Moderate Security" for most websites with external resources, or "Permissive" for development/legacy sites. You can always customize directives after selecting a preset to match your specific needs.
Can I use CSP with meta tags instead of HTTP headers?
Yes, you can use HTML meta tags for CSP, but HTTP headers are recommended as they provide more functionality and security. Note that report-only mode can only be implemented using HTTP headers, not meta tags.
What does 'unsafe-inline' mean and should I avoid it?
'unsafe-inline' allows inline scripts and styles to execute, which can be a security risk. It's better to use external files or implement nonces/hashes for inline content. Only use 'unsafe-inline' when absolutely necessary for legacy compatibility.
How do I handle third-party services like Google Analytics or CDNs?
Add the specific domains to the appropriate directives (e.g., script-src for analytics, font-src for web fonts). For example, add 'https://www.google-analytics.com' to script-src for Google Analytics. Be specific rather than using wildcards.
What should I do if my CSP breaks my website?
First, use report-only mode to identify violations without breaking functionality. Check your browser's console for CSP violation errors, then update your policy to allow necessary resources. Gradually tighten security rather than implementing strict policies immediately.
How do I implement CSP violation reporting?
Set up a report-uri directive pointing to an endpoint that can receive POST requests with CSP violation data. Many services provide CSP violation monitoring, or you can create your own endpoint to log violations for analysis.
Can I use multiple CSP policies on the same page?
If multiple CSP policies are defined (via headers and meta tags), the most restrictive policy applies. It's recommended to use a single, well-configured policy rather than multiple conflicting policies which can be difficult to debug.
What's the difference between frame-src and frame-ancestors?
frame-src controls what URLs your page can embed in iframes, while frame-ancestors controls which URLs can embed your page in their iframes. Use frame-ancestors: 'none' to prevent your page from being embedded anywhere (similar to X-Frame-Options: DENY).
How often should I update my CSP policy?
Review your CSP policy whenever you add new third-party services, change your site architecture, or receive CSP violation reports. Regular security audits should include CSP policy reviews. Monitor violation reports to catch both attacks and legitimate changes that need policy updates.
Does CSP work on all browsers?
CSP is supported by all modern browsers, but some older versions may have limited support for newer CSP features. CSP gracefully degrades - unsupported directives are ignored. For maximum compatibility, test your policy across different browsers and consider progressive enhancement.