CSP Inspect
An analysis page for checking whether existing CSP is too strict (breaking features) or too loose (introducing risk) at directive level.
Status
Runs in your browser. No input is sent to a server. Use this as a first-pass diagnostic step.
How to use
Paste a CSP string and click “Parse”. Directives are listed.
Notes (this tool)
- report-uri/report-to are shown if present.
About this page
What does this tool do?
Parse a Content-Security-Policy (CSP) header and list directives like default-src.
Useful for checking misconfigurations and understanding allowed sources.
CSP is related to XSS mitigation and external resource control. Even a single-line policy can be hard to read; this tool helps by splitting it.
CSP basics (quick)
- CSP restricts where resources can be loaded from.
- default-src acts as the fallback for unspecified directives.
- Directives are scoped (script-src/style-src/img-src/connect-src, etc.).
Typical use cases
- Identify which directive blocks a request from CSP violation logs
- Add a CDN/analytics tag and determine what to allow
- Check report-to / report-uri configuration
Common directives
- script-src: JS sources (nonce/hash are here)
- style-src: CSS sources
- img-src: image sources
- connect-src: fetch/XHR/WebSocket endpoints
- frame-ancestors: embedding (iframes)
What this tool does
- Split and display directives
- List source expressions
- Inspect report-to / report-uri
Common pitfalls
- API calls fail because connect-src is missing while relying on default-src
- Overusing 'unsafe-inline' weakens CSP
- Reports fail because reporting endpoints are not allowed
Debugging workflow (recommended)
- Paste target security headers
- Check missing and overly permissive policies
- Validate with Report-Only and phased rollout
Operational notes
- Recommended values are environment-dependent. Validate against functional requirements before applying.
- In production, use phased rollout with report monitoring.
Referenced specs
- CSP Level 3
- Fetch/HTML security-related specs
FAQ
What if default-src is missing?
Each directive may be specified individually.
Where do I set CSP?
Typically as an HTTP response header (Content-Security-Policy).
References
Next to view (diagnostic order)
These links are generated from site_map rules in recommended diagnostic order.
- CSP Report Analyzer — Analyze CSP report JSON and summarize violation patterns
- CSP Builder — Build CSP policies from templates
- Permissions-Policy Inspect — Parse Permissions-Policy and review feature restrictions
- CSP Nonce/Hash Helper — Generate and verify CSP nonce/hash values
- Security Headers Audit — Audit presence of major security headers
- Security Headers Recommendation — Suggest recommended values for missing headers
- Security Headers Fix Plan — Create a prioritized header-fix plan
- HSTS Inspect — Parse HSTS to verify HTTPS enforcement
Same-theme links
Security Headers
Go from missing-header detection to concrete fix planning
- Security Headers Audit — Audit presence of major security headers
- Security Headers Recommendation — Suggest recommended values for missing headers
- Security Headers Fix Plan — Create a prioritized header-fix plan
- CSP Nonce/Hash Helper — Generate and verify CSP nonce/hash values
- CSP Builder — Build CSP policies from templates
- CSP Report Analyzer — Analyze CSP report JSON and summarize violation patterns
- HSTS Inspect — Parse HSTS to verify HTTPS enforcement
- Permissions-Policy Inspect — Parse Permissions-Policy and review feature restrictions
- Referrer-Policy Inspect — Parse Referrer-Policy and check referrer exposure
- X-Frame-Options Inspect — Parse X-Frame-Options to validate clickjacking protection
- X-Content-Type-Options Inspect — Parse X-Content-Type-Options and validate nosniff
Example
default-src 'self'; script-src 'self' https://cdn.example.com
connect-src 'self' https://api.example.com; img-src 'self' data: