为什么 Chrome 不尊重我的内容安全政策哈希？答案

【问题标题】：Why doesn't Chrome respect my Content Security Policy hashes?为什么 Chrome 不尊重我的内容安全政策哈希？
【发布时间】：2019-03-14 11:08:03
【问题描述】：

我必须将 CSP 添加到具有内联样式的页面中，并且为了避免使用 unsafe-inline 我正在使用哈希。我添加哈希的技术只是在 Chrome 中加载页面，查看错误消息并复制所有建议的哈希（例如，从 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. 获取 <suggested hash>）。

这解决了 Firefox 中的问题，但没有解决 Chrome 中的问题。奇怪的是，Chrome 似乎并不尊重它自己生成的哈希值。这导致了一个有趣的情况，Chrome 列出了包括哈希在内的策略，说它不符合要求，然后建议我添加一个它之前打印的策略中的哈希。

我的政策：

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'

这会导致许多错误，例如：

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. 其中 Chrome 建议我添加策略中已经存在的哈希值。

我可能缺少一些特定于 Chrome 的问题。有什么想法吗？

【问题讨论】：

标签： google-chrome content-security-policy

【解决方案1】：

我假设您在样式属性中有内联样式（与内联 <style> 元素相反）。根据CSP specification，哈希应该只应用于内联<style>元素，而不是样式属性。

虽然 Chrome 显示样式属性的错误消息非常令人困惑，但它实际上符合规范（某些其他浏览器，例如 Firefox 和 IE 不符合）。您不能在 Chrome 的 CSP 中允许使用哈希码的内联样式属性。如果您绝对需要允许它们，则必须使用'unsafe-inline'。

CSP 3.0 规范可能包括使用'unsafe-hashes' 将哈希码扩展为样式属性的可能性。此功能目前仍处于“正在进行中”状态，似乎尚未在 Chrome 中实现。

例子：

<?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>

【讨论】：

感谢 Petr 的澄清。您有没有在任何地方看到过这种限制记录？
当 Chrome 说它需要 <suggested hash> 时，它从哪里获取哈希值？
回答我自己的问题 - 它对我相信的元素的 .style.cssText 进行哈希处理。
嗨@Petr Srníček，我偶然发现了你的帖子，试图解决我面临的类似问题。当生成随机数并将其分配给内联样式元素时，例如，谷歌浏览器继续抛出类似的错误。由于我的理解支持随机数，是否有理由这样做？
'unsafe-hashes' 现在支持（至少在 Chrome 93 中）