liminfoCSP & SRI Generator
Free web tool: CSP & SRI Generator
CSP Header
Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self';<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; connect-src 'self';">About CSP & SRI Generator
The CSP Header Generator & SRI Hash Calculator is a dual-mode security tool that helps web developers and security engineers craft precise Content-Security-Policy (CSP) HTTP headers. You can configure directives including default-src, script-src, style-src, img-src, font-src, connect-src, frame-src, media-src, and object-src, and optionally add a report-uri endpoint. The tool assembles the final header string and also renders a ready-to-paste HTML meta tag, so you can enforce your policy via either server headers or markup.
Front-end developers, DevSecOps engineers, and security compliance officers use this tool to eliminate the guesswork of writing CSP strings by hand. Misconfigured CSP is a leading cause of XSS vulnerabilities being missed or blocked resources causing site breakage. With instant real-time output, you can iterate quickly and copy the correct header directly to your Nginx, Apache, or CDN configuration. The SRI hash calculator tab computes SHA-256 or SHA-384 base64-encoded digests of arbitrary inline script or style content using the browser's native Web Crypto API, so no data is ever sent to a server.
Under the hood, the CSP generator joins directive key-value pairs into a semicolon-delimited policy string following the CSP Level 3 specification. The SRI hash calculator uses crypto.subtle.digest() to hash the UTF-8 encoded text, converts the resulting ArrayBuffer to Base64, and prefixes it with the algorithm identifier (e.g. sha256-) as required by browsers when validating inline resources against CSP script-src or style-src hash sources.
Key Features
- CSP generator covers 8 directives: default-src, script-src, style-src, img-src, font-src, connect-src, frame-src, media-src, object-src
- Optional report-uri configuration for CSP violation reporting endpoints
- Outputs both HTTP header string and <meta http-equiv> tag formats simultaneously
- SRI hash calculator supports SHA-256 and SHA-384 algorithms via Web Crypto API
- Hash result formatted as CSP-ready source expression (e.g. 'sha256-abc123...')
- One-click clipboard copy for both CSP header and SRI hash output
- 100% client-side — no inline script or policy data leaves your browser
- Dual-tab interface keeps CSP generation and SRI hashing in a single workflow
Frequently Asked Questions
What is a Content-Security-Policy (CSP) header?
Content-Security-Policy is an HTTP response header that instructs browsers to only load resources (scripts, styles, images, fonts, etc.) from origins you explicitly allow. It is one of the most effective defenses against Cross-Site Scripting (XSS) and data-injection attacks. Browsers enforce the policy by blocking requests to unlisted origins before they execute.
What does the script-src directive control?
script-src restricts which JavaScript sources the browser may execute. Values can include 'self' (same origin), explicit HTTPS URLs, nonce values ('nonce-abc123'), or hash values ('sha256-...') for inline scripts. Omitting script-src causes the browser to fall back to the default-src value.
When should I use 'unsafe-inline' in style-src?
Using 'unsafe-inline' permits all inline <style> tags and style attributes, which greatly weakens your policy. A better practice is to replace inline styles with external stylesheets or use a nonce or hash value so only specific trusted inline blocks are permitted. Many CSS-in-JS frameworks support CSP nonces to avoid needing 'unsafe-inline'.
What is Subresource Integrity (SRI)?
SRI is a security feature that lets browsers verify that resources fetched from third-party CDNs have not been tampered with. You add an integrity attribute containing a base64-encoded SHA hash to your <script> or <link> tag. The browser computes the hash of the downloaded file and refuses to execute it if the hash does not match. CSP's script-src can also reference hash values to whitelist specific inline script content.
How do I compute an SRI hash for an inline script?
Switch to the SRI Hash Calculator tab, paste the exact content of your inline script or style block (without surrounding <script> tags), choose SHA-256 or SHA-384, and click Compute Hash. The tool returns a value like 'sha256-BASE64' which you can add directly to your CSP script-src or style-src directive.
Should I use SHA-256 or SHA-384 for SRI?
Both are considered secure. SHA-256 is more widely supported and produces a shorter hash string. SHA-384 offers a higher security margin against collision attacks. The W3C SRI specification recommends SHA-384 or SHA-512 for new deployments, but SHA-256 is acceptable for most use cases and is the minimum required by browsers.
What is report-uri in a CSP policy?
report-uri specifies a URL where the browser should POST a JSON violation report whenever it blocks a resource due to your CSP. This lets you monitor policy violations in production before switching from Content-Security-Policy-Report-Only to enforcement mode. Note that report-uri is deprecated in CSP Level 3 in favor of the report-to directive, but it still has broader browser support.
How do I add the generated CSP header in Nginx?
Copy the generated header string and add it to your Nginx server block: add_header Content-Security-Policy "default-src 'self'; script-src 'self'...";. Reload Nginx with nginx -s reload. Alternatively, paste the <meta http-equiv> snippet into the <head> of your HTML document, though server headers offer stronger protection since they cannot be overridden by injected markup.