跳转到主内容
趣航编程网 - 趣学编程,启航技术之路!

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

CSP识别的hash值需对内联脚本内容(不含
整个字符串哈希——这会导致不匹配。 正确做法:只取
alert(1)
这部分内容(去除首尾
),UTF-8编码后计算SHA-256,再base64编码。例如:
echo -n "alert(1)" | shasum -a 256 | xxd -r -p | base64
输出类似
sha256-qznLcsROx4GAYnkPvH3tkvhUL6Vf9o1IvEOw1mTHlJk=
,这个值才能放进
script-src 'sha256-qznLcsROx4GAYnkPvH3tkvhUL6Vf9o1IvEOw1mTHlJk='
生效。 内联脚本里有变量或模板语法怎么办 只要脚本内容在HTML渲染前就完全确定(即服务端静态生成、非客户端JS拼接),就可以生成哈希。但如果含服务端变量(如
alert(<%= user.name %>)
),哈希必须按最终渲染出的实际JS字符串计算——不同用户、不同上下文产生的哈希可能不同,不能复用。 立即学习 “ 前端免费学习笔记(深入) ”; 容易踩的坑: 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更 下载 前端模板(如
${name}
)未被服务端解析,而是留到浏览器执行,此时哈希失效——CSP校验的是原始HTML里的文本,不是运行时结果 自动格式化工具(Prettier、IDE保存时)给内联脚本加了空格或换行,导致哈希不匹配 使用
document.write
eval
动态注入的脚本,无法用hash白名单,CSP根本不检查那段内容 多个内联脚本如何管理hash白名单 每个
算作不同内容,后者多出
type="text/javascript"
字符串,哈希必然不同 脚本前后有不可见Unicode字符(如零宽空格、BOM)、Windows换行符(
\r\n
)而Linux工具默认用
\n
,也会导致哈希错位 HTTP响应头中的CSP未覆盖全部资源(比如通过
声明,但该标签位置在