在当今数字化时代，前端页面资源的安全性已成为至关重要的问题。一旦前端资源遭到篡改，不仅会破坏用户体验，还可能导致用户隐私泄露、数据被盗用，甚至引发更严重的经济损失。因此，确保前端页面资源的完整性和安全性，是前端开发中不可或缺的关键环节，也是保障用户权益、维护平台信誉的必由之路。
解决方案
可以通过SRI一致性校验，来防止前端页面资源被篡改。
SRI 是什么
子资源完整性(SRI)：子资源完整性(Subresource Integrityy，SRI)是允许浏览器检查其获得的资源（例如从CDN获得的）是否被篡改的一项安全特性。它通过验证获取文件的的哈希值是否和你提供的哈希值一样来判断资源是否被篡改。
SRI 如何工作
使用子资源完整性功能的方法是，在任何 <script> 或 <link> 元素的 integrity 属性值中，指定你要告诉浏览器所获取的资源（或文件）的 base64 编码的加密哈希值。
本地生成 SRI 哈希
使用 openssl 在命令行中执行如下命令来生成 SRI 哈希值：
cat FILENAME.js | openssl dgst -sha384 -binary | openssl base64 -A
元素添加 SRI 哈希
<script
src="https://example.com/example-framework.js"
integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
crossorigin="anonymous"
></script>
SRI 一致性被破坏
如果 SRI 一致性校验失败，浏览器会阻止资源加载，并在控制台打印出错误信息。
Failed to find a valid digest in the 'integrity' attribute for resource 'http://***' with computed SHA-384 integrity '***'. The resource has been blocked.
