Alright, 各位观众，欢迎来到今天的“前端安全大作战”特别节目！我是你们的老朋友，BUG终结者。今天我们要聊聊一个让前端开发者头疼，但又不得不面对的问题：Subresource Integrity (SRI) 验证失败。 别担心，我会用最通俗易懂的方式，带你彻底搞懂它，并学会如何优雅地解决它。
开场白：SRI是个啥玩意儿？
首先，我们来了解一下什么是 Subresource Integrity (SRI)。 简单来说，SRI 就像是你给 CDN 上的文件加了一个“防伪标签”。 它可以确保浏览器加载的第三方资源（例如 CDN 上的 JavaScript 库或 CSS 样式表）没有被篡改。 如果文件被篡改，浏览器会拒绝执行，从而保护你的网站免受恶意代码的侵害。
想象一下，你用了一个很流行的 JavaScript 库来增强你的网站功能，但是有一天，黑客攻入了 CDN 服务器，并在该库中注入了恶意代码。 如果你没有使用 SRI，你的用户在访问你的网站时，就会不知不觉地执行这些恶意代码，导致各种安全问题。
而 SRI 就像一道防火墙，可以有效地防止这种情况发生。
SRI 的工作原理
SRI 的工作原理很简单：
-
生成 Hash 值： 在你引用 CDN 上的资源时，你需要计算该文件的 Hash 值。 Hash 值就像是文件的“指纹”，可以唯一地标识一个文件。
-
添加 integrity 属性： 将计算出的 Hash 值添加到 HTML
<link>或<script>标签的integrity属性中。 -
浏览器验证： 当浏览器加载资源时，它会重新计算该文件的 Hash 值，并将其与
integrity属性中的 Hash 值进行比较。 如果两个 Hash 值一致，则表示文件没有被篡改，浏览器会正常执行。 否则，浏览器会拒绝执行该文件，并抛出一个错误。
代码示例：如何使用 SRI
假设你想使用 Bootstrap CDN 上的 CSS 文件，你可以这样做：
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">在这个例子中：
href属性指定了 CSS 文件的 URL。integrity属性包含了文件的 Hash 值。sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z就是 Bootstrap CSS 文件的 SHA-384 Hash 值。crossorigin属性设置为anonymous。 这是因为 CDN 资源通常位于不同的域名下，需要设置crossorigin属性才能允许浏览器访问资源。
对于 JavaScript 文件，你可以这样做：
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>“Subresource Integrity Validation Failure” 错误：罪魁祸首是谁？
现在，我们来聊聊今天的主角：“Subresource Integrity Validation Failure” 错误。 这个错误通常发生在以下几种情况：
-
Hash 值不匹配： 这是最常见的原因。 可能是你复制 Hash 值时出错，或者 CDN 上的文件被修改了，导致 Hash 值发生了变化。
-
文件被篡改： 如果黑客真的篡改了 CDN 上的文件，浏览器会检测到 Hash 值不匹配，并抛出这个错误。
-
网络问题： 在某些情况下，网络问题可能会导致浏览器下载的文件不完整，从而导致 Hash 值不匹配。
-
浏览器兼容性问题： 尽管 SRI 已经被广泛支持，但某些旧版本的浏览器可能不支持 SRI。
-
错误的 CORS 设置： 如果 CDN 服务器没有正确配置 CORS，浏览器可能会拒绝访问资源，从而导致 SRI 验证失败。
应对策略：如何解决 SRI 验证失败？
当你遇到 “Subresource Integrity Validation Failure” 错误时，不要慌！ 按照下面的步骤，一步一步排查问题：
第一步：检查 Hash 值
首先，确保你的 Hash 值是正确的。 你可以从 CDN 供应商的网站上获取正确的 Hash 值，或者使用工具自己计算 Hash 值。
这里推荐几个计算 Hash 值的工具：
-
在线工具： 网上有很多在线的 Hash 值计算器，例如 https://srihash.org/。 你只需要将文件内容复制到工具中，就可以生成各种 Hash 值。
-
命令行工具： 你可以使用命令行工具（例如
openssl或shasum）来计算 Hash 值。-
使用 openssl：
openssl dgst -sha384 文件名 -
使用 shasum：
shasum -a 384 文件名
-
第二步：检查文件是否被篡改
如果 Hash 值是正确的，但仍然出现 SRI 验证失败错误，那么很可能是 CDN 上的文件被篡改了。 这种情况下，你应该立即联系 CDN 供应商，并报告这个问题。
同时，为了安全起见，你应该暂时停止使用该 CDN 资源，并考虑使用其他的 CDN 供应商，或者将资源托管到自己的服务器上。
第三步：检查网络连接
网络问题也可能导致 SRI 验证失败。 确保你的网络连接是正常的，并且可以正常访问 CDN 资源。 你可以尝试刷新页面，或者清除浏览器缓存，看看问题是否解决。
第四步：检查浏览器兼容性
虽然 SRI 已经被广泛支持，但某些旧版本的浏览器可能不支持 SRI。 如果你的用户使用的是旧版本的浏览器，你可以考虑升级浏览器，或者使用 polyfill 来提供 SRI 支持。
第五步：检查 CORS 设置
如果 CDN 服务器没有正确配置 CORS，浏览器可能会拒绝访问资源，从而导致 SRI 验证失败。 确保 CDN 服务器已经正确配置了 CORS，允许你的网站访问资源。
第六步：使用 fallback 方案
为了提高网站的可用性，你可以使用 fallback 方案来处理 SRI 验证失败的情况。 例如，你可以使用 <noscript> 标签来提供一个备用的资源，或者使用 JavaScript 代码来检测 SRI 验证是否成功，并在失败时加载备用资源。
代码示例：使用 fallback 方案
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
<noscript>
<link rel="stylesheet" href="/css/bootstrap.min.css">
</noscript>在这个例子中，如果浏览器无法加载 CDN 上的 Bootstrap CSS 文件（例如，由于 SRI 验证失败），它会加载本地的 bootstrap.min.css 文件。
第七步：监控 SRI 错误
为了及时发现 SRI 验证失败的问题，你可以使用监控工具来监控 SRI 错误。 这样，你就可以在问题发生的第一时间采取行动，保护你的网站安全。
表格总结：SRI 验证失败应对策略
| 问题 | 应对策略 |
|---|---|
| Hash 值不匹配 | 1. 确认 Hash 值是否正确。 2. 如果 CDN 文件更新，更新你的 integrity 属性。 |
| 文件被篡改 | 1. 立即联系 CDN 提供商。 2. 停止使用该 CDN 资源。 3. 考虑使用其他的 CDN 提供商或自托管资源。 |
| 网络问题 | 1. 检查网络连接。 2. 刷新页面。 3. 清除浏览器缓存。 |
| 浏览器兼容性问题 | 1. 升级浏览器。 2. 使用 polyfill 提供 SRI 支持。 |
| CORS 设置错误 | 1. 确保 CDN 服务器正确配置了 CORS，允许你的网站访问资源。 |
| 其他未知原因 | 1. 使用 fallback 方案提供备用资源。 2. 监控 SRI 错误，以便及时发现问题。 |
进阶技巧：生成 SRI Hash 值的工具
除了上面提到的在线工具和命令行工具，还有一些其他的工具可以帮助你生成 SRI Hash 值：
- Webpack 插件： 如果你使用 Webpack 构建你的前端项目，你可以使用
webpack-subresource-integrity插件来自动生成 SRI Hash 值，并将其添加到 HTML 文件中。 - Gulp 插件： 如果你使用 Gulp 构建你的前端项目，你可以使用
gulp-sri-hash插件来自动生成 SRI Hash 值，并将其添加到 HTML 文件中。
这些插件可以大大简化 SRI 的配置过程，提高你的开发效率。
SRI 的局限性：并非万无一失
虽然 SRI 可以有效地防止 CDN 资源被篡改，但它并非万无一失。 例如，如果黑客攻入了你的网站服务器，并修改了 HTML 文件，他们就可以绕过 SRI 的保护。
因此，SRI 只是前端安全防御体系中的一部分，你需要采取其他的安全措施来保护你的网站安全。
总结：SRI 是前端安全的利器
总而言之，Subresource Integrity (SRI) 是一种非常有用的前端安全技术，可以有效地防止 CDN 资源被篡改。 虽然配置 SRI 需要一些工作，但它可以大大提高你的网站安全性。
希望今天的讲座对你有所帮助。 记住，安全无小事，做好前端安全，才能让你的网站更加可靠！
感谢大家的观看，我们下期再见！
友情提示：
- 定期检查你的 SRI 配置，确保 Hash 值是最新的。
- 关注 CDN 供应商的安全公告，及时了解 CDN 资源的安全状况。
- 学习更多前端安全知识，提高你的安全意识。
祝大家编码愉快，永不 BUG！