Error Codes Wiki

Browser Content Security Policy Report-Only Violations — What It Means & How to Fix It

Informationalnetwork error

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

  1. 1Review console warnings to identify all resources and directives causing violations
  2. 2Add legitimate resource origins to the appropriate CSP directive (script-src, style-src, img-src)
  3. 3Replace inline scripts with external files or use nonce-based CSP for necessary inline scripts
  4. 4After fixing all violations in report-only mode, switch to enforcing Content-Security-Policy header

Tags

cspcontent-security-policyreport-onlyviolationssecurity

Related Items

More in Network Error

Frequently Asked Questions

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.