Utilia
Categories ▾
Language: en ▾

SRI Hash Generator

Generate Subresource Integrity (SRI) sha384 hashes for a JavaScript or CSS file and copy the ready-made integrity and crossorigin attributes, locally.

Paste the file's content or open the file itself: this tool does not download URLs. Reading a script from another site would need that server to allow it (CORS) or a server of our own to fetch it for you, and nothing you hash here ever leaves your browser. Hash the exact file you will serve.

Hash

The text is hashed as UTF-8. Browsers turn Windows line endings (CRLF) into LF in pasted text, and one changed byte breaks the hash: open the file itself when in doubt.

Algorithms

The URL is only written into the snippet, it is never requested. Leave it empty to use the file name.

How to generate an SRI hash

  1. Under Hash, choose Pasted code or Files.
  2. Paste the exact content of the script or stylesheet into Script or stylesheet content and press Generate SRI hash, or drop one or more .js and .css files on the drop zone. Hashes update as you type.
  3. Keep SHA-384 (recommended) ticked, or add SHA-256 and SHA-512. Each ticked algorithm adds one token to the value.
  4. Pick the Tag (automatic from the file name, <script>, <script type="module"> or <link rel="stylesheet">), type the Resource URL for the snippet (optional) and choose the crossorigin mode.
  5. Copy the integrity value or the complete tag.
  6. To check a tag you already use, paste its value or the whole tag into Check an existing integrity value (optional).

What Subresource Integrity does

When a page loads a script from a CDN, the browser trusts whatever that server returns. If the CDN is compromised or the file is changed, the modified code runs with full access to your page. Subresource Integrity (W3C SRI) closes that gap: you publish the expected hash of the file in the integrity attribute, the browser hashes what it downloads, and it refuses to run the script or apply the stylesheet if the two differ.

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

The value is the algorithm name, a dash and the Base64-encoded digest of the file’s bytes. That example is the hash of alert('Hello, world.'); from the SRI specification. When several hashes are listed, browsers only look at the strongest algorithm present and accept the file if any hash of that algorithm matches. That is how a site can list two versions of a file during a rollout.

Why crossorigin is required

For a file on another origin, the browser can only check its integrity if the response is fetched in CORS mode, so the tag needs a crossorigin attribute and the server must answer with an Access-Control-Allow-Origin header. Use anonymous (no cookies) for public CDNs; use-credentials is for rare private resources. Without CORS the browser blocks the file instead of loading it unchecked.

Why this tool doesn’t fetch URLs

This tool only hashes code you paste or files you open. Downloading a script from its URL inside the page would only work when that server allows cross-origin reads, and working around that would need a server to fetch the file for you, which would also see what you hash. Everything here runs in your browser. The simplest method is to download the exact file you will reference (the same version and the same minified build) and open it here.

Frequently asked questions

Which algorithm should I use?

SHA-384 is the usual choice and what most CDNs publish. SHA-256 and SHA-512 are also supported by all modern browsers. MD5 and SHA-1 are not allowed in SRI.

My hash is correct but the browser still blocks the file. Why?

Check that the server sends Access-Control-Allow-Origin and that the tag has crossorigin. Also make sure the CDN serves the same bytes: a different version, an automatic minifier or a missing final line break all change the hash.

Why does my pasted code give a different hash from the file?

Browsers convert Windows line endings (CRLF) to LF in text fields, and an editor may add or remove a byte order mark or a final newline. Open the file itself to hash its exact bytes.

Do I need SRI for files on my own domain?

It protects against changes made after you computed the hash, so it matters most for third-party hosts. For your own files, a bundler that generates the hashes at build time is usually easier.

Does SRI work for images or fonts?

The integrity attribute is supported on <script> and <link rel="stylesheet"> (and on <link rel="preload"> or modulepreload for these). Images and fonts can’t use it.

Related tools