How CSP Monitor Works

CSP Monitor makes tracking violations in your web applications simple with automatic setup and smart detection.

Super Simple Setup

Getting started takes just 2 steps:

Step 1: Add CSP header with report endpoint

CSP Headerhttp
Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self'; report-uri https://csp-report.dev/api/log

Step 2: That's it! Violations are automatically collected

1

Add CSP Header

Point your web app's violation reports to CSP Monitor

2

Deploy & Done

CSP Monitor handles the rest automatically

3

View Reports

See violations in your dashboard instantly

Automatic Domain Detection

CSP Monitor automatically figures out which web application a violation came from by looking at the domain in the report.

How Smart Domain Matching Works

When you enable automatic domain logging for a website:

  • No manual setup - Just enable the feature and violations are matched automatically
  • Works with any domain - Handles subdomains, different ports, and complex app setups
  • Scales easily - One CSP Monitor can handle many web applications at once
  • Zero maintenance - Works even when you add new pages or change your app
Automatic Detectionhttp
Content-Security-Policy: default-src 'self'; script-src 'self'; report-uri https://csp-report.dev/api/log

How It Works
CSP Monitor reads the domain from each violation report and automatically matches it to the right website in your dashboard.

Two Ways to Collect Reports

Automatic Detection

Send all reports to /api/log and let CSP Monitor sort them out.

/api/log
  • • Works for multiple web applications
  • • No configuration needed
  • • Easiest to set up
  • • Recommended for most users

Direct Targeting

Send reports directly to a specific web application endpoint.

/api/log/[websiteId]
  • • Direct control over routing
  • • Good for testing environments
  • • Bypasses automatic detection
  • • Use when you need specific control
Direct Targetinghttp
Content-Security-Policy: default-src 'self'; script-src 'self'; report-uri https://csp-report.dev/api/log/your-website-id

Handles All Report Types

CSP Monitor works with both legacy and modern violation report formats automatically:

Both Formats Supportedjson
// Legacy format (application/csp-report) { "csp-report": { "document-uri": "https://example.com/page", "blocked-uri": "https://bad-site.com/script.js", "effective-directive": "script-src" } } // Modern format (application/reports+json) { "type": "csp-violation", "url": "https://example.com/page", "body": { "blockedURL": "https://bad-site.com/script.js", "effectiveDirective": "script-src" } }

You don't need to worry about which format browsers use when reporting violations from your web app - CSP Monitor handles both.

What Happens When a Violation Occurs

1. Browser Detects Issue

Something tries to load in your web app that your CSP doesn't allow

2. Report Sent

Browser automatically sends detailed report to CSP Monitor

3. Smart Processing

CSP Monitor parses the report and adds helpful context

4. Shows in Dashboard

You can see the violation immediately with full details

Back to BasicsStart Monitoring