Welcome
The most common way to set a CSP on your site is via a HTTP response header, but that's not always possible. This page is hosted on GitHub pages and we can't set HTTP response headers here so our CSP is defined in a meta tag instead.
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src cdn.report-uri.com; style-src 'self' fonts.googleapis.com; font-src fonts.gstatic.com; connect-src scotthelme.report-uri.com; upgrade-insecure-requests">
Having this option available is great but there is a limitation; you can't enable CSP Reporting inside a meta tag. This means you have to deploy your CSP without getting feedback from the browser about what's happening on your site, which isn't a great idea. This is the problem that Report URI JS fixes. By including our reporting library in your page we can enable CSP reporting for your meta tag!
Setup
These tags need to be placed as early as possible in your <head>, along with your CSP meta tag, as they will only apply to content after they are inserted.
<script type="text/json" id="csp-report-uri">
{"keys" : ["blockedURI", "columnNumber", "disposition", "documentURI", "effectiveDirective", "lineNumber", "originalPolicy", "referrer", "sample", "sourceFile", "statusCode", "violatedDirective"],
"reportUri" : "https://{subdomain}.report-uri.com/r/d/csp/enforce"}
</script>
<script src="https://cdn.report-uri.com/libs/report-uri-js/1.0.1/report-uri-js.min.js" integrity="sha256-Cng8gUe98XCqh5hc8nAM3y5I1iQHBjzOl8X3/iAd4jE=" crossorigin="anonymous"></script>
You need to update the config json with your own reporting address by replacing the {subdomain} placeholder and you will need to make two additions to your CSP.
script-src cdn.report-uri.com
connect-src {subdomain}.report-uri.com
The script-src is required to load the JS library and the connect-src is required to send the reports to your reporting endpoint which also needs updating by replacing the {subdomain} placeholder.
Demo
To see how a CSP violation is reported, let's try and load an asset that isn't permitted by our CSP.
<img src="https://report-uri.com/img/logo.svg">
The above image was not loaded because the domain is not a whitelisted image source in our CSP. Normally, with a CSP delivered via meta tag, you wouldn't receive a report for such an event but if you check the Network tab in the developer tools of your browser and reload the page, you'll see that a report was sent!
In future updates we will be adding some awesome new features to the library like the ability to filter reports on the client side, down sample reports to reduce volume and even normalising reports before they are sent.