Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
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.
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.
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?
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, by some measures Chrome 45 still holds a relatively high market share of around 5% at the time of this writing.)
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
.
Copyright (c) 2015-2017 Waysact Pty Ltd
MIT (see LICENSE)
FAQs
Webpack plugin for enabling Subresource Integrity
The npm package webpack-subresource-integrity receives a total of 2,497,797 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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.