{
"$type": "site.standard.document",
"bskyPostRef": {
"cid": "bafyreifg72z6oyu6pjo6reuxrwbwtdxhrpln2ufopxe5dy6rmximxzi5zm",
"uri": "at://did:plc:aoqs4f5ru6ztomatyvept7bf/app.bsky.feed.post/3mnlsxvjb722a"
},
"canonicalUrl": "https://til.iainsimmons.com/posts/content-security-policy-reporting-endpoint",
"description": "today iain learned: How to use the Content-Security-Policy Reporting endpoint for automatically logging/receiving CSP violations",
"path": "/posts/content-security-policy-reporting-endpoint",
"publishedAt": "2026-02-15T00:00:00.000Z",
"site": "at://did:plc:aoqs4f5ru6ztomatyvept7bf/site.standard.publication/3mnlsntqzp72a",
"tags": [
"webdev",
"security"
],
"textContent": "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.\n\nUsing a combination of a CSP directive report-to and a Reporting-Endpoints\nHTTP Header you can have the _user's browser_ log CSP violations!\n\nHere is a minimal example of the headers (from MDN):\n\nWhere 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:\n\nThat endpoint could log or email the violations as needed.\n\nOn this very site I implemented the endpoint with a Cloudflare Worker. Note: I've since removed it so I don't get spammed. 🙂\n\nHere's the relevant code to handle the CSP reporting requests:\n\nHere's a random placeholder image from an external site that should trigger it:\n\nAnd here's what the received report looks like in the Cloudflare logs:\n\n![[csp-violation-report-in-cloudflare-worker-logs.png|CSP violation report in Cloudflare Worker logs]]\n\nAgain, 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).",
"title": "Content-Security-Policy Reporting endpoint"
}