Content Security Policy Report-Only with `report-to`

Loading images, executing JavaScript and everything else as usual but sending a Content Security Policy (CSP) violation report (with "disposition": "report" instead of "disposition": "enforce") if something would go wrong.

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. This Report-Only mode works with both report-uri and report-to directives, and is usually used for policy upgrades – an app can send both Content-Security-Policy and Content-Security-Policy-Report-Only headers with different policies.

The CSPRO (CSP Report-Only) response header:

Content-Security-Policy-Report-Only: default-src data: 'self' 'nonce-aUKj4153gqgthNF8wAEylr0N' 'report-sample'; report-to default

default-src: what's allowed by default, includes images, fonts, JavaScript and more
- data: used for the placeholder image below
- 'self' means current URL's origin (scheme + host + port)
- 'nonce-aUKj4153gqgthNF8wAEylr0N' means script & style elements with nonce="aUKj4153gqgthNF8wAEylr0N" attribute
- 'report-sample' instructs the browser to include a violation sample, the first 40 characters (valid for CSS, JS only but included in default-src here to keep the header short)
report-to: name of the group where to send violation reports to

The `Report-To` response header:

Report-To: {"group":"default","max_age":1800,"endpoints":[{"url":"https://yacht.has.report/report"}],"include_subdomains":true}

group: the name of the group, the same as in the CSP header in the report-to directive
max_age: how long the browser should use the endpoint and report errors to it
endpoints: reporting endpoint configuration, can specify multiple endpoints but reports will be sent to just one of them
- url: where to send reports to, must be https://, otherwise the endpoint will be ignored

Try it with images

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

show the code ▼

<script nonce="aUKj4153gqgthNF8wAEylr0N">
  document.getElementById('allowed').onclick = function(e) {
    document.getElementById('image').src = 'https://www.michalspacek.cz/i/images/photos/michalspacek-trademark-400x268.jpg';
  }
</script>

Allowed even though the image was loaded from https://www.michalspacek.cz and not from this origin
Will trigger a report that will be sent asynchronously, possibly grouped with other reports (violation visible in Developer Tools in the Console tab, you won't see the report in Network tab but you can still view the reporting requests)
Check your reports (can take some time before the browser sends the report)

… and with JavaScript