0

我想使用以下机制推迟非关键 css：

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

我有以下内容安全政策：

Content-Security-Policy: default-src 'self'; object-src 'none'; font-src 'self'; base-uri 'self'; connect-src 'self'; manifest-src 'self'; img-src 'self'; script-src 'self' 'nonce-7cc36362-697e-4b28-bdd9-0400d8923894' 'sha256-1jAmyYXcRq6zFldLe/GCgIDJBiOONdXjTLgEFMDnDSM='; style-src 'self'; form-action 'self'; frame-ancestors 'none'; media-src 'self'; report-uri /api/cspviolation

尝试加载和解释文档时，浏览器阻止执行 onload 事件处理程序脚本，因为它违反了 CSP，我不明白，因为该脚本的 sha256 是在 script-src 指令中设置的。

有任何想法吗？我使用在线 sha256 生成器生成 CSP 中的 sha256 集。遗憾的是，Chrome 没有在控制台中为我提供它想要的 sha256，这是我以前见过的。

4

2 回答 2

1

在 CSP 级别 3 中，内联事件处理程序只能通过使用“不安全哈希”的哈希列入白名单，但这在浏览器中尚未得到很好的支持。检查https://www.w3.org/TR/CSP3/#unsafe-hashes-usage的规范和 https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content 中的表格- 浏览器兼容性的安全策略。

您最好的选择可能是将脚本移动到单独的文件并添加事件侦听器。

于 2019-12-10T10:13:20.577 回答
0

您正在使用内联脚本（“onload=...”），因此您的 CSP script-src 需要允许unsafe-inline，或者您需要以不同的方式加载脚本。

于 2019-12-03T16:58:43.260 回答