加了integrity却没拦住篡改脚本,主因是未配crossorigin属性或哈希值非源自线上实际响应体;必须同时设置integrity和crossorigin="anonymous"(公开cdn)或"use-credentials"(鉴权场景),且仅和支持sri校验。

加了 integrity 却没拦住被篡改的脚本?大概率是 crossorigin 没配,或者哈希值根本不是从线上 URL 实际响应体算出来的。
为什么只写 integrity 会静默失效
浏览器看到 integrity 属性后,会强制走 CORS 请求流程——但前提是显式声明 crossorigin。不写、写错值、或服务端没返回对应 CORS 响应头,校验就压根不会启动。
-
crossorigin="anonymous"是绝大多数 CDN 的正确写法(如cdn.jsdelivr.net、code.jquery.com),它发起无凭据请求,要求服务端返回Access-Control-Allow-Origin: * -
crossorigin="use-credentials"仅当你自己的后端要求带 Cookie 加载资源时才用,且必须配套返回Access-Control-Allow-Credentials: true和明确的Access-Control-Allow-Origin(不能是*) - 只写
crossorigin=""在 Chrome/Firefox 中等价于anonymous,但 Firefox 解析更严格,建议统一写成crossorigin="anonymous" - 控制台不会提示“你漏了
crossorigin”,只会安静跳过 SRI,页面白屏时很难定位
哈希值必须从真实 URL 响应体生成
本地下载的 .js 文件、构建产物、甚至复制粘贴的别人家哈希,只要和浏览器实际请求到的内容字节不一致,SRI 就必然失败。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
- CDN 可能返回 gzip 或 Brotli 压缩内容,但浏览器校验的是解压后的明文——用
curl -sL跟随重定向并自动解压,再哈希,行为才一致 - 命令示例:
curl -sL https://cdn.example.com/react.min.js | openssl dgst -sha384 -binary | openssl base64 -A - 注意末尾的
-A:防止base64输出换行符,否则integrity值非法 - 在线生成器(如
srihash.org)底层也是curl,但无法控制重定向链、编码细节或 BOM 头,出问题时难复现
哪些标签支持 SRI,哪些写了也白写
SRI 是 W3C 明确定义的机制,只对两类标签生效:<script></script> 和 <link rel="stylesheet">。其他所有情况,浏览器直接忽略 integrity 属性,不报错也不校验。
-
<img src="" integrity="">:完全忽略,连 warning 都没有 -
<link rel="icon">、<link rel="preload">:不支持,SRI 规范未覆盖 -
document.createElement('script')后手动设置src和integrity:浏览器不校验,只认 HTML 解析阶段的静态标签 -
fetch()、import()、<iframe></iframe>:SRI 机制不介入,需靠 CSP 或其他手段防护
最容易被忽略的一点是:哈希必须绑定「最终响应体」,而这个响应体可能受重定向、压缩、BOM、UA 内容协商等多重影响;哪怕 URL 没变、HTTPS 有效、CDN 可信,一个字节的差异都会让校验彻底失效。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










