Getting Started
Install
sh
npm i -D vite-plugin-sri-genQuick Start
The minimal configuration — add the plugin and you're done:
ts
// vite.config.ts
import sri from 'vite-plugin-sri-gen'
export default {
plugins: [sri()],
}All options have sensible defaults. When you need to tune things, here's the full annotated form:
ts
// vite.config.ts
import sri from 'vite-plugin-sri-gen'
export default {
plugins: [
sri({
algorithm: 'sha384', // 'sha256' | 'sha384' | 'sha512' (default: 'sha384')
crossorigin: 'anonymous', // 'anonymous' | 'use-credentials' | undefined
fetchCache: true, // cache remote fetches in-memory and dedupe concurrent requests (default: true)
fetchTimeoutMs: 5000, // abort remote fetches after N ms; 0 disables timeout (default: 5000)
skipResources: [], // skip SRI for resources matching these patterns (default: [])
verboseLogging: true, // show all info-level build logs (default: false)
}),
],
}See Options for the full reference, including preloadDynamicChunks and runtimePatchDynamicLinks.
What You Get
Running vite build with this plugin produces HTML where every relevant tag carries a computed integrity hash:
- Scripts, stylesheets, and modulepreload links already present in your HTML get
integrity(andcrossorigin, if configured) added automatically. See Coverage Strategies. - import map integrity — an injected
<script type="importmap">declares hashes for every emitted JS module, giving supported modern browsers native SRI enforcement over both static and dynamic module imports. See Import Map Integrity. - Modulepreload injection for lazy chunks — the plugin scans Rollup output for dynamically imported chunks and injects
<link rel="modulepreload" integrity=...>links into each HTML file, so lazy chunks are preloaded with verified hashes. See Coverage Strategies. - CSP-safe runtime patching of dynamic tags — a tiny runtime prepended to entry chunks intercepts dynamically created
<script>and<link>elements and adds the appropriateintegrityandcrossoriginattributes before the browser makes the request. See Runtime Patching. - Vite manifest augmentation — when
build.manifest: trueis set, the plugin addsintegrityandcssIntegrityfields to each manifest entry so backends that own HTML generation can attach integrity without re-hashing the files. See Backend-Owned HTML (Manifest).
Requirements & Compatibility
| Project type | Status |
|---|---|
| SPA | Supported — generateBundle processes the emitted HTML file |
| MPA | Supported — generateBundle scans all emitted .html files |
| Prerendered SSG | Supported — any .html files emitted during the build are processed |
| Pure SSR (no HTML emitted) | Manifest only — see SSR, SSG & Prerendering |
Additional requirements:
- Node ≥ 18 — the plugin uses the global
fetchAPI introduced in Node 18. - ESM-only — import with
import sri from 'vite-plugin-sri-gen'. CommonJSrequire()is not supported. - Vite ≥ 4 — declared as a peer dependency; Vite 5 and 6 are also supported.
- Build-only — SRI is intentionally disabled during
vite dev. See Dev Mode for why.
Next Steps
- What is Subresource Integrity? — the security background behind this plugin
- Options — every configuration option explained
- Limitations — known edge cases and constraints