What is integrity hash?
The subresource integrity hash is a cryptographic value of the integrity attribute that used by a browser to verify that the content of an asset has not been manipulated. If the asset has been manipulated, the browser will never load it.
The integrity attribute can be used with the script and link tags.
Webpack plugin
You need to install the html-bundler-webpack-plugin:
npm install html-bundler-webpack-plugin --save-dev
The Bundler Plugin generate the integrity hashes and adds the integrity attribute to the link and script tags when generating HTML.
For example, we have a simple HTML template with a script and a style:
<html>
<head>
<!-- include source style -->
<link href="./style.scss" rel="stylesheet" />
<!-- include source script -->
<script src="./main.js" defer="defer"></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
The Webpack config:
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
module.exports = {
output: {
// required for subresource integrity to work
crossOriginLoading: 'anonymous',
},
plugins: [
// renders templates and injects integrity hash
new HtmlBundlerPlugin({
entry: {
// template where are included link and script tags
index: 'src/views/index.html',
},
js: {
// the JS filename must contains a contenthash
filename: 'js/[name].[contenthash:8].js',
},
css: {
// the CSS filename must contains a contenthash
filename: 'css/[name].[contenthash:8].js',
},
// include `integrity` attribute in production mode only
integrity: 'auto',
}),
],
};
The generated HTML file dist/index.html contains the integrity hashes:
<html>
<head>
<link
href="css/style.2a9f3a27.css"
rel="stylesheet"
integrity="sha384-gaDmgJjLpipN1Jmuc98geFnDjVqWn1fixlG0Ab90qFyUIJ4ARXlKBsMGumxTSu7E"
crossorigin="anonymous" />
<script
src="js/main.d461fe16.js"
defer="defer"
integrity="sha384-E4IoJ3Xutt/6tUVDjvtPwDTTlCfU5oG199UoqWShFCNx6mb4tdpcPLu7sLzNc8Pe"
crossorigin="anonymous"></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Note
The integrity hash is generated when using webpack
buildin theproductionmode.
When using webpackwatchorserve, no hashes will be generated because it doesn't make sense.
View in browser
Open generated dist/index.html. The link and script tags will contain the integrity attribute with a hash.
Top comments (0)