SRI 原理

SRI（Subresource Integrity，子资源完整性）是一种Web安全机制，主要用于防止被篡改的第三方资源（如JS或CSS文件）被加载到网页上。它允许开发者为加载的外部资源附加一个哈希值，浏览器会在下载资源后验证其内容是否与哈希值匹配。如果不匹配，则资源不会被执行，降低因CDN、中间人攻击等造成的风险。

1. 原理解析

• 哈希校验：开发者根据资源文件（如 script.js）的内容，利用SHA-256、SHA-384、SHA-512等算法生成一个加密哈希值。

• HTML标签添加：在引用外部资源的<script>或<link>标签中，使用integrity属性填写该哈希值。

• 浏览器校验：用户加载网页时，浏览器会下载资源并计算其哈希值，与integrity属性中的值比对。

  • 如果一致，则加载并执行资源；

  • 如果不一致（内容被改动），浏览器拒绝加载并报错；

• 结合CORS：通常还需要添加crossorigin属性，以确保资源能正确校验。

2. 示例说明

假设你要引用CDN上的 jQuery：

<script src="https://cdn.example.com/jquery-3.7.1.min.js"
        integrity="sha384-AbCdEF1234567890xyz..."
        crossorigin="anonymous"></script>

解释：

• src: 资源文件URL。

• integrity: 这是开发者用工具（例如Subresource Integrity Generator）基于原始jquery-3.7.1.min.js生成的哈希值（如sha384-AbCdEF1234567890xyz...）。

• crossorigin="anonymous": 允许跨域请求资源，并配合SRI校验。

工作流程：

1. 浏览器请求js文件。

2. 下载后浏览器自动对其内容进行SHA-384运算。

3. 浏览器将运算结果与integrity值比较。

   • 如果一致，浏览器正常加载并执行jQuery。

   • 如果文件被篡改，哈希不同，浏览器拒绝执行这个js（并在控制台报错）。

3. 常见用途场景

• 引用CDN上的JS、CSS（如jQuery、Bootstrap等）时防止被“下毒”。

• 防止第三方依赖库被中间人攻击或CDN泄漏更改内容。

• 保证生产环境静态资源的文件完整性。

4. 注意事项

• 哈希值要和外部资源内容一一对应，内容一变需重新生成。

• 要正确设置crossorigin属性，推荐用anonymous。

• 并不是所有外部资源都支持（如果远程服务器没有设置CORS头，某些浏览器可能仍会失败）。

总结：
SRI通过校验外部资源的内容哈希值，实现“内容没被篡改才加载”，大大提升Web资源加载的安全性。