Subresource Integrity Guide: Generate SRI for Scripts and CSS
Add integrity hashes to external scripts and stylesheets and understand exact bytes, CORS, and version pinning.
Subresource Integrity lets a browser compare a downloaded resource against an expected cryptographic digest before using it. It is useful for versioned scripts and stylesheets served by another origin. The expected value must come from a trusted build or release process, because a hash copied from an untrusted source provides little assurance.
Hash the exact release bytes
An SRI value consists of an algorithm name, a hyphen, and a Base64 digest. Supported algorithms include SHA-256, SHA-384, and SHA-512. Our tool generates all three. Upload the exact deployed file when possible; pasting text can change encoding or line endings. SRI hashes bytes, not the meaning of JavaScript or CSS, so equivalent minified and formatted sources produce different values.
Attach the digest to the resource element
Add integrity to the script or stylesheet element. Cross-origin resources also need an appropriate CORS response; crossorigin="anonymous" is commonly used for public CDN assets. Pin the resource URL to a specific release instead of a moving latest alias. When upgrading, update the URL and digest in the same change and test the page from its real origin.
Understand the protection boundary
A mismatch blocks the resource, which can make a page partly unusable if the release process is inconsistent. SRI does not fix vulnerabilities already present in the trusted code and does not protect a page if an attacker can replace both its markup and expected hash. Combine it with careful dependency review and a controlled deployment process. Keep an eye on browser console errors after changing any resource pipeline.
Worked example
<script src="https://cdn.example.com/app-1.0.js"
integrity="sha384-BASE64_DIGEST" crossorigin="anonymous"></script>Should I hash the URL or the file contents?
Hash the file bytes. The URL string is not what the browser compares against the downloaded resource.
Reference and further reading
KEEP EXPLORING
Another useful idea.
How to Fix an SRI Hash Mismatch in the Browser
Diagnose integrity failures caused by changed files, line endings, CDN transformations, redirects, and CORS.
HTTP Basic Authentication: Header Format and Limitations
Generate and decode Basic Authorization headers and understand usernames, passwords, UTF-8, and HTTPS.
How to Send Basic Auth with JavaScript fetch()
Construct a Basic Authorization header for fetch and troubleshoot Unicode encoding, CORS, and exposed credentials.