I Built a Browser-Only Hash Generator (MD5, SHA-1, SHA-256, SHA-512 — No Server)

#javascript #webdev #devtools #security

You need an SHA-256 of a string. You could open a terminal. Or you could paste it somewhere online — but then you're sending potentially sensitive data (a test password, an internal identifier) to a server you don't control.

I built a Hash Generator that computes MD5, SHA-1, SHA-256, SHA-384, and SHA-512 entirely in your browser. No network requests, works offline.

👉 https://hash-generator-745.pages.dev

Five Algorithms, One Paste

Paste your input and all five hashes appear simultaneously. Click any hash value to copy it.

MD5 — legacy checksums, file integrity verification
SHA-1 — older protocols, Git object IDs
SHA-256 — API signatures, file checksums, TLS certificates
SHA-384 — NIST recommended, TLS 1.3
SHA-512 — high-security contexts

Results update on every keystroke. No "submit" button.

Why This Matters for Sensitive Inputs

Hash generators have a privacy problem most people don't think about: the input is often sensitive.

You're checking a checksum? You're pasting the file contents or a candidate value. You're debugging an API signature? You're pasting the signing key material or payload. You're validating a password hash? You're pasting a test password.

Most online hash tools run on servers. That input travels over the network. With a client-side tool, the computation never leaves your browser — the server only delivers the HTML once.

The Technical Highlight: MD5 Is Missing From Web Crypto API

SHA-256, SHA-384, and SHA-512 are built into every modern browser via the Web Crypto API:

async function sha(algo, text) {
  const data = new TextEncoder().encode(text);
  const buf = await crypto.subtle.digest(algo, data); // "SHA-256" etc.
  return [...new Uint8Array(buf)]
    .map(b => b.toString(16).padStart(2, "0"))
    .join("");
}

Note the padStart(2, "0") — skip that and 0x0a becomes "a" instead of "0a", silently corrupting every hash that has a leading-zero byte.

MD5 is intentionally excluded from Web Crypto API because it's cryptographically broken. But MD5 checksums are still common in legacy systems, file downloads, and package verification. So MD5 required a manual implementation in plain JavaScript — bitwise operations, 4-round structure, little-endian byte order, all of it.

This creates an asymmetric architecture: SHA variants use a one-liner browser API; MD5 uses ~80 lines of hand-written JS. The MD5 implementation is validated against RFC 1321 test vectors:

""       → d41d8cd98f00b204e9800998ecf8427e
"abc"    → 900150983cd24fb0d6963f7d28e17f72
"message digest" → f96b697d7cb7938d525a2f31aaf161d0

All 42 test cases pass including multi-byte Unicode inputs.

No Frameworks, No Dependencies

A hash calculator has one input and five outputs. React's overhead — build tooling, bundle size, dependency updates — isn't justified here. A single HTML file with vanilla JS loads faster, has no supply chain attack surface, and works from browser cache after first visit.

Tool complexity:    low
Framework overhead: high
Decision:           vanilla JS wins

This is devnestio's rule across all tools: single HTML file, zero external dependencies.

What's Coming Next

File drag-and-drop for checksumming files directly (with chunked processing for large files)
HMAC support (keyed hashing)
Comparison mode — paste an expected hash and verify against it