(CSP) 内容安全政策。处理从外部库添加的内联样式的方法

Question

有没有办法处理从外部库添加的内联 script/styles？在我自己的风格中，我只使用 nonce，但我不能将它添加到外部库。

我使用 tooltip.io，当库尝试运行:

时出现问题

function() {
                var n = e("./styles/css/styles.scss")
                  , t = document.createElement("style");
                t.innerHTML = n,
                document.head.appendChild(t)
            }(),

CSP 显示

[Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-b123d558a63bc7e84aa7' ". Either the 'unsafe-inline' keyword, a hash ('sha256-SamqqFx+xVKq8AnoIWgeammNlDl/h4AP94HthfQO43Q='), or a nonce ('nonce-...') is required to enable inline execution.

有什么办法可以处理这种错误吗？

Answer 1

我会回答我悬赏的问题。我认为让库与 CSP 一起工作的唯一方法是向 CSP 添加 nonce 选项。并在库中添加对带有随机数的 CSP 的支持。为此，库将需要使用 <style> 标记和随机数更改所有内联样式。

jsLibrary({
 nonce: '<XXXX>'
});

<style nonce="<XXXX>">

</style>

如果您知道可以在服务器上进行最少修改即可将 CSP 与第 3 方库一起使用的任何其他方法，请随时添加答案。

Answer 2

您必须在 html..

的头部指定允许的内容

允许内联样式：

Content-Security-Policy: style-src 'unsafe-inline';

上面的内容安全策略将允许像元素这样的内联样式，以及任何元素上的样式属性：

<style>
#inline-style { background: red; }
</style>

<div style="display:none">Foo</div>

您可以使用 nonce-source 来仅允许特定的内联样式块：

Content-Security-Policy: style-src 'nonce-2726c7f26c'

您必须在元素上设置相同的随机数：

<style nonce="2726c7f26c">
#inline-style { background: red; }
</style>

或按域：

Content-Security-Policy: style-src https://example.com/

允许内联脚本和内联事件处理程序：

Content-Security-Policy: script-src 'unsafe-inline';

以上内容安全策略将允许内联元素

<script> 
  var inline = 1; 
</script>

您可以使用 nonce-source 来仅允许特定的内联脚本块：

Content-Security-Policy: script-src 'nonce-2726c7f26c'

您必须在元素上设置相同的随机数：

<script nonce="2726c7f26c">
  var inline = 1;
</script>

或按域：

Content-Security-Policy: script-src https://example.com/

Answer 3

最近我在 Jquery 不显眼的 javascript 文件中遇到了类似的问题，我在其中一个项目中使用了它，它在 [=31= 上添加了内联 style="display:none" ]元素Ul 所以，我更喜欢 Hash 方法来允许内联样式，你需要添加 style-src 'self' 'unsafe-hashes' 'sha-256 {sha hashed string}'

如果您在控制台的 chrome 开发人员工具中使用 chrome，其中显示 csp 违规，在错误消息的最后一行它还会显示 sha-256 字符串，您可以将其添加到您的内容安全策略中header，以便 csp 允许内联 css 或 js，这种 unsafe-hashes 方法优于 unsafe-nonces，因为每个请求的 nonce 需要是唯一的，并且 hash 是不可逆的，所以内容匹配哈希只允许总是

我觉得你应该尝试打开在 chrome 中出错的页面，看看它是否将 sha-256 哈希显示为控制台错误消息的最后一行，如果你想手动生成像 sha- 512，你可以为 ./styles/css/styles.scss 处理后生成的 styles.css 生成哈希，并将此哈希添加到 csp 属性中，如

Content-Security-Policy: default-src 'none'; style-src 'self' 'sha-512{Manually generated sha-512}';

您可以使用的最后一个选项是样式 src 中的 unsafe-inline，但您可以尝试 unsafe-hashes，它会比 unsafe-inline

更好

(CSP) 内容安全政策。处理从外部库添加的内联样式的方法

(CSP) Content Security Policy. Way to handle inline styles added from external liblary

javascript

content-security-policy