首页 > 网页制作 >HTML中如何使用hash实现CSP内联脚本白名单

HTML中如何使用hash实现CSP内联脚本白名单

来源:互联网 2026-04-30 11:36:01

CSP识别的hash值需对内联脚本内容(不含标签)做UTF-8编码后计算SHA-256,再base64编码;例如alert(1)生成sha256-qznLcsROx4GAYnkPvH3tkvhUL6Vf9o1IvEOw1mTHlJk=,填入script-src 'sha256-...'即可生效。 h

CSP识别的hash值需对内联脚本内容(不含标签字符串进行哈希计算。这么做,结果必然是匹配失败的。

长期稳定更新的攒劲资源: >>>点此立即查看<<<

正确的姿势是什么?其实很简单,只取脚本标签内部的内容。也就是说,把首尾的标签去掉,只对alert(1)这部分纯文本下手。接着,将这段文本进行UTF-8编码,计算其SHA-256哈希值,最后再进行base64编码(注意,base64字符串里不能有换行或空格)。

在命令行里,这个过程通常是这样操作的:

echo -n "alert(1)" | shasum -a 256 | xxd -r -p | base64

最终,你会得到一个类似qznLcsROx4GAYnkPvH3tkvhUL6Vf9o1IvEOw1mTHlJk=的字符串。把它放进策略里,完整的格式就是:script-src 'sha256-qznLcsROx4GAYnkPvH3tkvhUL6Vf9o1IvEOw1mTHlJk='。这样,对应的内联脚本才能顺利执行。

内联脚本里有变量或模板语法怎么办

这问题问到了点子上。如果你的内联脚本里包含了服务端变量,比如alert(<%= user.name %>),那么哈希值必须基于最终渲染完成后的、确切的Ja vaScript字符串来计算。这意味着,不同用户、不同会话下生成的脚本内容可能不同,对应的哈希值也就无法复用,必须动态生成。

不过,这里有几个容易踩的“雷区”,需要特别注意:

  • 前端模板陷阱:如果脚本里是类似${name}这样的前端模板语法,它并不会在服务端被解析成最终值,而是原封不动地送到浏览器。CSP校验的正是HTML里的原始文本,而非浏览器执行后的结果,所以哈希必然会失效。
  • 格式化工具“帮倒忙”:像Prettier这类代码格式化工具,或者IDE的自动保存功能,可能会“好心”地给你的内联脚本加上空格或换行符。内容一变,哈希值自然就对不上了。
  • 动态注入的脚本:通过document.writeeval动态生成的脚本,CSP的哈希白名单机制是管不了的。因为CSP在校验时,根本不会去检查这些运行时注入的内容。

说到底,只要脚本内容在HTML送达浏览器之前就已经是确定的、静态的,就可以用哈希。否则,就得考虑其他方案了。

多个内联脚本如何管理hash白名单

当一个页面有多个内联脚本块时,管理起来就需要点技巧了。原则是:一个脚本,一个哈希。在CSP策略里,用空格把这些哈希值分隔开就行,例如:

Content-Security-Policy: script-src 'sha256-A1B2...' 'sha256-C3D4...' 'self'

但别高兴太早,这里藏着几个限制:

  • 长度限制:浏览器对单个CSP响应头的长度是有限制的(通常在1000字符左右)。哈希值一多,很容易超限导致策略被截断。这时候,或许该考虑合并脚本逻辑,或者转向使用nonce方案了。
  • 变更同步:在构建流程中,如果某个脚本的内容发生了哪怕一丁点修改,都必须重新生成对应的哈希,并更新CSP策略。否则,页面上的相关脚本会被全部阻断,而且浏览器控制台通常只报一个笼统的Refused to execute inline script错误,不会告诉你具体是哪条脚本出的问题。
  • 调试与上线:在开发环境,为了方便,可以临时加上'unsafe-inline'来绕过限制。但务必记住,这个指令一旦存在,会使所有哈希规则失效。所以在上线前,必须把它移除。

为什么有时候hash写了还是被拦截

明明哈希值算对了,策略也配了,脚本还是被拦?这种时候,问题往往出在一些HTML解析的细微之处。

  • 属性差异 是两码事。后者的脚本内容实际上包含了type="text/ja vascript"这个字符串,计算哈希时自然得到不同的结果。
  • 不可见字符:脚本前后混进了零宽空格、BOM(字节顺序标记),或者Windows换行符(\r\n)与Linux工具默认的换行符(\n)不匹配,都会导致哈希值“失之毫厘,谬以千里”。
  • 策略声明位置:如果你是通过标签来声明CSP,并且这个标签放在了