SHA Hash Generator — Free HTML CSS JS Snippet

Checking a file's integrity or generating a quick fingerprint for a string usually means reaching for a command-line tool like shasum or openssl dgst. This snippet gets the same real cryptographic digests directly in the browser using crypto.subtle.digest, the SubtleCrypto interface built into every modern browser — no server round trip, no library, and no token or file content ever leaves the page.

Four algorithms computed from the same input

An ALGOS array lists the four digest algorithms SubtleCrypto supports natively — SHA-1, SHA-256, SHA-384, and SHA-512 — and computeAll() runs the same ArrayBuffer through crypto.subtle.digest() once per algorithm, updating each row independently as its promise resolves. Notably, SubtleCrypto does not expose MD5 at all — it was deliberately excluded from the Web Crypto spec because MD5 is cryptographically broken, which is itself a useful thing for this tool to demonstrate by omission.

Encoding text into bytes before hashing

crypto.subtle.digest operates on raw bytes, not JavaScript strings, so any digest algorithm needs its input as an ArrayBuffer or typed array first. For text input, TextEncoder().encode(text) converts the string into a UTF-8 Uint8Array before it is handed to digest(). This is the same encoding step every server-side hashing library performs implicitly — making it explicit here is what makes the digests match shasum or Node's crypto.createHash output exactly for the same input text.

Hashing a file directly

The file input reads the selected file as raw bytes via file.arrayBuffer(), an async File API method, and passes that buffer straight into the same computeAll() function used for text — no re-encoding needed, since the file's bytes are already exactly what should be hashed. This lets the tool double as a quick file-integrity checker: hash a downloaded file locally and compare it against a publisher's published checksum without installing anything.

Converting a digest buffer into a hex string

crypto.subtle.digest() resolves to a raw ArrayBuffer, not a readable string. bufferToHex() wraps it in a Uint8Array, then converts each byte to a two-character hex pair with byte.toString(16).padStart(2, '0') — the padStart call matters because a byte value under 16 (like 0x0a) would otherwise produce a single hex character and silently shift every following byte pair, corrupting the digest's readable representation.

Avoiding stale results with a request counter

Because typing triggers a new async digest() call on every keystroke and digests do not necessarily resolve in the order they were requested, a simple incrementing requestId closure variable is captured at the start of each computeAll() call. Before writing any result to the DOM, the code checks that the captured id still matches the latest requestId — if the user kept typing while an older digest was still computing, that stale result is silently discarded instead of overwriting a newer, correct one.