Menu
I'm having to add CSP to a page that has inline styles, and to avoid using unsafe-inline I'm using hashes. My technique for adding the hashes is just to load the page in Chrome, see the error messages and copy all the suggested hashes (eg take <suggested hash> from Refused to apply inline style because it violates the following Content Security Policy directive: "style-src ...". Either the 'unsafe-inline' keyword, a hash ('<suggested hash>'), or... is required to enable inline execution.).
This fixed the problem in Firefox, but not in Chrome. Oddly enough, Chrome doesn't appear to respect the hashes that it itself has generated. This leads to a funny situation whereby Chrome lists the policy including the hash, says it doesn't comply, and then recommends that I add a hash that was in the policy it printed just before.
My policy:
default-src 'none'; font-src 'self' data:; img-src 'self'; script-src 'self' 'report-sample'; style-src 'self' 'sha256-/3kWSXHts8LrwfemLzY9W0tOv5I4eLIhrf0pT8cU0WI=' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-OTeu7NEHDo6qutIWo0F2TmYrDhsKWCzrUgGoxxHGJ8o=' 'sha256-fviu5RwuBYFcCd5CDanhy6NCLufcwvCAbm061aSqhoQ=' 'sha256-wS7xf+bhXBr5EM064hQkAW0vX3ks5VoxbGn+KQC/Vhk=' 'sha256-cxL35Ug49Sl1zHMOdz/r0xinQ6BYGgClHdDCk2XPTzE='; object-src 'self'; connect-src 'self'
This results in numerous errors such as:
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'sha256-/3kWSXHts8LrwfemLzY9W0tOv5I4eLIhrf0pT8cU0WI=' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-OTeu7NEHDo6qutIWo0F2TmYrDhsKWCzrUgGoxxHGJ8o=' 'sha256-fviu5RwuBYFcCd5CDanhy6NCLufcwvCAbm061aSqhoQ=' 'sha256-wS7xf+bhXBr5EM064hQkAW0vX3ks5VoxbGn+KQC/Vhk=' 'sha256-cxL35Ug49Sl1zHMOdz/r0xinQ6BYGgClHdDCk2XPTzE='". Either the 'unsafe-inline' keyword, a hash ('sha256-/3kWSXHts8LrwfemLzY9W0tOv5I4eLIhrf0pT8cU0WI='), or a nonce ('nonce-...') is required to enable inline execution. wherein Chrome recommends that I add a hash that is already present in the policy.
Probably there's some Chrome-specific gotcha I'm missing. Any ideas what it might be?
271
I assume that you have your inline styles in style attributes (as opposed to inline <style> elements). According to the CSP specification, hashes should apply to inline <style> elements only, not to style attributes.
While Chrome displays a very confusing error message for style attributes, it actually complies with the specification (some other browsers, eg. Firefox and IE don't). You cannot allow inline style attributes using hash codes in CSP in Chrome. If you absolutely need to allow them, you have to use 'unsafe-inline'.
CSP 3.0 specification will probably include the possibility to extend the hash codes to style attributes by using 'unsafe-hashes'. This functionality is still in a "work in progress" state at the moment though and does not seem to be implemented in Chrome yet.
Example:
<?php
header("Content-Security-Policy: style-src 'self' 'sha256-U/AHSCAVB2ZhU2+kPeMhPfZyIE2wH4fhQ0ZtYjq9/JA=' 'sha256-l8V8xXSfpuv7xbN4e0tIS0v77DG2xfSC1rSpNZak/K8='");
header("Content-Type: text/html");
?>
<!DOCTYPE html>
<html>
<head>
<!-- Inline style - 'sha256-U/AHSCAVB2ZhU2+kPeMhPfZyIE2wH4fhQ0ZtYjq9/JA=' -->
<style>.redtext {color: red;}</style>
</head>
<body>
<div class="redtext">This should be red - style from <style> element.</div>
<!-- Inline style in attribute - 'sha256-l8V8xXSfpuv7xbN4e0tIS0v77DG2xfSC1rSpNZak/K8=' -->
<div style = "color: green;">This should not be green - style from attribute should be disallowed even though its hash is included in style-src in CSP.</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
