DEV Community

Devanshu Biswas
Devanshu Biswas

Posted on

Generate SHA Hashes in the Browser With the Web Crypto API

#webdev #javascript #security #beginners

Need a SHA-256 of some text or a file? Your browser already has a crypto engine — no library, no server. Here's a hash generator built on the Web Crypto API.

🔐 Try it (text or file): https://dev48v.infy.uk/solve/day19-hash-generator.html

The whole thing 

const bytes = new TextEncoder().encode(text);
const buf   = await crypto.subtle.digest("SHA-256", bytes);
const hex   = [...new Uint8Array(buf)].map(b => b.toString(16).padStart(2, "0")).join("");
Enter fullscreen mode Exit fullscreen mode

That's a real SHA-256. Swap in "SHA-1" / "SHA-384" / "SHA-512". For files, read an ArrayBuffer and digest that. (Sanity: SHA-256 of "abc" = ba7816bf8f01cfea….)

What a hash actually is

A one-way fingerprint: same input → same hash, any change → a totally different hash (the avalanche effect — the demo shows it), and you can't reverse it. Used for integrity/checksums, content addressing (git commits are hashes), and dedup.

Two things people get wrong

  • Hashing ≠ encryption. No key, not reversible. Don't use it to "hide" data.
  • Don't hash passwords with plain SHA. It's too fast to brute-force — use a slow, salted KDF (bcrypt/argon2). And MD5/SHA-1 are broken; use SHA-256+.

🔨 Full build (TextEncoder → crypto.subtle.digest → hex → files) on the page: https://dev48v.infy.uk/solve/day19-hash-generator.html

Part of SolveFromZero. 🌐 https://dev48v.infy.uk

Top comments (0)