What is Subresource Integrity (SRI) and Why It Matters for Web Security

Published on
Arnab Mondal-
3 min read

Overview

Imagine you're receiving a package from an online store. Before accepting it, you check the seal to ensure it hasn't been tampered with, making sure that what's inside is exactly what you ordered. If the seal is broken, you reject the package, suspecting that something might be wrong. Subresource Integrity (SRI) works in a similar way for websites. When a browser fetches resources (like scripts or styles) from third-party sources, SRI ensures that these resources haven't been altered, protecting your website from potential security threats.

How Subresource Integrity Works

SRI is a security feature that allows you to ensure that the resources your website fetches (like scripts, styles, or fonts) haven't been tampered with. It works by adding a cryptographic hash to the resource's URL, which the browser uses to verify the integrity of the resource before executing it. If the hash doesn't match the resource's content, the browser blocks the resource from loading, preventing any potential security risks. Here is a diagram to help you understand how SRI works:

Subresource Integrity

1. Including External Resources

When you include an external resource, such as a JavaScript file from a CDN, you add the integrity attribute to the script or link tag. This attribute contains a cryptographic hash of the file.

Example:

<script
  src="https://cdn.example.com/resource.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxyEw1kmk="
  crossorigin="anonymous"
></script>

Browser Verification

When the browser fetches the resource, it calculates the hash of the file and compares it to the hash in the integrity attribute. If the hashes match, the browser loads the resource. If they don't match, the browser blocks the resource from loading, preventing any potential security risks.

Why Subresource Integrity Matters

SRI is essential because it protects websites from malicious third-party resource modifications. If a script or stylesheet you’re loading from a CDN or other external source is modified (whether by an attacker or due to an unintentional update), your website could be compromised.

1. Preventing Malicious Attacks

Without SRI, an attacker could potentially inject harmful code into an external resource you rely on, such as a JavaScript library from a CDN. By verifying the resource's integrity, SRI helps prevent these types of attacks.

2. Ensuring Resource Stability

CDNs can update the resources they serve over time. While updates can be helpful, they could also introduce unintended bugs or changes to your website’s behavior. By using SRI, you ensure that your website only loads the exact version of the resource you expect.

Best Practices for Implementing SRI

Here are some best practices when using SRI in your web development:

  • Always use HTTPS: SRI only works when resources are served over HTTPS.
  • Update SRI hashes carefully: When updating your external resources (e.g., loading a new version of a library), ensure you also update the integrity hash to match the new resource.
  • Use SRI with crossorigin attribute: When using SRI for cross-origin resources, include the crossorigin attribute to avoid any CORS-related issues.

Conclusion

Subresource Integrity (SRI) is a powerful and simple tool for protecting your website from potentially malicious or unintended changes to third-party resources. By adding just a few lines of code, you can ensure that your website remains secure and stable, giving you peace of mind as you rely on external libraries and CDNs.