vite-plugin-sri-gen

1.4.1 verified Mon Apr 27 auth: no javascript

A Vite plugin that auto-generates Subresource Integrity (SRI) hashes for built assets and injects integrity/crossorigin attributes into HTML output. Current stable version 1.4.1, requires Node ≥18 and Vite ≥4. Released monthly. Key differentiators: supports multiple hash algorithms (sha256, sha384, sha512), optional lazy-loaded chunk integrity via runtime patch, Vite manifest augmentation for SSR/backend-owned HTML, configurable include/exclude patterns, and in-memory HTTP cache. ESM-only, builds on parse5 for HTML parsing. Does not work for most SSR frameworks unless pre-rendering HTML or reading the augmented manifest.

Common errors

error ERR_REQUIRE_ESM: require() of ES Module ... from ... not supported ↓

cause The package is ESM-only and cannot be require()'d.

fix

Change to ESM: set "type": "module" in package.json or use dynamic import().

error TypeError: sriGen is not a function ↓

cause Default import was used when only named export exists (or vice versa).

fix

Use import { sriGen } from 'vite-plugin-sri-gen' or default import sriGen from 'vite-plugin-sri-gen'.

error Error: No HTML files found in output directory. Skipping SRI injection. ↓

cause The plugin expects HTML files in the build output, but none were generated (common in SSR without pre-rendering).

fix

Ensure your build produces HTML files, or enable enableManifest and set build.manifest: true to use the manifest approach.

error Warning: [vite-plugin-sri-gen] Integrity hash mismatch for ... expected ... got ... ↓

cause The resource content changed after the hash was computed (e.g., runtime injection after build).

fix

Ensure that no other plugins modify the resource content after sriGen runs; reorder plugins or disable conflicting transforms.

Warnings

breaking Version 1.2.0 replaced cheerio with parse5. This may break custom HTML transformations if you relied on cheerio-specific behavior. ↓

fix No action needed unless you extended the plugin; the public API is unchanged.

breaking Version 1.3.0 reduced logging verbosity by default; verboseLogging must be explicitly set to true for detailed logs. ↓

fix Set verboseLogging: true in config if you rely on old logging output.

deprecated Using require() to import this package is unsupported because the package is ESM-only. ↓

fix Use dynamic import() or switch to ESM in your project.

gotcha This plugin does not inject SRI into HTML for most SSR frameworks (e.g., SvelteKit, Nuxt) because HTML is not generated at build time. It only works with pre-rendered SSR output. ↓

fix Pre-render your SSR application (e.g., using vite-plugin-ssr pre-rendering) or use the manifest augmentation (enableManifest: true) to attach SRI server-side.

gotcha When using absolute URLs in index.html (e.g., CDN scripts), the plugin may fail to match resources. Fixed in v1.3.2 for main script tags, but other absolute URLs might still be skipped. ↓

fix Update to v1.3.2 or later; for older versions, ensure resources use relative paths.

gotcha If you enable enableManifest but don't also set build.manifest: true in your Vite config, the manifest won't be generated and the plugin will have no effect. ↓

fix Add build: { manifest: true } to your Vite config.

Install

npm install vite-plugin-sri-gen

yarn add vite-plugin-sri-gen

pnpm add vite-plugin-sri-gen

Imports

sriGen

wrong

const sriGen = require('vite-plugin-sri-gen'); const { sriGen } = require('vite-plugin-sri-gen')

correct

import { sriGen } from 'vite-plugin-sri-gen'

ESM-only package; require() will fail. Named export only.

default

wrong

import { default as sriGen } from 'vite-plugin-sri-gen'

correct

import sriGen from 'vite-plugin-sri-gen'

Default export is also available; both named and default work equivalently.

SRIOptions

wrong

import { SRIOptions } from 'vite-plugin-sri-gen' (if types are used at runtime)

correct

import type { SRIOptions } from 'vite-plugin-sri-gen'

TypeScript users should import the type for config objects.

Quickstart

Shows basic setup of vite-plugin-sri-gen with custom algorithms, include/exclude patterns, and manifest enabled.

// vite.config.ts
import { defineConfig } from 'vite';
import { sriGen } from 'vite-plugin-sri-gen';

export default defineConfig({
  plugins: [
    sriGen({
      algorithms: ['sha384', 'sha512'],
      include: [/^\/assets\//],
      exclude: ['**/*.map'],
      verboseLogging: false,
      skipResources: [],
      enableManifest: true,
      handleSSR: false,
      runtimeInjection: false,
    }),
  ],
});