How to generate a Subresource Integrity hash

By

Generate a Subresource Integrity hash in the browser for a script or stylesheet, then copy the integrity attribute and the tag.

Free toolThis tutorial uses the Subresource Integrity Generator. It runs in your browser, so open it in another tab and follow along.

To generate a Subresource Integrity hash, hash the file with SHA-256, SHA-384, or SHA-512 and put sha384- (or the matching prefix) plus the base64 digest in an integrity attribute.

We’ll use the Subresource Integrity generator. It runs in the browser. The file is not uploaded, and the file contents never land in the URL.

You want this when the script or the stylesheet is served from another host, which is the usual CDN case in how a CDN works. The hash lets the browser refuse the file when the bytes change.

Hash the sample script

  1. Open the Subresource Integrity generator.
  2. Click Load sample, or paste the file, or use Open file.
  3. Leave the algorithm on SHA-384 unless you need another one.
  4. Put the URL in URL in the tag. Pick script tag or stylesheet link.
  5. Copy Integrity, or copy the whole tag.

The sample is one line of JavaScript, with a newline at the end of the line:

console.log('hello from flaviocopes.com')

SHA-384 of that text, as UTF-8, is:

sha384-jCrGIOKH5LUna4znGnr7ac8JM8yeqT/7vRzbAwud/qksVW4+a3jQ7BmBRlZbNCfl

With the sample URL, the script tag is:

<script src="https://cdn.example.com/app.js" integrity="sha384-jCrGIOKH5LUna4znGnr7ac8JM8yeqT/7vRzbAwud/qksVW4+a3jQ7BmBRlZbNCfl" crossorigin="anonymous"></script>

The same digest from a file on disk, using the command the page prints:

cat FILENAME.js | openssl dgst -sha384 -binary | openssl base64 -A

Replace FILENAME.js with your file. The page does not run the command.

How a file becomes an integrity attributePaste text or open a file. The page hashes it with SHA-256, SHA-384, or SHA-512 and prints the integrity token. With a safe URL it also prints a script or link tag that includes crossorigin anonymous.YesNoPaste text or open afileHash with SHA-256,SHA-384, or SHA-512Print the integritytokenIs the URL safe toplace in a tag?Print the script orlink tagKeep the token andskip the tag

What the attribute contains

The value is a prefix, a hyphen, and base64. The prefixes are sha256, sha384, and sha512. The page defaults to SHA-384.

All three joins them with a space, in that order: SHA-256, then SHA-384, then SHA-512. The browser uses the strongest algorithm that is present.

Text you paste is hashed as UTF-8. A file you open is hashed as its raw bytes, up to 2 MB. Those two inputs are different when the file is not UTF-8 text.

The tag is either a script with src, or a link with rel="stylesheet". Both include crossorigin="anonymous". A cross-origin file also needs CORS. The page does not fetch the URL, so it cannot tell you whether the host sends the right CORS headers.

A URL with a space, a quote, or a bracket is not placed in the tag. You still get the integrity value, and the page tells you why the tag was skipped.

The address bar can remember the algorithm (algo), the tag kind (tag=link), and a short URL. It does not remember the file.

A CSP hash is a different string

Content Security Policy can allow an inline script with a sha256- hash in script-src. That hash is of the inline script body, and it lives in the header.

The value from this page is the integrity attribute on a file. Hash the file you are about to serve, then put that token on the tag. If you edit the file, generate the hash again.

For a digest you want in hex or as an HMAC, use the hash generator. A starter policy belongs in the CSP generator, and the other response headers belong in the security headers starter.

Try the Subresource Integrity Generator

Hash a file or text in your browser and copy a Subresource Integrity value for a script or stylesheet. SHA-256, SHA-384, and SHA-512.

Open the Subresource Integrity Generator →

  • Hash Generator: SHA-1/256/384/512 and MD5 digests plus HMAC signing, from text or files — hex or Base64, all in your browser.
  • CSP Generator: Compose a Content-Security-Policy header with presets, per-directive explanations, and warnings on unsafe-inline.
  • Security Headers Starter: Generate a starter set of HSTS, nosniff, Referrer-Policy, Permissions-Policy, framing, COOP, and CORP headers — raw, nginx, or Cloudflare format.

More tool tutorials →

Want me to talk about your product? You can sponsor this site.