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 the production mode.
When using webpack watch or serve, 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.

Give HTML Bundler Plugin for Webpack a ⭐️ on GitHub

Blog

Auto generate integrity attribute for script and style tags in HTML using Webpack

webdiscus

What is integrity hash?

Webpack plugin

View in browser

Join Our Newsletter. No Spam, Only the good stuff.

Related