SRI Hash Generator

How to generate an SRI hash

1. SRI mode is selected. Under Hashes, tick sha256, sha384 and/or sha512; sha384 is ticked by default.
2. Drop the .js or .css files with Input set to File. The tag type follows the file extension.
3. Or, with Input on Text, paste the file’s content into File content (paste), choose the Tag (<script> or <link rel="stylesheet">) and enter the Path or URL the file will be served from.
4. Copy the integrity value or the whole HTML tag. Several ticked algorithms appear space-separated in one attribute.

Dropping the file is more reliable than pasting. A browser text box converts CRLF line endings to LF, and a missing or extra final newline changes the hash; the tool reminds you of both.

What the integrity value is

An SRI value is the name of the algorithm, a dash, and the Base64 digest of the file’s exact bytes. For a file app.js containing one line, console.log('hello');, followed by a newline:

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

Without the final newline the same line hashes to sha384-v393mDht/MNBowq0Z9UpetDvKE6u6EdCihklP1GZs66vL1YCFm1Z4Q4wJtb94rY9. The browser downloads the file, hashes the body it received (after removing gzip or Brotli transfer compression, so compression does not matter) and refuses to run or apply it if no listed hash matches.

When SRI is worth it

SRI protects you when someone else serves your code: a public CDN, a third-party widget host, a storage bucket shared with other teams. If that server is compromised and the file is replaced, browsers block the modified file instead of running it on your pages.

It fits files that never change at a given URL, such as library@1.2.3/dist/lib.min.js. It does not fit:

• URLs like /latest/ or @1 that move to new releases.
• Responses that differ per browser or region, such as some web font CSS that serves different @font-face rules depending on the user agent.
• Scripts the vendor updates in place on purpose, such as many analytics and chat loaders. With those you have to choose between SRI and the vendor’s updates.

For your own files on your own domain, SRI adds little: an attacker who can change the file can usually change the HTML too. A Content Security Policy is the better tool there; the CSP nonce generator and CSP hashes from SHA-256 to Base64 cover that side.

CORS and the crossorigin attribute

A cross-origin file with an integrity attribute must be fetched in CORS mode, and the server must allow it with Access-Control-Allow-Origin (usually * for public CDNs). That is what crossorigin="anonymous" requests; the generated tag always includes it. Without CORS the browser cannot read the bytes to hash them and blocks the file, with a console message naming the integrity or CORS failure.

Same-origin files do not need the attribute, but it does no harm.

Generating SRI hashes in a build

For more than a few files, compute the hashes in your build step:

openssl dgst -sha384 -binary app.js | openssl base64 -A

const crypto = require("crypto");
const fs = require("fs");

const integrity = "sha384-" +
  crypto.createHash("sha384").update(fs.readFileSync("app.js")).digest("base64");
console.log(integrity);

Both print the eEqgsNuD… value above for the example file. Bundlers often have a plugin that writes the attribute into the HTML for you, which keeps hashes in step with each build. To check a value you received, drop the file here and compare; the comparison is exact, character for character.

FAQ