report-to
Sending even more Content Security Policy (CSP) violation reports with report-to
, asynchronously and possibly grouping more reports together. Read general CSP reporting description for more details.
Content-Security-Policy: default-src 'none'; img-src 'self' https://www.michalspacek.cz; script-src 'nonce-8PCza2xdElHCoN20q+NS/w==' 'self' 'report-sample'; style-src 'self'; form-action 'self'; report-to default
default-src
: what's allowed by default, includes images, fonts, JavaScript and moreimg-src
: where to load images from, overrides default-src
for images
'self'
means current URL's origin (scheme + host + port)script-src
: what JavaScript is allowed to be executed
'nonce-8PCza2xdElHCoN20q+NS/w=='
means script
elements with nonce="8PCza2xdElHCoN20q+NS/w=="
attribute'report-sample'
instructs the browser to include the first 40 characters of the blocked JavaScript in the reportstyle-src
: allowed CSS sourcesform-action
: where it's allowed to submit forms, not part of default-src
report-to
: name of the group where to send violation reports toReport-To
response header:Report-To: {"group":"default","max_age":1800,"endpoints":[{"url":"https://clout.has.report/report.php"}],"include_subdomains":true}
group
: the name of the group, the same as in the CSP header in the report-to
directivemax_age
: how long the browser should use the endpoint and report errors to itendpoints
: 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
<script nonce="8PCza2xdElHCoN20q+NS/w==">
document.getElementById('prompt-image').onclick = function() {
const url = prompt('Enter a URL to be used for an image', 'https://');
if (url) {
new Image().src = url;
alert('Tried loading an image from ' + url);
}
}
</script>
<script nonce="8PCza2xdElHCoN20q+NS/w==">
document.getElementById('prompt-javascript').onclick = function() {
const url = prompt('Enter a URL to load a JS file from', 'https://');
if (url) {
const script = document.createElement('script');
script.src = url;
document.getElementById('prompt-javascript').insertAdjacentElement('afterend', script);
alert('Tried loading a JS file from ' + url);
}
}
</script>
<script nonce="8PCza2xdElHCoN20q+NS/w==">
document.getElementById('prompt-css').onclick = function() {
const url = prompt('Enter a URL to load a CSS file from', 'https://');
if (url) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.getElementById('prompt-javascript').insertAdjacentElement('afterend', link);
alert('Tried loading a CSS file from ' + url);
}
}
</script>
With form-action
, you can limit where forms on your page can be submitted,
so if an attacker would inject a fake form or would change the action
of your existing form, the browser wouldn't submit it.
Please note that form-action
is not part of the default-src
fallback, and needs to be explicitly specified if you want to limit where forms are to be submitted.
<script nonce="8PCza2xdElHCoN20q+NS/w==">
document.getElementById('prompt-form').onclick = function() {
const url = prompt('Enter a URL where to submit a form to', 'https://');
if (url) {
const form = document.createElement('form');
form.method = 'post';
form.action = url;
document.getElementById('prompt-form').insertAdjacentElement('afterend', form);
form.submit();
alert('Submitted a form to ' + url);
}
}
</script>
Reporting-Endpoints
instead of Report-To
) and moving out concrete reports into the following separate Draft Community Group Reports:
Crash Reporting,
Deprecation Reporting,
Intervention Reporting