I recently learned that Content Security Policy (CSP) violations are reported differently depending on the browser being used.
To demonstrate the violation differences, I created an example HTML file with the following CSP:
This CSP allows only the use of inline resources, such as inline
<script> elements, inline event handlers, and inline
In the example, I’m loading an external script (
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">) to force a SecurityPolicyViolationEvent and I’m showing its details by listening to
You can also use this other example to test an “eval” clause violation.
You can try opening it on multiple browsers to see how the event is implemented differently across them.
The main differences I noticed by running the examples in Chrome (
v90.0.4430.212), Safari (
v14.1), and Firefox (
v88.0.1) are the following.
URI of the resource that was blocked because it violates a policy.
- In Chrome and Firefox, it’s the full URI of the resource. In the example, this is
- In Safari, it’s the origin of the resource. In the example, this is
How the violated policy is configured to be treated by the user agent. This should be
In Safari, this is not implemented yet, so it’s always
Policy whose enforcement uncovered the violation.
Directive whose enforcement uncovered the violation.
To me, this is the biggest difference in how violations are implemented.
- In Firefox and Safari, this is the policy directive that was violated. In the example, this is
- In Chrome, this is the most “specific” directive that was violated. In the example, this is
script-src-elem— even if we haven’t declared this directive — because this is where the violation would have occurred if such directive was present in the policy.
Directive whose enforcement uncovered the violation. Following the CSP3 spec, this is “A copy of the
effective-directive property, kept for historical reasons”.
It’s still interesting to notice that:
- In Chrome and Firefox, this is the policy directive that was violated. In the example, this is
- In Safari, this is the directive and the value that were violated. In the example, this is