为何预加载CSS的onload脚本违反CSP？已配SHA256仍被拦截

我来帮你分析下问题所在，以及对应的解决方案：

核心问题：事件处理函数的SHA计算与CSP规则的匹配 #

你遇到的问题是因为内联事件处理函数（比如onload）的SHA计算逻辑和普通内联脚本块略有不同，而且Chrome有时候不会直接在控制台给出这类脚本的SHA提示，导致你用在线工具生成的哈希可能不匹配。

1. 先检查SHA计算的准确性 #

你需要确保计算SHA的文本和onload里的脚本完全一致，包括空格、标点、引号类型：

• 你使用的脚本是：this.onload=null;this.rel='stylesheet'
• 计算SHA-256时，必须直接用这个字符串，不能添加/删减任何字符（比如不要加空格，不要把单引号改成双引号）
• 注意：在线工具要生成base64格式的SHA-256值，而不是十六进制格式，很多工具默认输出十六进制，需要切换选项。

2. 让Chrome直接给出正确的SHA值（推荐方法） #

把内联的onload逻辑抽成单独的内联脚本块，这样Chrome会在CSP错误提示里直接给出所需的SHA：

<link rel="preload" href="styles.css" as="style" id="delayedStyles">
<script nonce="7cc36362-697e-4b28-bdd9-0400d8923894">
  document.getElementById('delayedStyles').onload = function() {
    this.onload = null;
    this.rel = 'stylesheet';
  };
</script>

当页面加载时，Chrome控制台会弹出CSP错误，里面会明确显示这个脚本块需要的SHA-256值，你直接复制到script-src里即可。

3. 使用unsafe-hashes兼容事件处理函数（备选） #

如果不想修改HTML结构，可以在CSP的script-src里添加'unsafe-hashes'指令，配合你已有的SHA值：

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=' 'unsafe-hashes'; style-src 'self'; form-action 'self'; frame-ancestors 'none'; media-src 'self'; report-uri /api/cspviolation

unsafe-hashes的作用是允许浏览器验证事件处理函数的哈希值，不过要注意这个指令的浏览器兼容性（现代浏览器基本都支持，但旧版浏览器可能不兼容）。

4. 验证CSP配置的细节 #

• 确保script-src里的SHA值没有拼写错误，base64字符串的大小写、字符都要完全匹配
• 检查是否有其他CSP规则覆盖了script-src的配置（比如有没有额外的script-src-elem指令）

内容的提问来源于stack exchange，提问作者Stefan Benz