HTML怎么做SRI校验_html Subresource Integrity校验方法精选

SRI不是加integrity就自动生效的安全开关，必须同时配置integrity和crossorigin属性，否则校验静默失效；哈希值须基于目标URL实际响应体计算，仅script和link[rel=stylesheet]支持SRI。

直接给结论：SRI 不是加个 integrity 属性就自动生效的「安全开关」，漏写 crossorigin、用本地文件算哈希、或 CDN 返回非标准响应体，都会让校验静默失效——页面白屏时你甚至看不到错误提示。

为什么加了 integrity 却没报错也没拦截？

最常见原因是没配 crossorigin。浏览器看到 integrity 后会强制走 CORS 请求，但若资源服务器没返回 Access-Control-Allow-Origin，或你没显式声明 crossorigin，浏览器就拿不到完整响应体，哈希校验根本不会触发，integrity 被直接忽略。

• 必须同时存在 integrity 和 crossorigin，缺一不可
• crossorigin="anonymous" 适用于公开 CDN（如 cdn.jsdelivr.net、code.jquery.com）
• crossorigin="use-credentials" 仅当你自己的后端要求登录态访问静态资源时才用，且后端必须返回 Access-Control-Allow-Credentials: true 和明确的 Access-Control-Allow-Origin（不能是 *）
• 控制台不会警告“crossorigin 缺失”，只会安静跳过校验

哈希值该从哪来？别用本地文件算

哈希必须基于目标 URL 实际返回的响应体计算，不是你本地下载的 .js 文件，也不是 HTML 源码里的内容。CDN 可能返回 gzip 压缩后的内容、带 BOM 的 UTF-8、或重定向后的最终资源——这些都会导致哈希不匹配。

• 推荐命令：curl -sL https://cdn.example.com/jquery.min.js | openssl dgst -sha384 -binary | openssl base64 -A
• 加 -sL 确保跟随重定向并静默输出；openssl 默认对解压后的内容做哈希（和浏览器行为一致）
• 在线生成器（如 https://www.srihash.org/）本质也是 curl + 哈希，但无法控制重定向和编码细节，出问题时难排查
• 如果资源启用了 Brotli 压缩，curl 默认不处理，但浏览器校验的是解压后明文，所以仍用上述命令即可

哪些标签支持 SRI？哪些不支持？

SRI 只作用于 <script> 和 <link rel="stylesheet"> 这两类标签。其他所有加载方式都不受保护。

立即学习“前端免费学习笔记（深入）”；

• fetch()、XMLHttpRequest、import() 动态导入：完全不识别 integrity
• document.createElement('script') 并设置 src：即使手动加 integrity 属性，浏览器也不校验
• <iframe>、<img>、<video>：不支持，SRI 规范未覆盖
• 校验失败时，脚本/样式表被丢弃，onerror 不触发，控制台只报模糊错误：Failed to find a valid digest in the 'integrity' attribute，需逐个检查含 integrity 的标签

最容易被忽略的点：多个 <script> 都带 integrity 时，只要其中一个校验失败，对应脚本就彻底消失，且没有 fallback 机制。线上环境务必用真实 URL + curl 验证哈希，别信本地文件或缓存副本。