Content-Security-Policy-Report-Only Header

What is the Content-Security-Policy-Report-Only header, and why would you use it?

Why use the Content-Security-Policy-Report-Only Header?

It is a great way to see the possible effect of implementing a Content-Security-Policy header without actually blocking anything. When you use Content-Security-Policy-Report-Only it only sends reports to the developer tools console and if you have specified a report-to or report-uri directive it can post a JSON representation of the a violation to a URI endpoint that you specify.

Create a simple policy

The first thing we need to do in order to use the Content-Security-Policy-Report-Only header is to come up with a simple policy. We're going to start by using the default-src CSP directive and setting it to the value 'self':

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

Now we've set our report only policy to default-src 'self', which tells the browser to only load resources from the same origin as the document that sent the header. So if we have a page example.html

GET /example.html
Host: example.com
Content-Security-Policy-Report-Only: default-src 'self';

<!doctype html>
<html>
  <body>
  	<h1>Hello World</h1>

	<img src="/images/hello.png">

	<script src="/js/script.js">
  </body>
</html>

The above will work just fine with this policy, but if we add a third party image like this:

<img src="https://unsplash.it/200/200">

Now the Content-Security-Policy would block this image from loading, however with Content-Security-Policy-Report-Only it will not block the image, but instead will print an error in the browsers developer tools console.

The report only mode of CSP is a great way to start testing the implementation of your site without breaking anything.

Content-Security-Policy-Report-Only Browser Support

CSP Level 1

Supported On:

Chrome 25+ (2013)

Firefox 23+ (2013)

Safari 7+ (2013)

Edge 12+ (2015)

The Content-Security-Policy-Report-Only header has been supported since the first version of CSP Level 1. This means that support has existed since 2013: Chrome 25+, Firefox 23+, Safari 7+ or IE Edge 12+.

CSP Developer Field Guide

Want to learn the ins and outs CSP? Grab a copy of the CSP Developer Field Guide. It's a short and sweet guide to help developers get up to speed quickly.

Grab a Copy

Struggling to stay on top of security advisories?

Advisory Week is a weekly roundup of all the security advisories published by the major software vendors.

Content Security Policy (CSP) Quick Reference Guide