CSP Header Generator
LiveGenerate, evaluate, and test Content-Security-Policy (CSP) headers with a visual security headers builder and checker.
default-src 'self'Understanding Data Encoding & Security
Content Security Policy (CSP) is a browser security mechanism that prevents cross-site scripting (XSS), clickjacking, and data injection attacks by specifying which content sources are allowed on a web page. A CSP header declares exactly which domains can serve scripts, styles, images, fonts, frames, and other resources — any content from unauthorized sources is blocked and reported. CSP is one of the most effective defenses against XSS, the most prevalent web application vulnerability, because it blocks malicious inline scripts even when they bypass server-side sanitization.
Generate Content-Security-Policy (CSP) headers using an intuitive visual builder and evaluator. This free online CSP tool lets you configure every directive — default-src, script-src, style-src, img-src, font-src, connect-src, frame-src, media-src, object-src, base-uri, form-action, frame-ancestors, and more. Add sources with checkboxes ('self', 'unsafe-inline', 'unsafe-eval', nonces, hashes, CDN domains) and instantly generate the complete content-security-policy header string. Use it as a CSP checker and validator to review your existing security policy, or as a CSP evaluator to assess the strength of your security headers. The generated CSP is ready to copy into your server configuration, meta tags, or CDN settings. Whether you need to test a CSP for your website, calculate the right directives for your security policy, or validate an existing content security policy header — this tool handles it all, 100% client-side.
The Devkitr CSP Header Generator builds Content-Security-Policy headers through an interactive form that guides you through each directive. Configure script-src, style-src, img-src, font-src, connect-src, frame-src, and other directives by selecting sources, adding domains, and setting restrictions. The tool generates the complete header string ready to deploy in your web server configuration or application response headers.
In a typical development workflow, CSP Header Generator becomes valuable whenever you need to generate, evaluate, and test content-security-policy (csp) headers with a visual security headers builder and checker. Whether you are working on a personal side project, maintaining production applications for a company, or collaborating with a distributed team across time zones, having a reliable browser-based generation tool eliminates the need to install desktop software, write one-off scripts, or send data to third-party services that may log or retain your information. Since CSP Header Generator processes everything locally on your device, your data stays private and your workflow stays uninterrupted — open a browser tab, paste your input, get your result.
Key Features
Directive-by-Directive Builder
Configure each CSP directive independently — script-src, style-src, img-src, font-src, connect-src, frame-src, media-src, object-src, and base-uri — with source selection widgets.
Source Suggestion
Suggests common CDN domains (cdnjs, unpkg, fonts.google.com, jsdelivr) and platform domains when building source lists for each directive.
Nonce and Hash Support
Generates nonce values for inline scripts and computes SHA-256 hashes for specific inline code blocks as alternatives to unsafe-inline.
Report-URI Configuration
Configure report-uri or report-to directives to receive violation reports, enabling you to monitor CSP effectiveness without blocking content.
How to Use CSP Header Generator
Set default-src
Start with a restrictive default-src (typically 'self') that applies to all resource types unless overridden by specific directives.
Configure Each Directive
Set script-src, style-src, img-src, and other directives based on where your page loads resources from — your domain, CDNs, analytics, and third-party services.
Handle Inline Code
If your page uses inline scripts or styles, add 'unsafe-inline' (not recommended) or generate nonces and hashes for specific inline blocks.
Deploy the Header
Copy the generated CSP string and add it as a Content-Security-Policy response header in your web server (Nginx, Apache) or application middleware.
Use Cases
Protecting Against XSS Attacks
Deploy a strict CSP that blocks unauthorized scripts, preventing attackers from executing injected JavaScript even if they bypass server-side input sanitization.
Locking Down Third-Party Resource Loading
Specify exactly which CDNs, analytics services, and embedded content providers your page is allowed to load resources from.
Preventing Clickjacking
Use the frame-ancestors directive to control which domains can embed your pages in iframes, replacing the legacy X-Frame-Options header.
Auditing Content Sources Before Enforcement
Deploy with Content-Security-Policy-Report-Only first to collect violation reports and identify all legitimate sources before switching to enforcement mode.
Pro Tips
Start with Content-Security-Policy-Report-Only to monitor violations without breaking your site, then switch to enforcement after fixing all legitimate sources.
Avoid 'unsafe-inline' and 'unsafe-eval' in script-src — they negate most of CSP's XSS protection. Use nonces or hashes for necessary inline scripts instead.
Use 'strict-dynamic' with nonces if your application dynamically loads scripts — it allows trusted scripts to load additional scripts without listing every CDN domain.
Always set default-src to 'none' or 'self' and then explicitly whitelist each resource type, rather than using a permissive default.
Common Pitfalls
Using 'unsafe-inline' and 'unsafe-eval' in script-src
Fix: These directives essentially disable XSS protection. Refactor inline scripts into external files and use nonces/hashes for any remaining inline code.
Deploying CSP in enforcement mode without testing first
Fix: Use Content-Security-Policy-Report-Only header first and monitor violation reports to identify all legitimate sources before switching to blocking mode.
Setting overly broad wildcard sources like *.example.com in script-src
Fix: Wildcard subdomains in script-src allow attacks if any subdomain is compromised. List specific domains and use 'strict-dynamic' for script loading chains.
Frequently Asked Questions
QWhat is CSP (Content-Security-Policy)?
A Content-Security-Policy (CSP) is a security header that tells browsers which sources of content are allowed to load on your website. It helps prevent cross-site scripting (XSS), clickjacking, and other code injection attacks by defining a security policy for your site's resources.
QHow do I generate a CSP header?
Use this visual CSP header generator to select directives (default-src, script-src, style-src, etc.) and configure allowed sources for each. The tool instantly generates the complete Content-Security-Policy header string, ready to copy into your server configuration or meta tags.
QWhat CSP directives are supported?
All standard content-security-policy directives: default-src, script-src, style-src, img-src, font-src, connect-src, frame-src, media-src, object-src, base-uri, form-action, frame-ancestors, child-src, worker-src, manifest-src, navigate-to, and more.
QCan I use this as a CSP evaluator or checker?
Yes. Paste your existing Content-Security-Policy header to evaluate and check it visually. The tool works as both a CSP generator and a CSP evaluator, helping you review, validate, and strengthen your security headers.
QHow do I test my CSP on my website?
After generating your CSP header, add it to your server's response headers. Open your website in a browser, check the developer console for CSP violation reports, and refine the policy. You can also use Content-Security-Policy-Report-Only to test without blocking resources.
QDoes it support nonces and hashes?
Yes. You can add nonce-* and sha256-* sources to script-src and style-src directives for inline scripts and styles, following security headers best practices.
QWhat are security headers and why do they matter?
Security headers like Content-Security-Policy, Strict-Transport-Security, X-Frame-Options, and X-Content-Type-Options protect your website from common attacks. CSP is the most powerful security header, controlling exactly which resources your page can load.
QIs this CSP generator free to use?
Yes, this CSP header generator and evaluator is 100% free, runs entirely in your browser, and requires no signup. Your security policy data never leaves your device.
Related Articles
Related Tools
Base64 Encoder/Decoder
Encode text to Base64 or decode Base64 strings back to readable text.
JWT Decoder
Decode and inspect JSON Web Tokens to view header, payload, and signature.
SHA256 Generator
Generate SHA-256 hash digests from text input for checksums and verification.
MD5 Generator
Generate MD5 hash digests from text for checksums and quick comparisons.