What is webpack-subresource-integrity?
The webpack-subresource-integrity package is a Webpack plugin that enables the generation of Subresource Integrity (SRI) hashes for the assets produced by Webpack. It helps in ensuring the integrity of the resources served to web clients by including an integrity attribute in the script and link tags that contain a hash of the content. If the content is manipulated or altered in any way during delivery, the browser can detect the mismatch and refuse to execute or apply the resource.
What are webpack-subresource-integrity's main functionalities?
Generating SRI hashes
This feature allows the plugin to generate SRI hashes for the output files produced by Webpack. The 'hashFuncNames' option specifies which hash functions to use for generating the integrity value. The 'enabled' option can be used to toggle the plugin on or off. The 'crossOriginLoading' output option is necessary to support CORS for SRI.
const SriPlugin = require('webpack-subresource-integrity');
module.exports = {
plugins: [
new SriPlugin({
hashFuncNames: ['sha256', 'sha384'],
enabled: true
})
],
output: {
crossOriginLoading: 'anonymous'
}
};
Customizing the hash function
This feature allows the user to specify a different hash function, such as 'sha512', for generating the integrity value. This can be useful if a higher level of security is required or if specific hash functions are mandated by security policies.
const SriPlugin = require('webpack-subresource-integrity');
module.exports = {
plugins: [
new SriPlugin({
hashFuncNames: ['sha512']
})
]
};
Other packages similar to webpack-subresource-integrity
html-webpack-plugin
While not directly similar, the html-webpack-plugin simplifies the creation of HTML files to serve your webpack bundles. It can work in conjunction with webpack-subresource-integrity by injecting the generated SRI hashes into the HTML files it produces.
ssri
The ssri package is an npm library for generating SRI hashes. Unlike webpack-subresource-integrity, it is not a Webpack plugin but can be used in any Node.js program to compute SRI hashes for given resources.
sri-toolbox
sri-toolbox is a general-purpose library for generating and validating SRI hashes. It provides similar functionality to webpack-subresource-integrity but is not tied to Webpack and can be used in various environments.
webpack-subresource-integrity
Webpack plugin for enabling Subresource Integrity.
Subresource Integrity (SRI) is a security
feature that enables browsers to verify that files they fetch (for
example, from a CDN) are delivered without unexpected
manipulation.
Features
- Integration with html-webpack-plugin
- Support for code-splitting (integrity for lazy-loaded chunks)
Installation
npm install webpack-subresource-integrity --save-dev
Webpack Configuration Example
import SriPlugin from 'webpack-subresource-integrity';
const compiler = webpack({
plugins: [
new SriPlugin({
hashFuncNames: ['sha256', 'sha384'],
enabled: process.env.NODE_ENV === 'production',
crossorigin: 'anonymous',
}),
],
});
Setting the integrity
attribute for top-level assets
For the plugin to take effect it is essential that you set the
integrity
attribute for top-level assets (i.e. assets loaded by your
HTML pages.)
With HtmlWebpackPlugin
When html-webpack-plugin is injecting assets into the template (the
default), the integrity
attribute will be set automatically. There
is nothing else to be done.
With HtmlWebpackPlugin({ inject: false })
When you use html-webpack-plugin with inject: false
, you are
required to set the integrity
and crossorigin
attributes in your
template as follows:
<% for (var index in htmlWebpackPlugin.files.js) { %>
<script
src="<%= htmlWebpackPlugin.files.js[index] %>"
integrity="<%= htmlWebpackPlugin.files.jsIntegrity[index] %>"
crossorigin="<%= htmlWebpackPlugin.options.sriCrossOrigin %>"
></script>
<% } %>
<% for (var index in htmlWebpackPlugin.files.css) { %>
<link
href="<%= htmlWebpackPlugin.files.css[index] %>"
integrity="<%= htmlWebpackPlugin.files.cssIntegrity[index] %>"
crossorigin="<%= htmlWebpackPlugin.options.sriCrossOrigin %>"
rel="stylesheet"
/>
<% } %>
Without HtmlWebpackPlugin
The correct value for the integrity
attribute can be retrieved from
the integrity
property of Webpack assets. However, that property is
not copied over by Webpack's stats
module so you'll have to access
the "original" asset on the compilation
object. For example:
compiler.plugin("done", stats => {
const mainAssetName = stats.toJson().assetsByChunkName.main;
const integrity = stats.compilation.assets[mainAssetName].integrity;
});
Options
hashFuncNames
Required option, no default value.
An array of strings, each specifying the name of a hash function to be
used for calculating integrity hash values. For example, ['sha256', 'sha512']
.
See SRI: Cryptographic hash functions
enabled
Default value: true
When this value is falsy, the plugin doesn't run and no integrity
values are calculated. It is recommended to disable the plugin in
development mode.
crossorigin
Default value: "anonymous"
When using HtmlWebpackPlugin({ inject: true })
, this option
specifies the value to be used for the crossorigin
attribute for
injected assets.
The value will also be available as
htmlWebpackPlugin.options.sriCrossOrigin
in html-webpack-plugin
templates.
See
SRI: Cross-origin data leakage and
MDN: CORS settings attributes
Caveats
Browser support
Browser support for SRI is currently patchy. Your page will still
work on browsers without support for SRI, but subresources won't be
protected from tampering.
See Can I use Subresource Integrity?
Broken browser versions
There is a
known bug relating to SRI in Chrome 45 and 46
which will break loading of scripts containing certain UTF-8
characters. You might want to hold off using SRI if you need to
support these Chrome versions. (Unfortunately, Chrome 45 still
holds a relatively high market share
of around 5% at the time of this writing.)
Hot Module Replacement
Chunks loaded via Hot Module Replacement (HMR) are not currently
protected. This shouldn't be a problem because HMR is usually used
only in development mode where SRI is not normally needed.
Further Reading
License
Copyright (c) 2015, 2016 Waysact Pty Ltd
MIT (see LICENSE)