Let's consider a page located at http://example.com/signup.html
. It uses the following policy, disallowing everything but stylesheets from cdn.example.com
.
The HTML of signup.html
looks like this:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<title>Sign Up</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
Page content
</body>
</html>
Can you spot the violation? Stylesheets are only allowed to be loaded from cdn.example.com
, yet the website tries to load one from its own origin (http://example.com
). A browser capable of enforcing CSP will send the following violation report as a POST request to http://example.com/_/csp-reports
, when the document is visited:
{
"csp-report": {
"document-uri": "http://example.com/signup.html",
"referrer": "",
"blocked-uri": "http://example.com/css/style.css",
"violated-directive": "style-src cdn.example.com",
"original-policy": "default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports",
"disposition": "report"
}
}
As you can see, the report includes the full path to the violating resource in blocked-uri
. This is not always the case. For example, when the signup.html
would attempt to load CSS from http://anothercdn.example.com/stylesheet.css
, the browser would not include the full path but only the origin (http://anothercdn.example.com
). This is done to prevent leaking sensitive information about cross-origin resources.