Skip to content

Getting Started

Install

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

Quick 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 (and crossorigin, 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 appropriate integrity and crossorigin attributes before the browser makes the request. See Runtime Patching.
  • Vite manifest augmentation — when build.manifest: true is set, the plugin adds integrity and cssIntegrity fields 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 typeStatus
SPASupported — generateBundle processes the emitted HTML file
MPASupported — generateBundle scans all emitted .html files
Prerendered SSGSupported — 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 fetch API introduced in Node 18.
  • ESM-only — import with import sri from 'vite-plugin-sri-gen'. CommonJS require() 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

Released under the MIT License.