What is Sub Resource Integrity (SRI)?

SRI is a security feature that allows browsers to check the resources they fetch. It will make sure that the code is never loaded if the source has been manipulated.

It enables developers to identify whether the third-party resource they are loading has been tampered with by verifying its integrity code.

But, what is an integrity code? How can we use it in our applications?
I will answer these questions in the coming sections.

Using SRI in Practice

First of all, let’s look at how we can use it with Script tags. You just need to modify the script tag with a property called integrity to implement SRI, and the below code shows a simple implementation of SRI.

<script
  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
  crossorigin="anonymous">
</script>

integrity string with base64-encoded sha384 hash will look like this:

sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo

How it Works

When SRI is defined, the hash of the file is statically defined along with the script tag. Therefore, even if the file is served from the third-party server (e.g., CDN), the browser will download the file and compute the hash of that file.

Then it is checked against the hash defined with your script tag on your page. If the hash matches, the file is downloaded; if not, it will be blocked. Thus, it will prevent the execution of any tempered files.

But, it’s your responsibility to ensure that the original file you used to generate the hash code is free of any known vulnerabilities.

And if you are referring to any popular JavaScript libraries from their CDN, you might find that the integrity hash is mentioned for each release. Few examples would be jQuery, BootStrap &, etc.

Apart from that, you can also use SRI to protect the files you develop. So, let’s see how we can generate SRI in practice.

Generating the SRI

To generate a hash for any file, you can use openssl. At first, you need to pass the file’s content to openssl as an input and create a digest using sha384. Then it should be passed as an input into another openssl command to base64 encode the result. This can be done using the following command.

cat myfile.js | openssl dgst -sha384 -binary | openssl base64 -A

Another method for this is to use a shasum.

shasum -b -a 384 myfile.js | awk '{ print $1 }' | xxd -r -p | base64

This is the manual way of integrating SRI into your project. However, there are ready-made mechanisms to do this nowadays.

For example, it can be integrated into the build process of your application and differs based on the bundling tool you’ll be using.

• gulp-sri — This tool can be used to generate a list of hashes to all the files on your site if you are using Gulp and us dynamically rendering files.
• gulp-sri-hash — This can be used if you are using Gulp but has a static site generator. This will run through your HTML pages and modify the pages to add hashes where needed.
• webpage-subresource-integrity — This tool can be used if you are building your site using Webpack.

Further, there are online tools like srihash.org to generate an integrity code as well.

Using it with SPAs

I’m sure some of you wonder how we can use SRI with modern Single Page Applications (SPAs) since we hardly manipulate the script tags in the HTML page.

However, since most of you use Webpack for bundling (That comes default with SPA libraries and frameworks like React, Angular), we can use webpack-subresource-integrity NPM library to handle the integrity hash generation.

The steps are pretty straightforward, as given below. If you need more information, you can refer to the library documentation.

Step 1: Install the Plugin

npm install webpack-subresource-integrity — save-dev
or
yarn add --dev webpack-subresource-integrity

Step 2: Webpack Configuration

import SriPlugin from 'webpack-subresource-integrity';const compiler = webpack({
  output: { 
    crossOriginLoading: 'anonymous'
  },
  plugins: [
new SriPlugin({
      hashFuncNames: ['sha256', 'sha384'],
      enabled: process.env.NODE_ENV === 'production',
    }),
  ],
});

Browser Support

All modern browsers support SRI except Internet Explorer. But, it’s pretty safe to use since it reduces the security risks for supported browsers without breaking the unsupported ones.