Content Security Policy with report-uri

Sending Content Security Policy (CSP) violation reports.

CSP is a policy that lets the authors (or server administrators) of a web application inform the browser about the sources from which the application expects to load resources like images, scripts, styles, or even where to submit forms. Content Security Policy is not intended as a first line of defense against content injection vulnerabilities like Cross-Site Scripting (XSS). Instead, CSP is best used as defense-in-depth, to reduce the harm caused by content injection attacks. Using report-uri directive is specific to CSP and is not part of the Reporting API specification, and is actually deprecated and replaced by report-to directive and Reporting API in Content Security Policy level 3 spec, which is not yet fully supported by all major clients. To support more browsers, apps usually send both report-uri and report-to in their CSP headers.

The CSP response header:

Content-Security-Policy: default-src 'none'; img-src 'self' https://www.michalspacek.cz; script-src 'nonce-XLYE6oVe55JRaVp7+OZf2EAs' 'self' 'report-sample'; style-src 'self' 'nonce-XLYE6oVe55JRaVp7+OZf2EAs'; report-uri https://cargo.has.report/report

Try it with images

Loaded image

another image from https://www.michalspacek.cz (allowed)

show the code

Now simulate an attacker:
an image from https://example.com

show the code

… and with JavaScript

(allowed, the script tag contains nonce="XLYE6oVe55JRaVp7+OZf2EAs")

show the code

Simulate an attacker:
blocked JS tag

show the code

There's more CSP demos to try, where you can load any resources by URL and even submit forms.

Related specs & documents