### [link 加 integrity 后资源被丢弃怎么办](https://www.huociguo.com/article/1545)

**Published:** 2026-09-30T05:31:05

**Author:** 米了

**Excerpt:** SRI 校验链需要三个条件同时成立：integrity、crossorigin=anonymous、服务端 C…

给 link 加上 integrity 之后样式不再加载，控制台只提示校验失败。这不是浏览器报错，而是 SRI 机制在按预期工作：校验不通过时资源被直接丢弃，不会降级加载。要让校验链成立，三个条件必须同时满足。

![显示网络技术内容的电脑屏幕，用于说明外部静态资源的加载校验](https://api.huociguo.com/wp-content/uploads/2026/09/c8.jpg)

校验链断在任何一环，资源都会被丢弃

## 三个必要条件

1.  link 带 integrity 属性，值为 `算法-哈希` 形式，例如 sha384-；
2.  同一标签显式声明 `crossorigin="anonymous"`，缺了这条浏览器不做 CORS 校验，直接判定失败；
3.  服务端对该资源返回 `Access-Control-Allow-Origin` 响应头。

```html
<link rel="stylesheet" href="https://cdn.example.com/app.css"
      integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
      crossorigin="anonymous">
```

## 哈希怎么生成

```bash
openssl dgst -sha384 -binary app.css | openssl base64 -A
```

哈希针对文件的字节内容生成，构建产物每次变更都要重新计算并同步到模板。人工拷贝容易出错，交给构建流程生成更可靠。

## 应急处理顺序

1.  先移除 integrity 属性恢复访问，业务优先；
2.  核对 crossorigin 是否遗漏，这是最常见的一条；
3.  用 curl -I 检查响应头里的 Access-Control-Allow-Origin；
4.  重新生成哈希并回填，确认文件内容与线上一致；
5.  全部通过后把 integrity 加回并观察一个发布周期。

## 两类不适用

-   内容会变的资源。CDN 侧的压缩、合并、注入改写都会让字节变化，哈希随之失效；
-   同源且由自身管道发布的资源。收益有限，还会增加每次发布的维护负担。

SRI 的价值集中在第三方 CDN 与公共库，这类资源不常变且需要防篡改。

**Tags:** link标签, SRI, 资源兜底, 跨域请求, 静态资源

**Categories:** HTML5

---