CSP Inspect

Diagnose security headers and policies in your browser. No input is sent to a server. Use it for first-pass checks before rollout.

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

  1. Content Security Policy Level 3
  2. MDN: CSP

These links are generated from site_map rules in recommended diagnostic order.

  1. CSP Report Analyzer — Analyze CSP report JSON and summarize violation patterns
  2. CSP Builder — Build CSP policies from templates
  3. Permissions-Policy Inspect — Parse Permissions-Policy and review feature restrictions
  4. CSP Nonce/Hash Helper — Generate and verify CSP nonce/hash values
  5. Security Headers Audit — Audit presence of major security headers
  6. Security Headers Recommendation — Suggest recommended values for missing headers
  7. Security Headers Fix Plan — Create a prioritized header-fix plan
  8. HSTS Inspect — Parse HSTS to verify HTTPS enforcement

Security Headers

Go from missing-header detection to concrete fix planning

Example

default-src 'self'; script-src 'self' https://cdn.example.com
connect-src 'self' https://api.example.com; img-src 'self' data: