CSP (Content Security Policy) Generator & Validator

100% Client-Side Web Crypto

Security Presets & Templates:

🎲 Cryptographic Nonce Generator

Generates a cryptographically random 128-bit nonce encoded in Base64 via crypto.getRandomValues(). Note: A real production nonce must be generated dynamically on every HTTP response by your backend server and injected into both the CSP header ('nonce-...') and HTML (<script nonce="...">).

🔢 Inline Script / Style Hash Calculator

Paste the exact contents of your inline <script> or <style> block (excluding the HTML tags). The tool computes the binary digest via crypto.subtle.digest() and produces the exact CSP hash format.

console.log('Hello World');

Algorithm:

CSP Format: 'sha256-...'

🧪 Sandboxed CSP Violation Test Lab

Test your current CSP policy against real browser enforcement. An isolated sandboxed iframe is loaded with your current policy via <meta http-equiv="Content-Security-Policy">. Trigger simulated security actions below to verify real SecurityPolicyViolationEvent detections.

Simulate Actions in Test Frame:

Security Violation Events: 0 Violations

No violations detected yet. Click a test trigger on the left to simulate blocked actions.

📥 Import & Parse Existing CSP Header

Paste any existing CSP string (from an HTTP response, HTML <meta> tag, or Nginx config). The parser will auto-load all directives and sources into the interactive builder.

Live Policy Output ✓ Grade A+ (Strict)

Mode:

Formatted Multi-Line 0 chars (0 bytes)

🛡️ What is Content Security Policy?

CSP is an HTTP response header that restricts which scripts, styles, images, and endpoints a browser is allowed to load, acting as the primary defense against Cross-Site Scripting (XSS) and data injection attacks.

⚡ Nonces vs. Hashes vs. 'unsafe-inline'

Using 'unsafe-inline' allows attackers to execute injected <script> tags. Nonces (random one-time tokens) and cryptographic hashes allow specific legitimate inline scripts while blocking unauthorized code.

🖼️ Clickjacking Protection with frame-ancestors

The frame-ancestors directive obsoletes X-Frame-Options, specifying which parents can embed your page in an <iframe> to prevent UI redressing and clickjacking.

📊 Report-Only Staged Rollout

Before enforcing a strict policy on an existing website, deploy it as Content-Security-Policy-Report-Only with a reporting endpoint to detect and fix potential breakage before enforcement.