Browser Content Security Policy Report-Only Violations — What It Means & How to Fix It
About Browser Content Security Policy Report-Only Violations
Understand and fix Content Security Policy report-only violations showing in the browser console without blocking content. This guide covers everything you need to know about this topic, including common causes, step-by-step solutions, and answers to frequently asked questions.
Here are the key things to understand: Content-Security-Policy-Report-Only header logs violations without blocking content, useful for testing CSP policies. Violations appear as warnings in the browser console with details about the blocked resource and directive. The report-uri or report-to directive can send violation reports to a monitoring endpoint. This is the recommended way to deploy CSP: test in report-only mode before enforcing. Understanding these fundamentals will help you diagnose and resolve this issue more effectively.
The most common reasons this occurs include: Inline scripts (onclick, onload attributes) violating script-src directive. Third-party resources (analytics, ads, fonts) not included in the CSP whitelist. Eval() or new Function() usage in JavaScript violating script-src 'unsafe-eval'. Inline styles violating style-src directive when 'unsafe-inline' is not allowed. Identifying the root cause is the first step toward finding the right solution.
To resolve this, follow these recommended steps: Review console warnings to identify all resources and directives causing violations. Add legitimate resource origins to the appropriate CSP directive (script-src, style-src, img-src). Replace inline scripts with external files or use nonce-based CSP for necessary inline scripts. After fixing all violations in report-only mode, switch to enforcing Content-Security-Policy header. If these steps do not resolve the issue, consider consulting additional resources or a qualified professional.
This article is part of our Browser Errors collection on Error Codes Wiki. We provide comprehensive, up-to-date information to help you find solutions quickly.
Quick Answer
How do I use nonces with CSP?
Generate a unique nonce per-request on the server. Add it to the CSP header: script-src 'nonce-abc123'. Then add the same nonce to script tags: <script nonce="abc123">. The nonce must change on every page load.
Overview
Understand and fix Content Security Policy report-only violations showing in the browser console without blocking content.
Key Details
- Content-Security-Policy-Report-Only header logs violations without blocking content, useful for testing CSP policies
- Violations appear as warnings in the browser console with details about the blocked resource and directive
- The report-uri or report-to directive can send violation reports to a monitoring endpoint
- This is the recommended way to deploy CSP: test in report-only mode before enforcing
Common Causes
- Inline scripts (onclick, onload attributes) violating script-src directive
- Third-party resources (analytics, ads, fonts) not included in the CSP whitelist
- Eval() or new Function() usage in JavaScript violating script-src 'unsafe-eval'
- Inline styles violating style-src directive when 'unsafe-inline' is not allowed
Steps
- 1Review console warnings to identify all resources and directives causing violations
- 2Add legitimate resource origins to the appropriate CSP directive (script-src, style-src, img-src)
- 3Replace inline scripts with external files or use nonce-based CSP for necessary inline scripts
- 4After fixing all violations in report-only mode, switch to enforcing Content-Security-Policy header