CSP 的 script-src 用 hash 为什么还是报错? 设计师树衡 提问于 2026-03-13 15:36:18 阅读 4 安全 我在页面里加了个简单的点击事件,然后根据 Chrome 控制台提示生成了 sha256 hash,但加上 CSP 后还是被拦截,完全搞不懂哪里错了。 我试过用在线工具和 openssl 手动生成 hash,结果都一样,但浏览器就是不认。是不是 hash 的内容要包含某些特定格式? document.getElementById('btn').addEventListener('click', () => { alert('hello'); }); hash 我来解答 赞 1 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 1 条解答 西门云碧 Lv1 这个问题很常见,很多人都在 hash 这儿踩坑。 核心问题在于:你计算 hash 的内容是什么? CSP 的 hash 是针对整个 标签的内容,不是只针对事件处理函数那几行代码。 假设你的 HTML 是这样的: <script> document.getElementById('btn').addEventListener('click', () => { alert('hello'); }); </script> 你需要在计算 hash 时,把这两行都包含进去,包括可能的换行和空格。 正确的计算方式: 用 Chrome 的话,直接在控制台报错信息里点击那个 hash 值,浏览器会自动帮你计算正确的内容。或者用 Node.js 验证: const crypto = require('crypto'); const scriptContent = document.getElementById('btn').addEventListener('click', () => { alert('hello'); });; const hash = crypto.createHash('sha256').update(scriptContent).digest('base64'); console.log("sha256-" + hash); 然后这样配置 CSP: Content-Security-Policy: script-src 'sha256-你计算出来的hash值' 注意几点: 1. CSP 的 hash 必须以 sha256-、sha384- 或 sha512- 开头 2. hash 必须是 Base64 编码,不是十六进制 3. 内容必须完全一致,包括换行、空格、缩进,任何差异都会导致不匹配 如果你用的是 外部脚本,那 hash 方案根本没用,hash 只适用于 inline script。 你可以先在 Chrome 控制台的 Security 标签页看看具体报错的详情,确认是哪个 hash 不匹配。 回复 点赞 2026-03-13 16:06 加载更多 相关推荐
核心问题在于:你计算 hash 的内容是什么?
CSP 的 hash 是针对整个
标签的内容,不是只针对事件处理函数那几行代码。假设你的 HTML 是这样的:
你需要在计算 hash 时,把这两行都包含进去,包括可能的换行和空格。
正确的计算方式:
用 Chrome 的话,直接在控制台报错信息里点击那个 hash 值,浏览器会自动帮你计算正确的内容。或者用 Node.js 验证:
然后这样配置 CSP:
注意几点:
1. CSP 的 hash 必须以
sha256-、sha384-或sha512-开头2. hash 必须是 Base64 编码,不是十六进制
3. 内容必须完全一致,包括换行、空格、缩进,任何差异都会导致不匹配
如果你用的是
外部脚本,那 hash 方案根本没用,hash 只适用于 inline script。你可以先在 Chrome 控制台的 Security 标签页看看具体报错的详情,确认是哪个 hash 不匹配。