有没有办法处理从外部库添加的内联脚本/样式? 在我自己的风格中,我只使用随机数,但我无法将其添加到外部库。
我使用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.
有什么办法可以处理这种错误吗?
最近我在一个项目中使用的 Jquery unobtrusive javascript 文件遇到了类似的问题,它在 html 元素 Ul 上添加内联 style="display:none" 所以,我更喜欢哈希方法来允许内联样式,您需要添加 样式-src'自我' “不安全哈希” 'sha-256 {sha 哈希字符串}'
如果您在控制台中的 chrome 开发人员工具中使用 chrome,其中显示了 csp 违规,则在错误消息的最后一行中,它还会显示 sha-256 字符串,您可以将其添加到内容安全策略标头中,以便可以允许内联 css 或 js csp,这种不安全哈希方法比不安全随机数更好,因为每个请求的随机数需要是唯一的,并且哈希是不可逆的,因此始终只允许内容匹配哈希
我觉得你应该尝试打开在 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 中的不安全内联,但您可以尝试使用不安全哈希,这会比不安全内联更好
您必须指定 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>
您可以使用随机数源来仅允许特定的内联脚本块:
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 与 3rd 方库结合使用,只需在服务器上进行最少的修改,请随时添加答案。