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
build
in theproduction
mode.
When using webpackwatch
orserve
, 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)