Rsbuild项目中SubresourceIntegrityPlugin的正确使用方式

在Web开发中，子资源完整性(SRI)是一项重要的安全特性，它通过验证资源的完整性来防止恶意代码注入。Rsbuild作为基于Rspack的构建工具，提供了两种方式来实现SRI功能。

问题背景

开发者在使用Rsbuild时，可能会尝试直接使用Rspack的SubresourceIntegrityPlugin插件来实现SRI功能。然而，这种方式需要额外配置htmlPlugin选项才能正常工作，否则生成的HTML文件中不会包含integrity属性。

推荐解决方案

Rsbuild提供了更简单直接的方式来实现SRI功能：

{
  html: {
    crossorigin: 'use-credentials',
  },
  security: {
    sri: {
      enable: true,
    },
  },
}

这种配置方式会自动处理所有必要的细节，包括：

1. 为所有资源生成哈希值
2. 在HTML中自动添加integrity属性
3. 处理跨域相关属性

实现原理

当启用SRI功能时，构建过程会：

1. 计算每个资源的哈希值(通常使用SHA-256算法)
2. 将哈希值以base64编码形式存储在integrity属性中
3. 浏览器在加载资源时会自动验证哈希值是否匹配

注意事项

1. 确保同时配置crossorigin属性，这对某些跨域场景下的SRI验证是必需的
2. 生产环境才需要启用SRI，开发环境可以保持关闭
3. 如果使用CDN，确保CDN不会修改资源内容，否则会导致SRI验证失败

总结

相比直接使用底层插件，Rsbuild提供的security.sri配置更加简单可靠，开发者无需关心底层实现细节即可获得完整的安全保护。这种设计体现了Rsbuild"约定优于配置"的理念，让开发者能够更专注于业务逻辑而非构建配置。