webpack-subresource-integrity

What is webpack-subresource-integrity?

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.

What are webpack-subresource-integrity's main functionalities?

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']
    })
  ]
};

Other packages similar to webpack-subresource-integrity

html-webpack-plugin

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.

ssri

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

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-subresource-integrity

A Webpack plugin for ensuring subresource integrity.

Integrity is ensured automatically for lazy-loaded chunks (loaded via require.ensure) on browsers that have support for SRI.

It's your responsibility to include the integrity attribute in the HTML for top-level chunks. Obviously, SRI for lazy-loaded chunks is pointless unless integrity of the top-level chunks is ensured as well.

Usage

Installing the Plugin

Pass an array of hash algorithms to the plugin constructor:

import SriPlugin from 'webpack-subresource-integrity';

const compiler = webpack({
    plugins: [
        // ...
        new SriPlugin(['sha256', 'sha384']),
    ],
});

Accessing the integrity Value for Top-level Assets

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. Something like this:

compiler.plugin("done", stats => {
    var integrity = stats.compilation.assets[stats.toJson().assetsByChunkName.main].integrity;
});

Use that value to generate the <script> and <link> tags in your initial DOM.

integrity for html-webpack-plugin users

The plugin installs a hook for 'html-webpack-plugin' that does this for you automatically if you're using injection. (This requires version 2.21.0 or greater.)

If you're using a template with 'html-webpack-plugin' you need to generate the integrity and crossorigin attributes using something like this:

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>" 
    <% var basename = path.basename(htmlWebpackPlugin.files.chunks[chunk].entry);
          if (compilation.assets[basename] && 
                compilation.assets[basename].integrity) {%>
    integrity = "<%= compilation.assets[basename].integrity %>"
    crossorigin="anonymous"
    <% } %>
    ></script>
<% } %>

The above assumes that you have path.basename() available from your template.

Caveats

• There is a known bug relating to SRI in Chrome versions before 47 which will break loading of scripts containing certain UTF-8 characters. You might want to hold off using SRI if you need to support older Chrome versions.

Contributing

If you have discovered a bug or have a feature suggestion, feel free to create an issue on Github.

Pull requests are welcome. Please run npm test and npm run lint on your branch before submitting it.

You are also welcome to correct any spelling mistakes or any language issues.

License

Copyright (c) 2015, 2016 Waysact Pty Ltd

MIT (see LICENSE)