为什么我的代码违反了内容安全策略?

Question

我想使用以下机制推迟非关键 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，我以前见过。

Answer 1

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

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

Answer 2

您使用的是内联脚本("onload=..."(，因此您的CSP script-src需要允许unsafe-inline，或者您需要以不同的方式加载脚本。