@wuipkg/vite-plugin-sri

Vite 的 Subresource Integrity 插件，用于在生产构建产物的 HTML 中为外链脚本、样式和 modulepreload 资源写入 sha384 integrity。

来源

本包基于 vite-plugin-sri3 fork 改造，原项目遵循 MIT License。

我们选择 fork 的原因是：上游已经覆盖了 Vite 3 到 Vite 8、skip-sri、public 资源、相对 base 等基础能力，但在项目实际使用的 CDN base 与 legacy 多输出构建场景下还需要更精确的资源解析。

改造内容

• 包名改为 @wuipkg/vite-plugin-sri，发布方式对齐 wuipkg 工作区。
• 移除上游仓库级 CI 和 semantic-release 配置，交由 wuipkg 根仓库统一管理发布。
• 支持绝对 CDN base，例如 https://cdn.example.com/app/。命中当前 base 的资源会映射回本地 bundle 计算 SRI，不会误当作远程资源 fetch。
• 支持 @vitejs/plugin-legacy 这类多轮 generateBundle 输出。插件会缓存前一轮产物，后续 HTML 引用 legacy chunk 时仍能计算正确 integrity。
• 修复带非相对 base 的 public 资源查找，例如 /app/external.js 会按 public/external.js 读取。
• 保留上游已有能力：script、stylesheet、modulepreload 注入，skip-sri 跳过标记，相对路径、父级相对路径、public 资源和真正远程资源处理。

安装

pnpm add -D @wuipkg/vite-plugin-sri

使用

import { defineConfig } from 'vite'
import { sri } from '@wuipkg/vite-plugin-sri'

export default defineConfig({
  plugins: [
    sri(),
  ],
})

插件会在构建阶段处理最终 HTML。若项目里有会改写 JS/CSS 内容的插件，请确保 SRI 在这些插件之后执行；若只是生成 gzip、brotli 等压缩副本，通常应先写入 SRI，再生成压缩文件。

配置

sri({
  ignoreMissingAsset: false,
})

ignoreMissingAsset

类型：boolean

默认值：false

当 HTML 中的资源既不在当前 bundle，也不在 public 目录，且不是可 fetch 的远程资源时，默认会抛错中断构建。设为 true 后会跳过缺失资源。

跳过单个资源

给 script 或 link 标签添加 skip-sri，插件会移除该标记并跳过 integrity 注入。

<script type="module" src="/assets/debug.js" skip-sri></script>
<link rel="stylesheet" href="/assets/debug.css" skip-sri />

CDN Base

import { defineConfig } from 'vite'
import { sri } from '@wuipkg/vite-plugin-sri'

export default defineConfig({
  base: 'https://cdn.example.com/app/',
  plugins: [sri()],
})

构建后的 HTML 可能会出现：

<script type="module" src="https://cdn.example.com/app/assets/index.js"></script>

插件会将该地址识别为本次构建的 assets/index.js，直接使用本地 bundle 内容计算 hash。只有不属于当前 base 的 http(s) 资源才会作为真正远程资源 fetch。

验证

pnpm test
pnpm build

pnpm test:e2e 会运行 Playwright 场景，验证浏览器实际执行时的 SRI 行为。