webpack-subresource-integrity

5.2.0-rc.1 verified Sat Apr 25 auth: no javascript

Webpack plugin for enabling Subresource Integrity (SRI) to protect against compromised CDN resources. Current stable version is 5.1.0, with release candidate 5.2.0-rc.1 available. The plugin supports Webpack 5.12+ and html-webpack-plugin 5+, and now provides an ES module distribution alongside CommonJS. Key differentiators include integration with html-webpack-plugin for automatic integrity injection, lazy hash loading option for larger projects, and TypeScript type definitions.

Common errors

error TypeError: SubresourceIntegrityPlugin is not a constructor ↓

cause Using default import instead of named import in v5.

fix

Replace 'const SubresourceIntegrityPlugin = require("webpack-subresource-integrity")' with 'const { SubresourceIntegrityPlugin } = require("webpack-subresource-integrity")'.

error Error: No html-webpack-plugin, can't inject integrity attributes. ↓

cause Missing or incompatible version of html-webpack-plugin.

fix

Install html-webpack-plugin >=5.0.0-beta.1 and add it to webpack plugins.

error Error: Asset '...' has no integrity hash. ↓

cause The asset is not a JavaScript or CSS file, or it's an external resource not processed by webpack.

fix

Ensure all assets are processed by webpack loaders, or exclude non-SRI assets using plugin options.

error Webpack build fails with 'Cannot read property 'hooks' of undefined' ↓

cause Using plugin with Webpack 4 or older version of Webpack 5.

fix

Upgrade to Webpack >=5.12.0 and html-webpack-plugin >=5.0.0-beta.1.

Warnings

breaking v5 drops default export; use named export SubresourceIntegrityPlugin instead. ↓

fix Change import from default to named import: import { SubresourceIntegrityPlugin } from 'webpack-subresource-integrity'.

gotcha The 'enabled' option now defaults to 'auto', which disables the plugin in development mode. If you explicitly set enabled: true, it will run in dev mode and may cause unexpected behavior. ↓

fix Use enabled: 'auto' (default) or omit the option to avoid issues in development.

deprecated Previous versions (v1) used a default export and supported Webpack 4. Migration to v5 requires updating Webpack and html-webpack-plugin peer dependencies. ↓

fix Upgrade to v5 and follow migration guide in MIGRATE-v1-to-v5.md.

gotcha If an asset's integrity cannot be determined (e.g., external resources not processed by webpack), the plugin emits an error since v5. Previously it only warned. ↓

fix Ensure all assets are processed by webpack or handle errors appropriately.

breaking Plugin now requires Node >=12 and Webpack >=5.12.0. ↓

fix Upgrade to supported versions.

gotcha Lazy hash loading (hashLoading: 'lazy') can cause hash duplication. Ensure it's suitable for your project's chunk structure. ↓

fix Test with your project; if hash duplication is not acceptable, use default hash loading.

Install

npm install webpack-subresource-integrity

yarn add webpack-subresource-integrity

pnpm add webpack-subresource-integrity

Imports

SubresourceIntegrityPlugin
wrong
```
const SubresourceIntegrityPlugin = require('webpack-subresource-integrity').default
```
correct
```
import { SubresourceIntegrityPlugin } from 'webpack-subresource-integrity'
```
Since v5, only named export is available; default export removed. For CommonJS, use const { SubresourceIntegrityPlugin } = require('webpack-subresource-integrity').

SubresourceIntegrityPlugin

wrong

const SubresourceIntegrityPlugin = require('webpack-subresource-integrity')

correct

const { SubresourceIntegrityPlugin } = require('webpack-subresource-integrity')

CommonJS: destructure the named export; direct require returns an object with SubresourceIntegrityPlugin property.

SubresourceIntegrityPlugin

wrong

new SubresourceIntegrityPlugin({ hashFuncNames: ['sha512'], enabled: true })

correct

new SubresourceIntegrityPlugin({ hashFuncNames: ['sha384'], enabled: 'auto' })

enabled option defaults to 'auto' since v5; setting it to true can cause issues in development mode.

Quickstart

Minimal webpack config to enable SRI for all scripts and styles, with cross-origin loading and content hashing.

const { SubresourceIntegrityPlugin } = require('webpack-subresource-integrity');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    crossOriginLoading: 'anonymous',
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new SubresourceIntegrityPlugin({
      hashFuncNames: ['sha384'],
      enabled: 'auto',
    }),
  ],
};