(云解决方案提供商)内容安全策略.处理从外部库添加的内联样式的方法



有没有办法处理从外部库添加的内联脚本/样式? 在我自己的风格中,我只使用 nonce,但我无法将其添加到外部库中。

我使用 tooltip.io,当liblary尝试运行时出现问题:

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

云解决方案提供商显示

[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.

有没有办法处理这种错误?

最近我遇到了类似的问题,因为我在一个项目中使用的 Jquery 不显眼的 javascript 文件是在 html 元素 ul 上添加内联样式="display:none" 所以,我更喜欢哈希方法来允许内联样式,你需要添加 风格-src "自我" "不安全的哈希" 'SHA-256 {SHA 哈希字符串}'

如果您在显示CSP冲突的控制台中的Chrome开发人员工具中使用Chrome,则在错误消息的最后一行中,它还会显示可以添加到内容安全策略标头中的SHA-256字符串,以便CSP可以允许内联CSS或JS,这种不安全哈希方法比不安全随机数更好,因为随机数需要每个请求都是唯一的,并且哈希是不可逆的,因此始终只允许内容匹配哈希

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

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

您可以使用的最后一个选项是 SRC 样式的不安全内联,但您可以尝试不安全哈希,这将比不安全内联更好

您必须在 html 的 head 部分中指定允许的内容。

要允许使用内联样式:

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

上述内容安全策略将允许内联样式,如元素,以及任何元素上的样式属性:

<style>
#inline-style { background: red; }
</style>
<div style="display:none">Foo</div>

您可以使用随机源仅允许特定的内联样式块:

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/

我将回答我给予赏金的问题。我认为使库与 CSP 一起工作的唯一方法是向 CSP 添加随机选项。并将带有随机数的CSP支持添加到库中。为此,库需要更改带有<style>标签的所有内联样式,并使用该随机数。

jsLibrary({
nonce: '<XXXX>'
});
<style nonce="<XXXX>">
</style>

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

相关内容

  • 没有找到相关文章