什么是 SRI？
SRI（Subresource Integrity，子资源完整性）是一个 Web 标准，可以帮助解决 Web 应用程序如何保证资源（如脚本、样式表、图片等）在不被篡改的情况下被下载和使用的问题。当使用 SRI 时，浏览器会通过哈希值验证下载的资源与页面上引用的资源是否完全一致。如果哈希值不匹配，浏览器将停止下载，从而保证网站信息的安全性和完整性。
SRI 的工作原理非常简单：在引用资源时添加一个哈希值，并使用这个哈希值来验证资源的完整性。如果哈希值不匹配，则意味着文件已经被篡改，这样浏览器会阻止该文件的下载和执行。
如何使用 SRI
使用SRI可以对网站的资源进行保护，特别是对于那些包含机密信息或代表特定机构的信息的取消。下面我们将介绍如何使用 npm 包 sri 保护您的前端资源的完整性。
安装 SRI
要在应用程序中使用 SRI，您需要 npm 包 sri。您可以使用以下命令来安装 sri：
npm install sri
生成哈希值
您需要为每个资源生成哈希值。sri 包提供一个命令行工具，可以轻松为资源生成哈希值。以下是一个示例：
sri hash -a sha512 ./path/to/resource
这将使用 SHA-512 算法为资源生成哈希值。当资源被更新时，需要重新生成哈希值。
在 HTML 中使用 SRI
要在 HTML 中使用 SRI，请在资源 URL 前添加 integrity 属性，并将哈希值添加到属性值中，如下所示：
<script src="https://example.com/example.js" integrity="sha512-Sn9nQuoi6..."></script>
当资源被下载时，浏览器将使用哈希值验证资源的完整性。 如果哈希值不匹配，浏览器将阻止资源的下载和执行。
检查 SRI
要检查引用资源的哈希值是否正确，请使用 web 工具或浏览器开发者工具。在元素审查器中选择要检查的元素，并查看元素的属性。 integrity 属性应包含您提供的哈希值。
总结
使用 SRI 可以确保您的资源不会被篡改或替换，从而实现了对 Web 应用程序的完整性保护。SRI 是一种简单和易于使用的技术，可以帮助保护您的 Web 应用程序和用户的安全。使用 SRI 是一种最佳实践，应用程序开发人员应在开发 Web 应用程序时牢记 SRI 的重要性。
示例代码
在以下示例中，我们为 demo.js 生成 SHA-512 的哈希值，然后将其添加到 index.html 中的脚本引用中。
sri hash -a sha512 demo.js
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ---------- --------------- ------- ------ ------- ------------- --------------------------------------------------------------------------------------------------------------------- ------- -------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f1ee03a403f2923b035c5dd