report-toSending 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 defaultdefault-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-srcreport-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