integrity属性不生效主因是未配crossorigin="anonymous",浏览器仅在CORS模式下校验哈希,否则静默跳过;哈希必须基于真实CDN响应体生成,且仅script和link[rel=stylesheet]支持。

integrity 属性不生效,八成是没配 crossorigin="anonymous"
浏览器只在 CORS 模式下才读取响应体来计算哈希,否则直接跳过校验,且控制台零提示。单独写 integrity 等于白加。
必须显式加上 crossorigin="anonymous",写成 crossorigin="true"、crossorigin(无值)、或漏掉,都会导致校验静默失效。
-
type="module"脚本默认走 CORS,所以可省略crossorigin;但普通<script></script>必须手动加 - 若 CDN 不返回
Access-Control-Allow-Origin: *(比如某些私有镜像),加了crossorigin反而会让请求失败——这时得换 CDN 或加代理补头 - 本地用
file://打开页面时,integrity全部被禁用,必须走http://localhost或 HTTPS 环境测试
哈希值必须从真实 CDN 响应体生成,不是本地文件
本地 npm install 下来的 vue.global.js 和 CDN 实际返回的内容,哪怕只差一个 BOM 字节或换行符,哈希就完全不匹配。
最可靠方式是用命令行直取 CDN URL 的解压后字节:
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记(深入)”;
curl -sL https://cdn.jsdelivr.net/npm/vue@3.4.21/dist/vue.global.js | openssl dgst -sha384 -binary | openssl base64 -A
- 必须加
-sL:静默 + 跟重定向,否则可能哈希的是 302 响应体 - 不用额外解压参数:
curl默认自动处理 gzip/Brotli,返回的就是浏览器实际收到的解压后字节 - 算法前缀必须小写且带短横:
sha384-✅,SHA384-❌,sha384:❌ - 哈希值是 Base64 编码,不是 hex;多值用空格分隔:
integrity="sha256-abc sha384-def"
常见报错现象和对应排查点
看到 Failed to find a valid digest in the 'integrity' attribute,不代表 CDN 被劫持,而是校验流程本身出错了。
- DOM 中该
<script></script>标签是否真有crossorigin="anonymous"?别信编辑器高亮或构建后模板变量没展开 - Network 面板里点开 JS 请求 → Headers → Response Headers,确认含
access-control-allow-origin: * - 构建流程中若自动注入 runtime chunk 或动态拼接
<script></script>标签,这些标签往往漏掉integrity,得单独处理 - 真正被劫持时,你看到的是
The resource <url> was blocked because integrity check failed—— 这才是校验触发且不匹配的明确信号
integrity 只校验字节一致性,不解决所有问题
它防的是传输过程中内容被篡改,不是防版本漂移、不是防服务端被黑、也不是防 script 标签被动态注入。
- CDN 返回的内容变了(比如自动升级 minor 版本),哈希就不匹配,脚本加载失败——所以必须锁定具体版本号(如
@3.4.21) - 它对
<img alt="如何在 HTML 中通过 script 标签的 integrity 属性防止 CDN 资源被劫持篡改" >、<iframe></iframe>、<source></source>等标签无效,只支持<script></script>和<link rel="stylesheet"> - 配合 CSP 才完整:
script-src 'self' https://cdn.example.com+require-trusted-types-for 'script'+integrity形成纵深防御 - 真正难的不是加属性,而是确保每次上线的哈希都绑定到那个精确字节流——构建工具差异、CDN 压缩策略、BOM 插入、甚至 Node.js 版本导致的 base64 编码微小偏差,都会让哈希漂移


















