webpack-subresource-integrity
Advanced tools
Package description
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.
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']
})
]
};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.
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 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.
Readme
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.
npm install webpack-subresource-integrity --save-dev
import SriPlugin from 'webpack-subresource-integrity';
const compiler = webpack({
output: {
crossOriginLoading: 'anonymous',
},
plugins: [
new SriPlugin({
hashFuncNames: ['sha256', 'sha384'],
enabled: process.env.NODE_ENV === 'production',
}),
],
});
integrity attribute for top-level assetsFor 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.)
When html-webpack-plugin is injecting assets into the template (the
default), the integrity attribute will be set automatically. The
crossorigin attribute will be set as well, to the value of
output.crossOriginLoading webpack option. There is nothing else to
be done.
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="<%= webpackConfig.output.crossOriginLoading %>"
></script>
<% } %>
<% for (var index in htmlWebpackPlugin.files.css) { %>
<link
rel="stylesheet"
href="<%= htmlWebpackPlugin.files.css[index] %>"
integrity="<%= htmlWebpackPlugin.files.cssIntegrity[index] %>"
crossorigin="<%= webpackConfig.output.crossOriginLoading %>"
/>
<% } %>
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;
});
Note that you're also required to set the crossorigin attribute. It
is recommended to set this attribute to the same value as the webpack
output.crossOriginLoading configuration option.
If your page can be loaded through plain HTTP (as opposed to HTTPS),
you must set the Cache-Control: no-transform response header or your
page will break when assets are loaded through a transforming
proxy. See below for more information.
Consider adding the following rule to your CSP file:
Content-Security-Policy: require-sri-for script style;
It ensures that if, for some reason, this plugin fails to add
integrity attributes to all your assets, your page will fail to load
rather than load with unverified assets.
require-sri-for has never officially shipped in
Chrome
or
Firefox,
and both appear to be leaning towards removing their implementations.
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
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.
integrity valuesYou might want to export generated integrity hashes, perhaps for use
with SSR. We recommend
webpack-assets-manifest
for this purpose. When configured with option integrity: true it
will include the hashes generated by this plugin in the manifest
(requires webpack-assets-manifest version >= 3 which in turn requires
Webpack >= 4).
Example usage with webpack-assets-manifest.
<link rel="preload"> doesn't work as expected in current Chrome versions, even
if the integrity attribute is added to the `link tag (which the current version
of webpack-subresource-integrity does not do.) The resource will be loaded
twice, defeating the purpose of preloading. This issue doesn't appear to exist
in Firefox or Safari. See issue #111 for more information.
By its very nature, SRI can cause your page to break when assets are modified by a proxy. This is because SRI doesn't distinguish between malicious and benevolent modifications: any modification will prevent an asset from being loaded.
Notably, this issue can arise when your page is loaded through Chrome Data Saver.
This is only a problem when your page can be loaded with plain HTTP, since proxies are incapable of modifying encrypted HTTPS responses.
Presumably, you're looking to use SRI because you're concerned about
security and thus your page is only served through HTTPS anyway.
However, if you really need to use SRI and HTTP together, you should
set the Cache-Control: no-transform response header. This will
instruct all well-behaved proxies (including Chrome Data Saver) to
refrain from modifying the assets.
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?
This plugin can interfere with hot reloading and therefore should be
disabled when using tools such as webpack-dev-server. This shouldn't
be a problem because hot reloading is usually used only in development
mode where SRI is not normally needed.
For testing SRI without setting up a full-blown web server, consider
using a tool such as http-server.
As detailed in
Webpack Issue #6972,
the crossOrigin attribute can break loading of assets in certain
edge cases due to a bug in Safari. Since SRI requires the
crossOrigin attribute to be set, you may run into this case even
when source URL is same-origin with respect to the asset.
Copyright (c) 2015-present Waysact Pty Ltd
MIT (see LICENSE)
FAQs
Webpack plugin for enabling Subresource Integrity
The npm package webpack-subresource-integrity receives a total of 2,492,499 weekly downloads. As such, webpack-subresource-integrity popularity was classified as popular.
We found that webpack-subresource-integrity demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).
Security News
LDAPjs, an LDAP Client and Server API for Node.js, was decommissioned after its maintainer received an abusive email from a user, raising concerns about this form of abuse as a potential attack vector.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.