Free Content Security Policy (CSP) Generator
A CSP generator is a web-based tool that helps developers construct Content Security Policy HTTP response headers by selecting and configuring directives such as script-src, style-src, connect-src, and frame-ancestors, producing syntactically valid policy strings that restrict resource loading and mitigate cross-site scripting (XSS) attacks.
Select directive categories (script-src, style-src, img-src, connect-src, frame-ancestors), add trusted source origins like self and https://cdn.example.com, toggle strict or loose preset modes, and copy the generated Content-Security-Policy header value for deployment in your web server, CDN, or application middleware configuration.
Introduction to Content Security Policy Generation
Cross-site scripting (XSS) remains one of the most prevalent web application vulnerabilities, allowing attackers to inject malicious JavaScript that steals session cookies, exfiltrates data, or performs unauthorized actions on behalf of authenticated users. Content Security Policy (CSP) is a browser-enforced defense mechanism defined in W3C standards that restricts which resources a web page can load and execute.
ScanSuite's free online CSP generator simplifies the complex process of building effective Content Security Policy headers. Instead of manually crafting semicolon-delimited directive strings and memorizing source expression syntax, developers use an intuitive interface to configure script-src, style-src, connect-src, img-src, font-src, frame-ancestors, and other directives with common source presets and custom domain entries.
What Is a Content Security Policy Generator?
A Content Security Policy generator is a developer tool that produces valid CSP header strings by letting you select directives, define allowed source origins, and configure security flags like unsafe-inline blocking and upgrade-insecure-requests. The output is a ready-to-deploy Content-Security-Policy HTTP header value or meta tag content attribute.
CSP works on a default-deny or allowlist model: each fetch directive (script-src, style-src, connect-src, img-src, font-src, object-src, media-src, worker-src) specifies which origins, schemes, and keywords (self, none, unsafe-inline, unsafe-eval, nonce-, sha256-) are permitted for that resource type. When a browser encounters a resource load that violates the policy, it blocks the request and optionally reports the violation to a configured report-uri or report-to endpoint.
Why Use a CSP Generator Tool?
Manually writing CSP headers is error-prone because a single syntax mistake — a missing semicolon, incorrect quote placement, or wrong directive name — can either break your entire application (blocking all scripts) or create a gap that allows XSS exploitation through overly permissive wildcards.
A visual CSP generator eliminates guesswork by providing categorized directive tabs, common source presets (self, none, unsafe-inline, data:, blob:), strict and loose mode templates, and real-time policy preview. Developers can iteratively tighten policies during development, test with Content-Security-Policy-Report-Only mode, and copy the final header for production deployment on Nginx, Apache, Cloudflare, Vercel, or Express.js middleware.
Who Uses CSP Generators?
Frontend developers use CSP generators when hardening React, Vue, Angular, or Next.js applications against XSS by blocking unauthorized inline scripts and restricting script loading to trusted CDN origins.
DevOps and platform engineers configure CSP headers at the web server, reverse proxy, or CDN layer to enforce consistent security policies across all deployed applications without modifying individual codebases.
Security engineers and compliance auditors use CSP generators to draft baseline policies aligned with OWASP recommendations, evaluate directive coverage during penetration tests, and document security header configurations for SOC 2 and PCI DSS audits.
How Content Security Policy Directives Work
When a browser receives a Content-Security-Policy header, its CSP enforcement engine evaluates every resource fetch (scripts, stylesheets, images, fonts, XHR/fetch requests, WebSocket connections, iframes) against the matching directive. For example, script-src controls JavaScript execution sources, style-src governs CSS loading, connect-src restricts fetch/XHR/WebSocket endpoints, and frame-ancestors prevents clickjacking by controlling which sites can embed your page in iframes.
Each directive accepts a space-separated list of source expressions: host-source (https://example.com), scheme-source (https:, data:), keyword-source (self, none, unsafe-inline, unsafe-eval), nonce-source (nonce-randomvalue), and hash-source (sha256-base64hash). The strictest effective policy uses self with nonce or hash sources for inline scripts, eliminating unsafe-inline and unsafe-eval entirely.
Strict CSP Policy for a React Application
Generated Policy: default-src self; script-src self https://cdn.jsdelivr.net; style-src self unsafe-inline; img-src self data: https:; connect-src self https://api.example.com; frame-ancestors none; object-src none; base-uri self;
This policy allows scripts only from the same origin and jsDelivr CDN, permits inline styles (required by many CSS-in-JS libraries), blocks all iframe embedding, and restricts API calls to the application backend.
CSP with Nonce-Based Inline Scripts
Generated Policy: script-src self nonce-abc123xyz; style-src self; connect-src self; frame-ancestors self;
The server generates a unique nonce value per request and includes it in both the CSP header and inline script nonce attributes. This allows specific inline scripts while blocking all unauthorized injected scripts.
CSP Directive Reference
| Directive | Controls | Recommended Value | XSS Impact | |
|---|---|---|---|---|
| script-src | JavaScript execution | self + nonce or hash | Primary XSS defense — blocks injected scripts | |
| style-src | CSS stylesheets | self unsafe-inline | Prevents CSS-based data exfiltration attacks | |
| connect-src | fetch, XHR, WebSocket | self + API domains | Blocks data exfiltration to attacker servers | |
| frame-ancestors | Iframe embedding | none or self | Prevents clickjacking attacks | |
| object-src | Plugins (Flash) | none | Blocks legacy plugin-based exploits |
Why Are My Scripts Blocked After Deploying CSP?
Check browser developer console for CSP violation reports indicating which script URL or inline block was rejected. Add the blocked origin to script-src or replace inline scripts with external files.
Third-party widgets (Intercom, Stripe, Hotjar) require their specific domains in script-src and connect-src. Consult each vendor's documentation for required CSP allowlist entries.
How Do I Fix CSP Breaking Google Fonts or CDN Assets?
Add https://fonts.googleapis.com to style-src and https://fonts.gstatic.com to font-src for Google Fonts integration.
Include your CDN domain (e.g., https://cdn.example.com) in script-src, style-src, and img-src depending on which asset types are hosted externally.
Related tools
- Security Headers — Generate secure headers
- CORS Checker — Test CORS configuration
- SSL Checker — Validate TLS certificates
- Security Headers — Generate comprehensive HTTP security headers including CSP.
- Security Headers Checker — Verify deployed CSP headers on live website URLs.
- SRI Generator — Generate Subresource Integrity hashes for external scripts.
- Encoder Decoder — Base64 encode CSP hash-source values for inline scripts.
- JWT Debugger — Inspect authentication tokens protected by CSP headers.
Frequently Asked Questions
What is a Content Security Policy (CSP)?
A CSP is an HTTP response header that tells the browser which sources of scripts, styles, images and other content are allowed. It is one of the strongest defences against cross-site scripting (XSS).
How do I create a CSP header?
Pick the directives you need (`default-src`, `script-src`, `style-src`, `img-src` and so on) and add your allowed sources. The generator builds the header line for your server or a meta tag. Then review related controls with the security headers generator.
How do I test a CSP without breaking my site?
Deploy it first as `Content-Security-Policy-Report-Only` with a reporting endpoint, review the violations, then switch to enforcing mode.
Why should I avoid 'unsafe-inline'?
It allows any inline script, which removes most of CSP's protection against XSS. Use nonces or hashes for the inline scripts you need instead.
What is a Content Security Policy?
Content Security Policy (CSP) is an HTTP response header that instructs browsers to restrict which resources (scripts, styles, images, fonts, connections) a web page can load, providing a powerful defense against cross-site scripting (XSS) and data injection attacks.
What does script-src control in CSP?
The script-src directive specifies valid sources for JavaScript execution. It is the most critical CSP directive for XSS prevention, controlling both external script files and inline script blocks.
What is the difference between CSP and CORS?
CSP controls which resources your page can load (outbound restrictions enforced by the browser). CORS controls which origins can access your API (inbound access control enforced by the server). They serve complementary security purposes.
Should I use unsafe-inline in script-src?
No, in production environments. unsafe-inline allows any inline script to execute, which defeats the primary XSS protection benefit of CSP. Use nonce-based or hash-based script-src instead for required inline scripts.
What is Content-Security-Policy-Report-Only?
Report-Only mode sends the same CSP policy but monitors violations without blocking resources. It is ideal for testing new policies in production to identify required allowlist entries before switching to enforcing mode.
How does CSP prevent XSS attacks?
CSP blocks the browser from executing scripts that are not explicitly allowlisted in script-src. Even if an attacker injects a malicious script tag, the browser refuses to run it because the source is not permitted by the policy.
What is a CSP nonce?
A nonce (number used once) is a random value generated per HTTP response and included in both the CSP script-src directive and matching inline script nonce attributes, allowing specific inline scripts while blocking all others.
What does default-src do?
default-src serves as a fallback directive for all fetch directives that are not explicitly defined. Setting default-src self provides a secure baseline, with specific directives overriding it where needed.
How do I add Google Analytics to my CSP?
Add https://www.googletagmanager.com and https://www.google-analytics.com to script-src, and https://www.google-analytics.com to connect-src and img-src for full Google Analytics and Tag Manager compatibility.
What is frame-ancestors used for?
frame-ancestors controls which websites can embed your page in iframes, preventing clickjacking attacks. Setting frame-ancestors none blocks all embedding, while self allows only same-origin framing.
Can CSP block inline event handlers like onclick?
Yes. A strict script-src without unsafe-inline blocks inline event handlers (onclick, onerror, onload). Refactor to external JavaScript event listeners or use nonce-based inline scripts instead.
What is the difference between CSP meta tag and HTTP header?
CSP can be delivered via HTTP response header (preferred, supports report-uri and all directives) or HTML meta tag (limited \u2014 no report-uri, frame-ancestors, or sandbox). HTTP headers are strongly recommended for production.
How do I deploy CSP on Nginx?
Add add_header Content-Security-Policy "your-policy-here"; to your Nginx server or location block configuration. Use the ScanSuite generator output and test with Report-Only mode first.
What is connect-src in CSP?
connect-src restricts URLs that can be loaded via fetch, XMLHttpRequest, WebSocket, EventSource, and navigator.sendBeacon. It prevents exfiltration of stolen data to attacker-controlled servers.
Does CSP protect against all XSS types?
CSP blocks most reflected and stored XSS by preventing unauthorized script execution. However, DOM-based XSS through unsafe JavaScript APIs (innerHTML, document.write, eval) requires additional input sanitization and code review.
What is style-src unsafe-inline needed for?
Many CSS-in-JS libraries and framework-generated styles require unsafe-inline in style-src. This is generally acceptable because CSS injection is less dangerous than script injection, though style-src self is preferred when possible.
How do I test my CSP policy before deploying?
Use Content-Security-Policy-Report-Only header to monitor violations without blocking resources. Check browser console for CSP errors, then use the Security Headers Checker to verify the deployed header on live URLs.
What is object-src none recommended for?
object-src none blocks all plugin content (Flash, Java applets, Silverlight). It is a recommended best practice even if your application does not use plugins, preventing legacy browser exploit vectors.
Can I use wildcards in CSP source expressions?
Yes, host-source wildcards like https://*.example.com are supported. However, avoid overly broad wildcards like https: or * which permit resources from any origin and weaken XSS protection significantly.
Is the ScanSuite CSP generator free to use?
Yes. ScanSuite provides unlimited free CSP policy generation with no registration required. All configuration happens client-side in your browser with instant policy preview and one-click copy.
Summary
ScanSuite's free online CSP generator builds Content Security Policy headers to prevent XSS attacks by configuring script-src, style-src, connect-src, frame-ancestors, and other directives through an intuitive visual interface. Apply strict or loose preset modes, add custom trusted origins, preview the generated policy in real time, and deploy the header on Nginx, Apache, Cloudflare, or application middleware for robust browser-enforced web security.