Fix CSP Report-Uri for Violation Monitoring

In this tutorial, you'll learn about Fix CSP Report. We cover key concepts, practical examples, and best practices.

Content Security Policy blocks resources silently. Without a report-uri or report-to directive, you never know which resources were blocked, whether you broke the site with a new policy, or whether an attacker is attempting XSS. Violation reports are critical for CSP maintenance and security monitoring.

Wrong

The CSP is enforced but no reporting endpoint is configured. Violations happen silently.

Content-Security-Policy: default-src 'self'; script-src 'self'

The page loads. Blocked resources show no errors on the wire.
The server operator has no visibility into CSP violations.

Setting Content-Security-Policy-Report-Only without a report-uri also produces no reports:

Content-Security-Policy-Report-Only: default-src 'self'

No reports are sent because there is no endpoint configured.

Right

Add report-uri with a server endpoint that collects violation reports.

Content-Security-Policy: default-src 'self'; script-src 'self'; report-uri /csp-violations

The browser sends a POST request to /csp-violations for each violation:

{
  "csp-report": {
    "document-uri": "https://example.com/page",
    "blocked-uri": "https://evil.com/script.js",
    "violated-directive": "script-src 'self'",
    "original-policy": "default-src 'self'; script-src 'self'; report-uri /csp-violations",
    "source-file": "https://example.com/page",
    "line-number": 42
  }
}

Express endpoint to collect reports:

app.post('/csp-violations', (req, res) => {
  console.log('CSP Violation:', JSON.stringify(req.body, null, 2));
  // Store to database, alert on repeated violations, etc.
  res.status(204).end();
});

Use the newer report-to directive (when supported) alongside report-uri for backward compatibility:

Content-Security-Policy: default-src 'self'; script-src 'self'; report-uri /csp-violations; report-to csp-endpoint

{
  "endpoints": [{"url": "/csp-violations"}],
  "group": "csp-endpoint",
  "max_age": 10886400
}

Prevention

• Always include report-uri in both Content-Security-Policy and Content-Security-Policy-Report-Only headers.
• Set up a server endpoint to collect and store CSP reports before deploying any CSP.
• Use Content-Security-Policy-Report-Only with report-uri to test new policies without blocking resources.
• Monitor CSP reports for patterns that indicate XSS attempts or policy misconfigurations.
• Use a third-party CSP reporting service if you do not want to build your own collector.
• Regularly review CSP reports to update your policy as your application's resource usage changes.

DodaTech Tools

Doda Browser includes a built-in CSP report viewer accessible from the developer menu. DodaZIP's security audit module stores all CSP violation reports alongside other security events. Durga Antivirus Pro uses CSP violation reports as an additional XSS detection signal in its cloud-based threat analysis pipeline.

FAQ