Add Subresource Integrity (SRI) hashes to your Vite build HTML output automatically.

vite-plugin-sri-gen

- Adds integrity attribute to script tags, stylesheet links, and modulepreload links in index.html
- Works out of the box in production builds
- Optionally injects rel="modulepreload" with integrity for lazy-loaded chunks
- Optionally injects a tiny CSP-safe runtime that adds integrity/crossorigin to dynamically inserted \/\
- Build-only by design (no dev server SRI)
- Supports SPA, MPA, and prerendered SSR/SSG HTML (logs a warning when a pure SSR server emits no HTML)
- Fast and network-friendly: in-memory HTTP cache with in-flight dedupe; optional fetch timeouts
- ESM-only, Node 18+ (uses global fetch)

> [!IMPORTANT]
> Unfortunately, this plugin is not compatible with most SSR (server-side rendering) projects, including but not limited to those using Svelte.
> This plugin works by hooking into the Vite and Rollup events at build time to calculate integrity hashes and apply them to the HTML elements. Because SSR projects typically do not generate markup at build time, this plugin is effectively a no-op when implemented in most SSR projects.
>
> The exception to this is when an SSR project utilizes pre-rendering; explicitly building, bundling, and outputting prerendered HTML during the build. Vite plugins such as vite-plugin-ssr support this, but this is typically not the case for most SSR projects.

Table of Contents

- Install
- Quick Start
- Dev Mode
- Configuration
- Skipping Resources
- Lazy-loaded Chunks and Dynamic Tags
- Runtime Patching
- Compatibility
- Examples
- Contributing
- Security
- License

Install

``sh
npm i -D vite-plugin-sri-gen
`

Quick start

vite.config.ts / vite.config.js:

`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)
}),
],
};
`

During build, the plugin updates index.html in memory and adds an integrity attribute to scripts, stylesheets, and modulepreload links. If crossorigin is provided, it is also added.

Advanced (optional): you can enable automatic rel="modulepreload" injection for lazy-loaded chunks and a CSP-safe runtime patch that sets integrity on dynamically inserted tags. See the Configuration section.

TypeScript/ESM notes:

- The package ships ESM only with types. Import as import sri from 'vite-plugin-sri-gen'.

Dev mode

SRI is intentionally disabled during the Vite dev server. Use this plugin for build output only.

Why dev SRI doesn’t help:

- HMR bypasses SRI entirely: code updates are delivered over WebSocket and inlined into the page, not via normal script/link fetches that support integrity checks.
- Non-stable module URLs: the dev server rewrites ESM imports and appends timestamps/query params. Content changes frequently during edits, so any integrity value would break on each save.
- No transitive guarantees: browsers don’t enforce SRI for modules imported by a script with integrity. Each module request would need its own integrity, which the browser won’t verify in dev.
- Partial coverage is misleading: hashing only top-level tags (or some assets) provides a false sense of security while leaving the rest of the module graph and HMR updates unverified.

Conclusion: SRI is enforced only for build outputs, where assets are content-addressed and stable. That’s when browsers can reliably validate integrity and you get real protection.

Configuration

`ts
type SriPluginOptions = {
algorithm?: "sha256" | "sha384" | "sha512"; // default: 'sha384'
crossorigin?: "anonymous" | "use-credentials"; // default: undefined
fetchCache?: boolean; // default: true (in-memory cache + in-flight dedupe for remote assets)
fetchTimeoutMs?: number; // default: 5000 (5 seconds). Abort remote fetches after N ms, 0 to disable timeout
preloadDynamicChunks?: boolean; // default: true. Inject rel="modulepreload" with integrity for discovered lazy chunks
runtimePatchDynamicLinks?: boolean; // default: true. Inject a tiny runtime that adds integrity to dynamically created