如何在CSP中用'unsafe-hashes'允许第三方库内联事件处理器执行？

核心问题分析 #

报错提示违反script-src-attr指令，说明当前CSP配置中，内联事件处理器（如onclick、onkeyup这类）的权限由script-src-attr单独控制，而非script-src。你之前仅在script-src中添加了'unsafe-hashes'和哈希值，但未对应配置script-src-attr，导致内联事件仍被拦截。

具体解决方案 #

1. 确认哈希值的正确性 #

首先要确保你计算的哈希是内联事件处理器的完整代码内容的哈希，而非整个脚本文件的哈希。比如第三方库的内联事件是onkeyup="maskInput(event)"，你需要计算字符串maskInput(event)的sha256哈希，而非maskedinput.js文件的哈希。

快速获取正确哈希的方法：

• 触发报错后，Chrome控制台的错误信息会直接给出该内联代码对应的正确哈希值，直接复制使用即可，避免手动计算出错。

2. 调整CSP配置 #

在web.config的CSP规则中，同时配置script-src和script-src-attr，将'unsafe-hashes'和正确的哈希值添加到script-src-attr中：

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Content-Security-Policy" value="script-src 'self' 'unsafe-hashes' 'sha256-TS+Ok6crNR4qdKYT6T5jwMHjsPdCzbg7dmT0eWCSN20='; script-src-attr 'unsafe-hashes' 'sha256-TS+Ok6crNR4qdKYT6T5jwMHjsPdCzbg7dmT0eWCSN20=';" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

注意：'unsafe-hashes'必须和哈希值配合使用，它的作用是允许通过哈希放行指定内联事件，而非直接允许所有内联事件。

3. 备选方案：替换或修改第三方库 #

如果配置哈希后仍有问题，或不想依赖'unsafe-hashes'，可以：

• 替换为不使用内联事件处理器的同类库；
• 手动修改库的代码，将内联事件改为通过addEventListener绑定的方式，完全符合script-src 'self'的规则，无需额外unsafe配置。

验证配置 #

修改web.config后重启应用，打开Chrome开发者工具控制台，确认无CSP相关报错，同时测试第三方库功能是否正常运行。

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