HTTP headers | Content-Security-Policy-Report-Only

Last Updated : 31 Oct, 2019

The HTTP Content-Security-Policy-Report-Only response header allows the web developers to test the policies by keeping an eye on their effects. These violation reports consist of JSON documents sent through HTTP POST request to the specified URI. It is a response-type header

Syntax:

Content-Security-Policy-Report-Only: <policy-directive>

Directives: This header accepts a single header mentioned above and described below:

<policy-directive>: In this header the content-security-policy header can be used. The report-uri directives should used with this header.

Note: The report-uri directive is intended to be replaced by report-to directive, report-to is still not supported by most of the browsers. So, to tackle the compatibility issues, one can specify both report-uri and report-to as it would not only add compatibility with current browsers but also add forward compatibility when the browsers will get report-to support.

Content–Security-Policy:  ….; report-uri
https://written.geeksforgeeks.com; report-to groupname

The browsers supporting report-to will ignore report-uri.

report-to: Shoots a SecurityPolicyViolationEvent. As stated above, not supported by all the browsers as of now.

Examples: The purpose of the header is to report any violations that might have occurred. It can be used iteratively to work upon a content security policy. One can observe how their site behaves, watching for violation reports and/or malware redirects, then choose the appropriate policy imposed by Content-Security-Policy header.

Content-Security-Policy-Report-Only: default-src https:; 
report-uri /csp-violation-report-endpoint/

If one wishes to receive reporting while still imposing the policy, they can use Content-Security-Policy header with report-uri directive.

Content-Security-Policy: default-src https:; 
                          report-uri /csp-violation-report-endpoint/

To check this Content-Security-Policy-Report-Only in action go to Inspect Element -> Network check the request header for Content-Security-Policy-Report-Only like below, Content-Security-Policy-Report-Only is highlighted you can see.

Violation report syntax: The JSON report contains the following data:

blocked-uri: The URI of the resource blocked by the Content Security Policy from being loaded. If the blocked URI is from a different source than the document uri, then the blocked URI is shortened to contain just the scheme, host and port.
Disposition: Either “enforce” or “reporting”. Depends on whether the Content-Security-Policy or the Content-Security-Policy-Report-Only header is used.
document-uri: The URI of the document that encountered violation.
effective-directive: The directive whose implementation caused the violation.
original-policy: The original policy specified by the Content-Security-Policy-Report-Only HTTP header.
referrer: The referrer of the document that encountered violation.
script-sample: The first 40 characters of the inline script, event handler, or style that gave rise to the violation.
status-code: The HTTP status code of the resource on which the global object was incorporated.
violation-directive: The name of the policy section violated.

Sample violation report: The page located at http://geeksforgeeks.com/signup.html. Below is the policy implemented, that only allows the stylesheet from cdn.geeksforgeeks.com.

Content-Security-Policy-Report-Only: default-src ‘none’; 
style-src cdn.geeksforgeeks.com; report-uri /_/csp-reports

HTML code: The HTML of signup.html looks like this:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Sign Up</title> 
    <link rel=”stylesheet” href=”css/style.css”> 
</head> 
  
<body> 
    . . . 
</body> 
  
</html> 

Violation:Here the CSS is only allowed to download from the CDN but in the HTML code, the browsers will try to load from its own local file because the browsers will send the following violation.

{
“csp-report”:{
“document-uri”: “http://geeksforgeeks.com/signup.html”,
“referrer”: “”,
“blocked-uri”: “http://geeksforgeeks.com/css/style.css”,
“violated-directive”: “style-src cdn.geeksforgeeks.com”,
“original-policy”: “default-src ‘none’; 
style-src cdn.geeksforgeeks.com; report-uri /_/csp-reports”,
“disposition”: “report”
}
}

Supported Browsers: The browsers are compatible with HTTP Content-Security-Policy-Report-Only headers are listed below: