What is Content Security Policy?

Content Security Policy (CSP) is a web security feature that helps prevent attacks by controlling which resources browsers can load when visiting your web application.

Why CSP Matters

Your web applications face threats from malicious scripts and unauthorized resources. CSP provides protection by:

  • Blocking harmful scripts from running in your web app
  • Preventing data theft by controlling what resources can load
  • Stopping clickjacking attacks with frame embedding controls
  • Reporting violations so you know when attacks are attempted

How CSP Works

CSP works by setting rules that tell browsers which resources are safe to load in your web app:

Basic CSP Headerhttp
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self'

This policy tells browsers visiting your web app to:

  • Only load resources from your own domain ('self')
  • Allow inline scripts and styles when needed
  • Permit images from your domain and data URLs
  • Restrict network connections to trusted sources

Who Benefits from CSP?

Developers

  • • Find security issues early in your apps
  • • Debug resource loading problems
  • • Monitor third-party scripts
  • • Build safer web applications

Security Teams

  • • Detect attacks on your apps in real-time
  • • Meet security requirements
  • • Respond to incidents quickly
  • • Assess application security risks

The Problem with CSP Without Monitoring

Common Problem
Many web applications use CSP but don't monitor violations, missing both security issues and broken features.

Without monitoring, CSP can cause problems:

  • Hidden breakage - Your web app might break and you won't know why
  • Outdated policies - Rules become wrong as your app changes
  • Missed attacks - You won't know when someone tries to attack your app
  • Poor user experience - Features stop working for users

Safe Testing with Report-Only Mode

You can test CSP safely using report-only mode - it reports violations but doesn't block anything in your app:

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

This lets you:

  • Test policies safely on your live web app
  • See what would break before enforcing rules
  • Collect data without affecting your users
  • Gradually improve your app's security

How Violation Reporting Works

When something violates your CSP, browsers send detailed reports to your monitoring service:

Example Violation Reportjson
{ "csp-report": { "document-uri": "https://example.com/page", "blocked-uri": "https://bad-site.com/script.js", "effective-directive": "script-src", "original-policy": "default-src 'self'; script-src 'self'" } }

Configure reporting with either method:

Method 1: report-uri

Using report-urihttp
Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com; report-uri https://csp-monitor.com/api/log

Method 2: report-to (newer)

Using report-tohttp
Reporting-Endpoints: csp-endpoint="https://csp-monitor.com/api/log" Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com; report-to csp-endpoint

Why Use CSP Monitor?

CSP Monitor makes violation tracking simple and actionable:

Smart Filtering

See what matters most with automatic categorization

Clear Analytics

Understand patterns and trends in your violations

Easy Setup

Get started in minutes with automatic domain detection

Getting Started

Ready to start monitoring CSP violations?

  1. Add CSP in report-only mode to your web app
  2. Point reports to CSP Monitor
  3. Review violations and fix issues
  4. Switch to enforcement mode
See How It WorksStart Monitoring