Auto generate integrity attribute for script and style tags in HTML using Webpack
Tags: webdev, javascript, html, webpack
Published: 2023-09-06 12:15:37

#What is integrity hash?

The [subresource integrity hash](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) 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](https://github.com/webdiscus/html-bundler-webpack-plugin#option-integrity):

```
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
<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:

```js
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
<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 in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/webpack-integrity-hvnfmg?file=dist/index.html)

Open generated `dist/index.html`. The `link` and `script` tags will contain the `integrity` attribute with a hash.

{% cta https://github.com/webdiscus/html-bundler-webpack-plugin %} Give HTML Bundler Plugin for Webpack a ⭐️ on GitHub {% endcta %}