21

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?

1 Answer 1

23

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 &lt;style&gt; 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>
5
  • 1
    Thanks Petr for this clarification. By any chance, did you ever see this limitation documented anywhere? Jan 15, 2020 at 23:50
  • 2
    Where does Chrome get the hash from, when it says it expects <suggested hash>? Sep 22, 2020 at 9:08
  • 1
    Answering my own question - it hashes the .style.cssText of the element I believe. Sep 22, 2020 at 9:20
  • 1
    Hi @Petr Srníček, I came across your post in an attempt to resolve a similar issue I'm facing. When generating a nonce and assigning it to an inline style element e.g. <style></style>, Google Chrome continues to throw a similar error. Is there a reason why it would since nonces are supported from my understanding?
    – Motivated
    Oct 22, 2020 at 4:28
  • 'unsafe-hashes' are now supported (at least in Chrome 93)
    – user115014
    Sep 13, 2021 at 8:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.