Content Security Policy with report-to

Sending Content Security Policy (CSP) violation reports with Reporting API using the Report-To header, asynchronously and out-of-band, when the browser feels like, possibly grouped with other reports and even other report types.

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. The report-to directive using the Reporting API replaces the deprecated report-uri directive 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-6DorxDqRqHU9AeOIC/UDbys/' 'self' 'report-sample'; style-src 'self' 'nonce-6DorxDqRqHU9AeOIC/UDbys/'; report-to default

The Report-To response header:

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

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="6DorxDqRqHU9AeOIC/UDbys/")

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