How-to Guides Security

How to Add Subresource Integrity to Scripts and Stylesheets

Protect your pages from a tampered CDN file: hash the exact file, add the integrity and crossorigin attributes, test that the browser blocks a modified copy and plan for updates.

Last reviewed:

AdSense Placeholder
Slot: header_reference_page
On this page

Steps

  1. Pin an exact file version

    Point at a specific, versioned URL, never a "latest" alias that can change. Download the file or open the URL so you hash the exact bytes that browsers will receive.

  2. Compute the hash

    Drop the file or paste its text into the SRI Hash Generator and pick sha384 (sha256 and sha512 also work). It returns the value in the form sha384- plus the Base64 digest.

  3. Add integrity and crossorigin

    Put the value in the integrity attribute and add crossorigin="anonymous". Cross-origin files need the CORS attribute, or the check cannot run.

  4. Check that it blocks tampering

    Change one character in a local copy, point the tag at it and reload: the console should report a blocked resource. Then restore the correct file.

  5. Plan for updates

    When you upgrade the library, compute a new hash and change the URL version and the attribute together. In a build pipeline, generate the hashes automatically.

What you need

The exact URL or file of a script or stylesheet you load from another origin, and the ability to edit the page.

Example

For a script whose entire content is alert('Hello, world.');, the sha384 digest is verified against OpenSSL (openssl dgst -sha384 -binary file | openssl base64 -A). The tag looks like this:

<script src="https://cdn.example.com/app.js" integrity="sha384-H8BRh8j48O9oYatfu5AZzq6A9RINhZO5H16dQZngK7T62em8MUt1FLm52t+eX6xO" crossorigin="anonymous"></script>

What the attributes do

  • integrity carries one or more hashes; the browser accepts the file if any of them matches. List a second hash to roll an update.
  • crossorigin="anonymous" requests the file without credentials and lets the browser read it. The server must send Access-Control-Allow-Origin (most CDNs do).
  • SRI works on <script> and <link rel="stylesheet"> (and preloads).
  • It does not protect dynamically injected scripts or the page itself.

Try these tools

SRI Hash Generator

Generate Subresource Integrity (SRI) hashes for a script or stylesheet.

Hash Generator

Generate MD5, SHA-1, SHA-256, and SHA-512 hashes from any text, computed locally with the Web Crypto API.

CSP Header Generator

Build a Content-Security-Policy header string from a checklist of common directives.

Security Headers Analyzer

Check a website's HTTP security headers (HSTS, Content-Security-Policy, X-Content-Type-Options, Referrer-Policy, Permissions-Policy.

See also

  • Glossary Subresource Integrity (SRI)
    Subresource Integrity is a browser feature that checks a script or stylesheet against a hash you supply and refuses to use it if the file.
  • Glossary Content Security Policy (CSP)
    A Content Security Policy is an HTTP header that tells the browser which sources of scripts, styles.
  • Glossary CDN
    A CDN (content delivery network) is a network of servers around the world that stores copies of a site's files and serves them from the.
  • Guide How Hashing Works
    What a hash function does, the avalanche effect shown with real SHA-256 output, which algorithms are still safe, HMAC.
  • Cheat sheet Content Security Policy Directives Cheat Sheet
    Every CSP Level 3 directive with what it controls and what it falls back to, the source keywords, meta-tag limits and starter policies.
  • Cheat sheet OpenSSL Commands Cheat Sheet
    The OpenSSL commands people actually use: hashes and random bytes, keys, certificate requests, reading certificates.

Frequently Asked Questions

The browser refuses to run the script or apply the stylesheet and logs an error in the console. Your page keeps loading, but without that file, so test the failure case.

It adds little there, since an attacker who can change the file can usually change the page too. It is most useful for third-party files from a CDN.

Back to the how-to guides
AdSense Placeholder
Slot: footer_leaderboard