🧪 CSP Report-Only Mode

Test Content Security Policy without breaking your site

🧪 Report-Only Mode Active: CSP violations are logged but not blocked!
This allows you to test CSP policies before enforcing them in production.

🔍 Report-Only CSP Configuration

Content-Security-Policy-Report-Only: default-src 'self'; // Would block: external resources script-src 'self'; // Would block: inline scripts, external scripts style-src 'self'; // Would block: inline styles, external stylesheets img-src 'self' data: https:; // Would allow: same-origin, data URLs, HTTPS images report-uri #csp-violation-report // Send violations to this endpoint

🎯 What Report-Only Mode Does:

0
Total Violations
0
Script Violations
0
Style Violations
0
Unique Sources

🎯 Generate Test Violations

These actions will trigger CSP violations (but still execute in Report-Only mode):

1. Inline Script Violation

2. External Script Violation

3. Inline Style Violation

4. eval() Violation

5. Event Handler Violation

📊 Real-time Violation Monitoring

CSP violations are automatically detected and logged below:

🧪 Report-Only CSP monitoring active
Violations will appear here as they occur

🚀 CSP Deployment Strategy

Phase 1: Report-Only Testing (Current)

# Step 1: Deploy with Report-Only header Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self'; report-uri /csp-violations # Step 2: Monitor violations for 1-2 weeks # Step 3: Analyze patterns and adjust policy

Phase 2: Policy Refinement

# Common adjustments based on violations: # Allow specific external scripts script-src 'self' https://trusted-cdn.com https://analytics.google.com # Allow inline styles (if needed) style-src 'self' 'unsafe-inline' # Allow data URLs for images img-src 'self' data: https: # Final policy example: Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self' https://trusted-cdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; report-uri /csp-violations

Phase 3: Gradual Enforcement

# Step 1: Switch to enforcement mode for small percentage Content-Security-Policy: [refined-policy]; report-uri /csp-violations # Step 2: Monitor for new violations # Step 3: Gradually increase enforcement percentage # Step 4: Full deployment once stable

🎯 Analysis Checklist:

💻 Server Implementation Examples

Express.js

const express = require('express'); const app = express(); // CSP Report-Only middleware app.use((req, res, next) => { const policy = [ "default-src 'self'", "script-src 'self'", "style-src 'self' 'unsafe-inline'", "img-src 'self' data: https:", "report-uri /csp-violations" ].join('; '); res.setHeader('Content-Security-Policy-Report-Only', policy); next(); }); // Violation reporting endpoint app.post('/csp-violations', express.json(), (req, res) => { console.log('CSP Violation:', req.body); // Store in database, send to monitoring service, etc. res.status(204).send(); });

Apache (.htaccess)

# Add to .htaccess file Header always set Content-Security-Policy-Report-Only "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; report-uri /csp-violations"

Nginx

# Add to nginx.conf add_header Content-Security-Policy-Report-Only "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; report-uri /csp-violations" always;