SRI & CSP Hashes

What it's for

Make the hashes that let a browser check what it loads. Subresource Integrity (SRI) puts a file’s hash in the integrity attribute of the <script> or <link> that loads it, so a changed or tampered copy on a CDN is refused. A Content Security Policy (CSP) can allow an inline <script> or <style> by its hash instead of 'unsafe-inline', so injected code doesn’t run.

For example, when you load a library from a CDN, drop the exact file you tested with to get the tag to paste, or paste the inline scripts a page needs to get the script-src sources for its policy.

How to use it

Choose, drop or paste files for SRI: each gets its integrity value, and Tags to load them has a <script> for .js and .mjs files and a <link rel="stylesheet"> for .css, with crossorigin="anonymous" (other files get just the attribute, for fetch() or a preload). Fill in Expected integrity with a value from a CDN’s page or a project’s docs to see which files match it.

Paste HTML into the text box to hash each inline <script> and <style>. Scripts with a src, and data blocks such as JSON-LD, are left out, as a policy doesn’t check them. Text with no tags is hashed as it is, as one script’s or style’s contents. For your Content Security Policy gives the sources grouped under script-src and style-src. The hash (SHA-384 at first) is remembered.

Example

Press Try an example. The message says Hashed 2 inline blocks., and For your Content Security Policy shows

script-src 'sha384-OnIkna6z+SrVaLwgXTJ5408xr6TapkxBjcyHuGZAiz7VNhOOWtz41KwcZ+SJGg6x'
style-src 'sha384-LqROt08EVeMth/KLSsFLNEYyDxdxkMNHUVSlR1OFXlOstklYqxMOwTAUvGyhIq1U'

The script’s hash covers the line breaks and spaces around its code, as browsers do: add or remove a space and the hash changes.

Good to know

Hash exactly the file and text the browser gets: minifying, a different version, or a server that changes line endings gives a different hash, and the browser then blocks it. Cross-origin files need the server to send CORS headers for SRI to work. Inline event handlers (onclick="…") and style="…" attributes can only be allowed by hash with 'unsafe-hashes', and aren’t listed here. Nothing is fetched: drop a downloaded copy of a CDN file.