Content-Security-Policy Reporting endpoint

While looking at an implementation of the Content-Security-Policy-Report-Only HTTP header with a colleague at work, we saw mention of a reporting endpoint.

Using a combination of a CSP directive report-to and a Reporting-Endpoints HTTP Header you can have the user's browser log CSP violations!

Here is a minimal example of the headers (from MDN):

Where https://example.com/csp-reports would be a server endpoint that accepts POST requests with a JSON payload and Content-Type of application/reports+json that looks something like this:

That endpoint could log or email the violations as needed.

On this very site I implemented the endpoint with a Cloudflare Worker. Note: I've since removed it so I don't get spammed. 🙂

Here's the relevant code to handle the CSP reporting requests:

Here's a random placeholder image from an external site that should trigger it:

And here's what the received report looks like in the Cloudflare logs:

![[csp-violation-report-in-cloudflare-worker-logs.png|CSP violation report in Cloudflare Worker logs]]

Again, you could instead store these in a database and generate a report at some other time, or send emails when they occur (though I'd be very careful that you don't get spammed by sending/receiving too many of these).