为什么我的代码违反了内容安全政策？答案

【问题标题】：Why does my code violate the Content Security Policy?为什么我的代码违反了内容安全政策？
【发布时间】：2019-11-29 13:49:07
【问题描述】：

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

【问题讨论】：

标签： javascript google-chrome content-security-policy inline-scripting

【解决方案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 中的表格以了解浏览器兼容性。

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

【讨论】：

【解决方案2】：

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

【讨论】：