I just spend some hours looking into why the following CSP does not work:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mocha Tests</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src data:; style-src 'sha256-XxZgFmkmXZlR6jVPH+k+HULjy6Lc2IadEc+Ph/KINXk='; script-src 'sha256-LVQH1sE6fE8xNRM7+UgyoukIGH334oHs5JcBD6b2vDQ='">
<link href="https://unpkg.com/mocha@5.2.0/mocha.css" rel="stylesheet" />
</head>
<body>
<div id="mocha"></div>
<script src="https://unpkg.com/mocha@5.2.0/mocha.js"></script>
</body>
</html>
The hashes were generated correctly:
$ curl -s https://unpkg.com/mocha@5.2.0/mocha.css | openssl dgst -sha256 -binary | openssl enc -base64
XxZgFmkmXZlR6jVPH+k+HULjy6Lc2IadEc+Ph/KINXk=
$ curl -s https://unpkg.com/mocha@5.2.0/mocha.js | openssl dgst -sha256 -binary | openssl enc -base64
LVQH1sE6fE8xNRM7+UgyoukIGH334oHs5JcBD6b2vDQ=
And on MDN, both for script-src and style-src, it reads:
’<hash-algorithm>-<base64-value>'
[…]
CSP 3.0 allows it in the case ofscript-srcfor external scripts.
Yeah, it does mention the same sentence on the site for style-src. I am not sure whether the spec really restricts it to script-src though.
Anyway, this sentence explains it is possible to use it in the way I’ll try.
Also, the compatibility table does not list “CSP 3.0” or so, there…
(It just states “With external scripts” is supported by Chrome since v59. I have no idea, what that means.)
I’ve tried the example in Firefox and Chromium, neither works and always claims the hash is invalid.
I found a meta bug about CSP 3.0 implementation and I guess, now, it just is not implemented, at least in Firefox.
TODO
- Clarify whether it is really restricted to
script-src. - Fix compatibility tables:
- What’s “With external scripts”?
- Mention CSP 3.0 or similar there, to reflect the current state of browser support