How to generate a Subresource Integrity hash
By Flavio
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
- Open the Subresource Integrity generator.
- Click Load sample, or paste the file, or use Open file.
- Leave the algorithm on SHA-384 unless you need another one.
- Put the URL in URL in the tag. Pick script tag or stylesheet link.
- 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.
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 →
Related tools
- 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.
Want me to talk about your product? You can sponsor this site.