我正在尝试在依赖于光滑网格 (slickgrid.js) 的项目上添加 CSP 标头。我认为以下行会导致问题：
$focusSink = $("<div tabIndex='0' hideFocus style='position:fixed;width:0;height:0;top:0;left:0;outline:0;'></div>").appendTo($container)
这是我在浏览器上遇到的错误：
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'
我尝试了 sha256- 但它没有帮助，因为这些是样式属性。还有其他选择吗？
【问题讨论】：
标签： javascript content-security-policy slickgrid
要允许 style= 属性，它需要使用 'sha256-...' 和 'unsafe-hashes' 令牌。它在 Chrome 和 Firefox 中受支持，但 not in Safari.
因此，就目前而言，除了在style-src 指令中使用“unsafe-inline”外，您别无选择。此外，如果使用了许多不同的 style = '...'，收集它们所有的哈希值并保持最新是不现实的。
你能做的最好的就是这样的 CSP：
style-src 'self' 'unsafe-inline'; style-src-attr 'unsafe-inline'; style-src-elem 'self';
由于style-src-elem 'self' 将适用于 Chrome，因此至少 Chrome 用户将受到保护以免受 <style>..</style> 的 XSS 注入。 Safari 和 Firefox 将使用style-src 'self' 'unsafe-inline' 规则。
或者，您可以重写 JS 代码以使用 class='' 而不是 style=''，或者使用像 Element.style.properrty = 'display:none'; 这样不需要 'unsafe-inline' 令牌的 JS 构造。
【讨论】：