让你的 Web 应用刀枪不入：Web 页面子资源完整性校验指南
2023-10-17 05:26:01
Web 应用程序无处不在，它们已成为我们日常生活不可或缺的一部分。随着 Web 应用程序的激增，它们也成为网络攻击者的目标。一种常见的攻击媒介是通过在浏览器加载的页面中注入恶意脚本或样式。
为了应对这种威胁，Web 标准引入了子资源完整性（SRI）校验机制。SRI 是一种安全措施，允许网站所有者指定特定资源（如 JavaScript 文件或 CSS 文件）的预期散列值。浏览器在加载资源时会验证其完整性，如果资源的实际散列值与预期值不匹配，则浏览器会阻止加载该资源。
本指南将详细介绍如何使用 SRI 保护你的 Web 应用程序。我们将介绍 SRI 的工作原理、如何在你的应用程序中实施 SRI，以及 SRI 的好处和局限性。
SRI 如何工作？
SRI 通过在 HTTP 标头中包含 integrity 属性来工作。integrity 属性指定资源的预期散列值。浏览器在加载资源时，会计算资源的实际散列值，并将其与预期散列值进行比较。如果散列值匹配，则浏览器会加载该资源。如果不匹配，浏览器会阻止加载该资源并显示错误消息。
散列函数
SRI 支持多种散列函数，包括 SHA-256、SHA-384 和 SHA-512。建议使用 SHA-256，因为它提供了良好的安全性和性能平衡。
哈希值计算
散列值是通过对资源的内容应用散列函数来计算的。散列函数将任意长度的输入转换为固定长度的输出。相同的输入总是产生相同的散列值，而不同的输入极不可能产生相同的散列值。
在应用程序中实施 SRI
在应用程序中实施 SRI 有两种主要方法：
- 直接在 HTML 中添加 integrity 属性
<script src="script.js" integrity="sha256-1234567890abcdef1234567890abcdef"></script>
- 使用资源加载器库
资源加载器库可以简化 SRI 的实施。例如，你可以使用以下代码将 SRI 应用于所有 JavaScript 文件：
import {createScriptLoader} from 'sri-loader';
const loader = createScriptLoader({
integrity: 'sha256-1234567890abcdef1234567890abcdef'
});
loader.load('script.js');
SRI 的好处
使用 SRI 有许多好处，包括：
- 提高安全性 ：SRI 可以防止恶意脚本或样式注入到你的应用程序中。
- 保护内容完整性 ：SRI 确保加载的资源与预期的一致。
- 减轻供应链攻击 ：SRI 可以防止通过第三方库或 CDN 注入恶意代码。
- 提高性能 ：浏览器可以并行加载具有 SRI 的资源，从而提高性能。
SRI 的局限性
虽然 SRI 是一种强大的安全措施，但它也有一些局限性：
- 需要额外的维护 ：每次资源更改时，都需要更新 SRI 散列值。
- 可能会阻止合法资源 ：如果资源被合法修改，但散列值更改，则 SRI 可能会阻止该资源加载。
- 绕过可能 ：虽然 SRI 可以防止大多数恶意代码注入，但它并不是万无一失的。熟练的攻击者可能会找到绕过 SRI 的方法。
结论
SRI 是一种强大的安全措施，可以帮助保护你的 Web 应用程序免受恶意脚本和样式注入攻击。虽然它有一些局限性，但好处远远大于这些局限性。通过在你的应用程序中实施 SRI，你可以提高安全性、保护内容完整性并减轻供应链攻击。
附录
以下是一些额外的资源，可以帮助你了解更多有关 SRI 的信息：
