vite-plugin-sri3

2.0.0 verified Mon Apr 27 auth: no javascript

vite-plugin-sri3 (v2.0.0) is a zero-dependency Vite plugin that automatically adds Subresource Integrity (SRI) hashes to script and link tags in your built HTML. It supports Vite 3 through 8, Node >=18, and ships TypeScript types. Unlike its predecessors (rollup-plugin-sri and @small-tech/vite-plugin-sri), this plugin works correctly with Vite 4/5+ and offers features like ignoreMissingAsset for legacy chunk compatibility and a skip-sri attribute to exclude specific tags. It is actively maintained with a changelog and comprehensive test coverage including unit tests, end-to-end Playwright tests for tamper detection, and integration fixtures ensuring deterministic sha384 hashes.

Common errors

error ERR_REQUIRE_ESM ↓

cause Using CommonJS require() to import an ESM-only package.

fix

Replace require('vite-plugin-sri3') with import { sri } from 'vite-plugin-sri3' in your vite.config.(js|ts|mjs|mts) file.

error TypeError: sri is not a function ↓

cause Default import used instead of named import.

fix

Change import sri from 'vite-plugin-sri3' to import { sri } from 'vite-plugin-sri3'.

error Failed to resolve plugin: vite-plugin-sri3 ↓

cause Package not installed or wrong Vite version (e.g., Vite 2 unsupported).

fix

Run npm i -D vite-plugin-sri3 and ensure Vite >=3 is installed.

error SRI hash mismatch: expected sha384-... but got sha384-... ↓

cause Asset has been tampered with after build or file content changed without rebuild.

fix

Rebuild the project; if issue persists, verify no other plugins modify assets after sri() runs.

Warnings

gotcha Plugin ordering matters: sri() should be placed at the end of the plugins array to capture final asset content, unless you use vite-plugin-compression2, in which case sri() should come before it. ↓

fix Reorder plugins: usually list sri() last. If using compression2, list sri() before it.

gotcha ignoreMissingAsset option is required when using @vitejs/plugin-legacy, as legacy chunks may be missed. ↓

fix Enable sri({ ignoreMissingAsset: true }) when using @vitejs/plugin-legacy.

deprecated All versions are ESM-only; CommonJS require() fails with ERR_REQUIRE_ESM. ↓

fix Use import { sri } from 'vite-plugin-sri3' instead of require().

gotcha The skip-sri attribute must be added directly to the <script> or <link> tag in your HTML, not to the plugin config. ↓

fix Add skip-sri attribute to specific tags to exclude them from integrity injection.

breaking Minimum Vite version is now 3 (was undefined in earlier unpublished versions). Node requirement is >=18. ↓

fix Upgrade Vite >=3 and Node >=18.

Install

npm install vite-plugin-sri3

yarn add vite-plugin-sri3

pnpm add vite-plugin-sri3

Imports

sri
wrong
```
const sri = require('vite-plugin-sri3')
```
correct
```
import { sri } from 'vite-plugin-sri3'
```
ESM-only; CommonJS require() will fail. Package has no default export.

sri (React/Vue component approach)

wrong

import sri from 'vite-plugin-sri3'

correct

// In vite.config.ts
import { sri } from 'vite-plugin-sri3'

Named export only; default import is undefined.

SRI options type
```
import { SRIOptions } from 'vite-plugin-sri3'
```
TypeScript users can import SRIOptions for type checks; it is re-exported from the package.

Quickstart

Basic setup: import the named `sri` export, add it to your Vite plugins list, and build to get SRI hashes injected into HTML tags.

// vite.config.ts
import { defineConfig } from 'vite'
import { sri } from 'vite-plugin-sri3'

export default defineConfig({
  plugins: [
    // Place at the end to ensure final asset content is captured
    // If using vite-plugin-compression2, place sri() before it.
    sri({ ignoreMissingAsset: false }),
  ],
})

// Build your project, and the generated HTML will have integrity attributes:
// <script type="module" src="/assets/index-abc123.js" integrity="sha384-..."></script>