CSP Analyzer & Builder
Parse and analyze Content Security Policy headers. Test XSS payloads against CSP rules. Build secure policies with framework-specific templates.
What is Content Security Policy (CSP)?
Content Security Policy (CSP) is a security standard that helps prevent Cross-Site Scripting (XSS), clickjacking, and other code injection attacks. It works by allowing you to specify which sources of content are trusted for your web application.
Why it matters: A properly configured CSP can block malicious scripts even if an XSS vulnerability exists in your code. It's one of the most effective defenses against XSS attacks.
Analyze CSP Policy
CSP Policy Templates
Common CSP configurations for different security levels. Click to copy and test.
Strict (Recommended)
Highly secure policy with nonce-based script loading
default-src 'none'; script-src 'nonce-{random}'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; frame-src 'none'; base-uri 'self'; form-action 'self';Pros:
- Maximum XSS protection
- Requires CSP-aware code
- No unsafe-inline/eval
Cons:
- Requires nonce generation
- May break existing code
- More complex setup
Moderate
Balanced security with some inline scripts allowed via hashes
default-src 'self'; script-src 'self' 'sha256-{hash}'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; connect-src 'self'; base-uri 'self'; form-action 'self';Pros:
- Good security
- Easier to implement
- Compatible with most code
Cons:
- Inline styles allowed
- Less strict than nonce-based
Permissive (Not Recommended)
Minimal restrictions, mainly for legacy applications
default-src 'self' 'unsafe-inline' 'unsafe-eval'; img-src * data:; font-src *; connect-src *;Pros:
- Easy to implement
- Unlikely to break functionality
Cons:
- Weak XSS protection
- unsafe-inline/eval allowed
- Not recommended
Next.js Production
Optimized for Next.js static export
default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; connect-src 'self'; frame-src blob:; base-uri 'self'; form-action 'self';Pros:
- Works with Next.js
- Allows blob iframes
- Production-ready
Cons:
- Inline styles for Tailwind CSS
Development
Relaxed policy for local development
default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self' ws://localhost:* ws://127.0.0.1:*; frame-src blob:;Pros:
- Supports HMR/hot reload
- Easy debugging
- WebSocket support
Cons:
- Not for production
- Weak security