Subresource Integrity SRI

Subresource Integrity, also called SRI, is a browser security feature used to verify that external resources are loaded exactly as expected.

It is mainly useful when we load files from third-party sources like CDNs.

Examples:

CSS from CDN
JavaScript from CDN
external libraries like Bootstrap or Lodash

One-line idea: Subresource Integrity ensures that external CDN resources are loaded only if their content matches the expected cryptographic hash.

Core Concepts

What It Is

Subresource Integrity allows the browser to check whether a fetched external resource has been changed unexpectedly.

Simple meaning:

Browser downloads external file
        ↓
Browser generates hash of downloaded file
        ↓
Browser compares it with integrity attribute
        ↓
If hash matches -> file loads
If hash does not match -> file is blocked

The idea is to make sure the file delivered by a CDN or third-party source is not modified, corrupted, or compromised.

Why It Matters

When we use a third-party CDN, we trust that CDN to deliver the correct file.

But even if the CDN or third-party source is normally trusted, something can still go wrong.

Possible risks:

Risk	Meaning
CDN compromise	Third-party file may be modified by an attacker
Unexpected file change	Library content may change without your knowledge
Version mismatch	Updated resource may break the application
Malicious script	Changed JavaScript may run harmful logic
Debugging issue	App may break because external content changed

Simple example:

Your app trusts CDN file
        ↓
CDN file changes unexpectedly
        ↓
Browser loads changed file
        ↓
Application security or behavior may be affected

SRI helps detect this by verifying the resource hash before loading it.

Core Flow

The SRI flow looks like this:

Add external resource URL
        ↓
Add integrity hash
        ↓
Browser downloads the resource
        ↓
Browser generates cryptographic hash
        ↓
Browser compares generated hash with integrity value
        ↓
Matching hash -> resource loads
Different hash -> resource is blocked

Main Security Goals

SRI mainly helps with:

Goal	Meaning
Verify third-party files	Ensure CDN resources are not changed
Detect compromised resources	Block modified or malicious files
Detect unexpected updates	Know if external content changed
Protect app behavior	Avoid loading wrong library content
Improve trust	Browser verifies the file before using it

How SRI Works

When a browser sees an external resource with an integrity attribute, it follows these steps:

Downloads the resource from the URL mentioned in href or src.
Generates a cryptographic hash using algorithms like sha384 or sha256.
The hash is created using the content, algorithm, and crypto function.
Compares the generated hash with the value written in the integrity attribute.
If both values match, the resource is loaded.
If both values do not match, the browser blocks the resource.

Flow:

Resource content + Hash algorithm
        ↓
Generated hash
        ↓
Compare with integrity attribute
        ↓
Load only if both match

Practical Examples

Basic Syntax

For a CSS file:

<link
  rel="stylesheet"
  href="https://cdn.example.com/style.css"
  integrity="sha384-xxxxxxxxxxxxxxxx"
  crossorigin="anonymous"
/>

For a JavaScript file:

<script
  src="https://cdn.example.com/library.js"
  integrity="sha384-xxxxxxxxxxxxxxxx"
  crossorigin="anonymous"
></script>

The important attributes are:

Attribute	Purpose
`href` / `src`	External resource URL
`integrity`	Expected cryptographic hash
`crossorigin`	Needed when resource is loaded from another origin

crossorigin Attribute

If the CDN is cross-origin, we need to add:

crossorigin="anonymous"

Example:

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
  integrity="sha384-H6KKS1H1WwuERMSm+54dYLzjg0fKqRK5ZRyASdbrI/lwrCc6bXEmtGYr5SwvP1pZ"
  crossorigin="anonymous"
></script>

Simple rule:

External CDN resource + SRI
        ↓
Use crossorigin="anonymous"

Example Using Lodash CDN

Suppose we load Lodash from a CDN and use it in our page.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Express SRI Example</title>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
      integrity="sha384-H6KKS1H1WwuERMSm+54dYLzjg0fKqRK5ZRyASdbrI/lwrCc6bXEmtGYr5SwvP1pZ"
      crossorigin="anonymous"
    ></script>

    <script>
      var sample = _.filter([1, 2, 3], (data) => data % 2);
      console.log("Testing lodash library:", sample);
    </script>
  </head>
  <body>
    <h1>Hello, SRI World!</h1>
    <h2>-- Namaste Frontend System Design</h2>
  </body>
</html>

Here:

Lodash is loaded from CDN
        ↓
Browser checks integrity hash
        ↓
Hash matches
        ↓
Lodash loads successfully
        ↓
_.filter() works

What Happens If Hash Changes

If we make random changes in the integrity attribute and reload the page, the browser will show an error and block the resource.

Flow:

Browser downloads CDN file
        ↓
Browser generates hash
        ↓
Generated hash does not match integrity value
        ↓
Browser blocks the script/CSS
        ↓
Console shows an integrity error

This tells us that the file being loaded does not match the expected content.

Benefits

SRI gives two important benefits.

Benefit	Explanation
Detect compromised third-party resource	If the file content changes, the hash will not match
Detect unexpected content updates	If a CDN file version/content changes, the app can identify it

Simple example:

Third-party resource is compromised
        ↓
Content changes
        ↓
Hash mismatch
        ↓
Browser blocks it

Another example:

CDN resource content changes
        ↓
App may break due to version/content change
        ↓
SRI detects mismatch

SRI Hash Generator

The PDF mentions this SRI hash generator:

https://www.srihash.org/

Basic flow:

Add resource URL
        ↓
Generate SRI hash
        ↓
Copy integrity value
        ↓
Use it in script/link tag

When to Use SRI

Use SRI when loading important static resources from third-party sources.

Good use cases:

loading JavaScript from CDN
loading CSS from CDN
using external libraries like Bootstrap or Lodash
protecting critical frontend dependencies
preventing unexpected third-party resource changes

When It Helps Most

SRI is especially helpful when:

Resource is outside your control
        ↓
But your app depends on it
        ↓
Browser should verify it before loading

Examples:

Resource	Why SRI Helps
CDN JavaScript	Prevents loading modified scripts
CDN CSS	Prevents loading changed styles
External library	Ensures expected library content
Third-party static file	Adds browser-level integrity check

Summary

Subresource Integrity ensures that external CDN resources are loaded only if their content matches the expected cryptographic hash.

External Resource + Expected Hash = Safe Load

Remember it like this:

CDN file downloads
Browser calculates hash
Hash matches integrity -> load
Hash mismatch -> block

Or:

Trust the CDN, but verify the file before loading it.

Core Concepts​

What It Is​

Why It Matters​

Core Flow​

Main Security Goals​

How SRI Works​

Practical Examples​

Basic Syntax​

crossorigin Attribute​

Example Using Lodash CDN​

What Happens If Hash Changes​

Benefits​

SRI Hash Generator​

When to Use SRI​

When It Helps Most​

Summary​