请解释如何使用 Subresource Integrity (SRI) 验证资源的完整性？

推荐答案

<script src="https://example.com/example-framework.js"
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
        crossorigin="anonymous"></script>

在上述代码中，integrity 属性包含了资源的哈希值，浏览器在加载资源时会计算资源的哈希值并与 integrity 属性中的值进行比对。如果两者不匹配，浏览器将不会执行该资源。

本题详细解读

什么是 Subresource Integrity (SRI)？

Subresource Integrity (SRI) 是一种安全特性，允许浏览器验证从外部服务器获取的资源（如脚本或样式表）是否被篡改。通过使用 SRI，开发者可以确保加载的资源与预期的内容完全一致，从而防止恶意代码的注入。

如何使用 SRI？

1. 生成哈希值：首先，你需要为资源生成一个哈希值。可以使用 openssl 或 shasum 等工具来生成。例如：

   openssl dgst -sha384 -binary example-framework.js | openssl base64 -A

   这将生成一个基于 SHA-384 算法的 Base64 编码的哈希值。

2. 添加 integrity 属性：将生成的哈希值添加到资源的 integrity 属性中。例如：

   <script src="https://example.com/example-framework.js"
           integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
           crossorigin="anonymous"></script>

3. crossorigin 属性：为了确保浏览器能够正确验证资源的完整性，通常还需要添加 crossorigin 属性。这个属性告诉浏览器在请求资源时使用 CORS（跨域资源共享）机制。

哈希算法

SRI 支持多种哈希算法，包括 sha256、sha384 和 sha512。通常推荐使用 sha384，因为它在安全性和性能之间提供了良好的平衡。

浏览器支持

大多数现代浏览器都支持 SRI，包括 Chrome、Firefox、Edge 和 Safari。如果浏览器不支持 SRI，资源仍然会被加载，但不会进行完整性验证。

注意事项

• 哈希值更新：如果资源内容发生变化，必须重新生成并更新 integrity 属性中的哈希值。
• 性能影响：SRI 会增加浏览器加载资源时的计算开销，但这种开销通常是可以接受的。

通过使用 SRI，开发者可以有效地防止资源被篡改，从而提高应用的安全性。