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.
Integrity is ensured automatically for lazy-loaded chunks (loaded via
require.ensure
) on browsers that have
support for SRI.
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.
Usage
Installing the Plugin
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 <script>
and <link>
tags in your
initial DOM.
Caveats
Contributing
If you have discovered a bug or have a feature suggestion, feel free to create an issue on Github.
You are also welcome to correct any spelling mistakes or any language issues.
License
Copyright (c) 2015, 2016 Waysact Pty Ltd
MIT (see LICENSE
)