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
A Webpack plugin for ensuring
subresource integrity on
supported browsers.
Integrity is ensured automatically for lazy-loaded chunks (loaded via
require.ensure
).
It's your responsibility to include the integrity
attribute in the
HTML for top-level chunks. Obviously, SRI for lazy-loaded chunks is
pointless unless integrity of the top-level chunks is ensured as well.
html-webpack-plugin
users can get the integrity
attribute set automatically, see below.
Usage
Installing the Plugin
$ npm install webpack-subresource-integrity --save-dev
Pass an array of
hash algorithms
to the plugin constructor:
import SriPlugin from 'webpack-subresource-integrity';
const compiler = webpack({
plugins: [
// ...
new SriPlugin(['sha256', 'sha384']),
],
});
Accessing the integrity
Value for Top-level Assets
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. Something like
this:
compiler.plugin("done", stats => {
var integrity = stats.compilation.assets[stats.toJson().assetsByChunkName.main].integrity;
});
Use that value to generate the integrity
attribute for tags such as
<script>
and <link>
. Note that you are also
required to set the crossorigin
attribute.
html-webpack-plugin
Integration
The plugin installs a hook for html-webpack-plugin
that adds the
integrity
attribute automatically when inject: true
(the default).
This requires html-webpack-plugin
version 2.21.0
or later. The
crossorigin
attribute will be set to anonymous
in this case.
If you're using a template with html-webpack-plugin
and with
inject: false
, you can generate the attributes as follows:
<% for (var index in htmlWebpackPlugin.files.js) { %>
<script src="<%= htmlWebpackPlugin.files.js[index] %>"
integrity="<%= htmlWebpackPlugin.files.jsIntegrity[index] %>"
crossorigin="anonymous"
></script>
<% } %>
<% for (var index in htmlWebpackPlugin.files.css) { %>
<link href="<%= htmlWebpackPlugin.files.css[index] %>"
integrity="<%= htmlWebpackPlugin.files.cssIntegrity[index] %>"
rel="stylesheet"
crossorigin="anonymous"
>
<% } %>
Caveats
Contributing
If you have discovered a bug or have a feature suggestion, feel free to create an issue on Github.
Pull requests are welcome. Please run npm test
and npm run lint
on
your branch before submitting it.
You are also welcome to correct any spelling mistakes or any language issues.
License
Copyright (c) 2015, 2016 Waysact Pty Ltd
MIT (see LICENSE
)