HTML中使用Subresource Integrity校验CDN资源完整性的方法-html教程-PHP中文网

sri校验不生效的首要原因是未配置crossorigin属性，必须同时设置integrity和crossorigin（anonymous或use-credentials），否则浏览器静默跳过校验；哈希须基于目标url实际响应体计算，仅script和link[rel=stylesheet]支持。

html中使用subresource integrity校验cdn资源完整性的方法

integrity加了但校验不生效？先看crossorigin有没有配

浏览器看到 integrity 属性后，会强制走 CORS 请求流程。如果没写 crossorigin，或者写了但值不对，校验就根本不会启动——不是报错，是静默跳过。

必须同时存在 integrity 和 crossorigin，缺一不可：

crossorigin="anonymous"：适用于公开 CDN（如 cdn.jsdelivr.net、code.jquery.com），不带 Cookie 发起请求
crossorigin="use-credentials"：仅当你自己的后端要求鉴权访问静态资源时才用，且后端必须返回 Access-Control-Allow-Credentials: true 和明确的 Access-Control-Allow-Origin（不能是 *）

控制台不会提示“你漏了 crossorigin”，只会安静地忽略 integrity。页面白屏或功能异常时，先检查这个。

哈希值必须从真实 URL 响应体计算，别用本地文件

CDN 返回的内容可能和你本地下载的文件不一致：gzip 压缩、BOM 头、重定向后的最终响应、甚至 CDN 缓存策略导致的编码差异，都会让哈希对不上。

推荐用这条命令生成哈希（确保行为与浏览器一致）：

curl -sL https://cdn.example.com/jquery.min.js | openssl dgst -sha384 -binary | openssl base64 -A

关键点：

-sL：静默 + 跟随重定向，拿到浏览器实际加载的最终响应体
openssl dgst -sha384 -binary：对解压后的明文做哈希，和浏览器行为一致
在线生成器（如 srihash.org）底层也是 curl，但无法控制重定向和编码细节，出问题更难排查

只支持 script 和 link[rel=stylesheet]，其他标签加了也无效

integrity 不是通用属性。目前只有两个地方真正起作用：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

<script src="..." integrity="..." crossorigin="..."></script>
<link rel="stylesheet" href="..." integrity="..." crossorigin="...">

以下写法全是徒劳：

<img src="..." integrity="...">（不支持）
<link rel="icon" href="..." integrity="...">（不支持）
<iframe src="..." integrity="..."></iframe>（不支持）

浏览器遇到不支持的标签上的 integrity，直接忽略，不报错也不校验。

多个哈希怎么写？空格分隔，算法前缀不能少

integrity 值可以包含多个哈希，用空格分开，只要匹配任意一个就算通过。常见写法：

integrity="sha256-xxx sha384-yyy sha512-zzz"

注意：

每个哈希必须带算法前缀（sha256-、sha384-、sha512-），短横不能省
前缀和 Base64 值之间**不能有空格**，但不同哈希之间**必须用空格分隔**
浏览器按顺序尝试，一旦匹配就停止；不匹配全部才拒绝加载

多哈希适合迁移期：比如旧版用 SHA-256，新版升级到 SHA-384，可以两个都写上，平滑过渡。

最容易被忽略的其实是「浏览器对响应体的处理逻辑」：它默认解压 gzip、去除 BOM、按实际编码读取字节流。你算哈希时如果绕过这层，哪怕只差一个字节，校验就失败——而且失败时控制台错误信息非常简略：Failed to find a valid digest in the 'integrity' attribute. 你得自己反向确认 URL、编码、重定向链、CORS 配置，缺一不可。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！