我想使用以下机制推迟非关键 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，这是我以前见过的。
最佳答案
内联事件处理程序只能通过使用 CSP 级别 3 中的“不安全哈希”的哈希列入白名单，但这在浏览器中尚未得到很好的支持。检查https://www.w3.org/TR/CSP3/#unsafe-hashes-usage规范和表格见https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy以实现浏览器兼容性。
您最好的选择可能是将脚本移动到单独的文件并添加事件监听器。
关于javascript - 为什么我的代码违反了内容安全策略？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59106051/