为jquery.inputmask.min.js配置CSP以允许内联事件处理程序

我完全懂你现在的困扰——想靠更安全的CSP策略（不用风险极高的'unsafe-inline'）来放行jquery.inputmask.min.js的内联事件处理，但Chrome不给正确的哈希值，第三方工具生成的也不生效。下面是一步步帮你解决的方法：

为什么第三方工具的哈希没用？ #

你大概率踩了个常见坑：计算了整个脚本文件的哈希，但'unsafe-hashed-attributes'需要的是具体内联事件代码片段的哈希。比如如果inputmask动态给元素加了oninput="inputmaskHandler()"，你要计算的是inputmaskHandler()这段代码的哈希，而非整个min.js文件的哈希。

让Chrome给出准确的哈希值 #

Chrome的错误提示有时候会截断哈希，但你可以通过这两个方法拿到完整值：

• 用DevTools的Security面板: 打开DevTools → 切换到「Security」标签 → 找到「Content Security Policy」板块 → 触发内联事件执行后，查看「Violations」里的详细报告，里面会有完整的违规代码和对应的哈希。
• 临时启用report-sample: 把你的CSP临时改成script-src 'self' 'unsafe-inline' 'report-sample'，触发错误后，控制台会显示完整的内联代码片段和它的哈希，直接复制这个值即可。

正确配置CSP #

拿到准确的哈希后，把它和'unsafe-hashed-attributes'一起加到script-src里，示例如下：

Content-Security-Policy: script-src 'self' 'unsafe-hashed-attributes' 'sha256-xxxxxxxxx...';

注意：'unsafe-hashed-attributes'是Chrome 83及以上版本才支持的指令，要确保你的目标浏览器版本符合要求。

替代方案：彻底规避内联事件 #

如果上面的方法还是有问题，你可以考虑绕过内联事件逻辑：

• 如果你自己调用inputmask，尽量用标准事件监听替代内联绑定，比如用$(selector).on('input', function() { ... })代替生成内联oninput属性。
• 如果你无法修改inputmask源码，可以写一个简单的包装器，拦截它添加内联事件的逻辑，把内联属性转换成事件监听。

这样配置后，应该就能在不使用'unsafe-inline'的情况下，让inputmask的内联事件正常执行了。

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