File Hash Calculator: Implementing MD5/SHA-1/SHA-256/SHA-512 with Web Crypto API#

2026-05-05 23:03

You downloaded an installer, and the official site gave you an MD5 checksum to “verify file integrity.” How? Terminal commands? Install software? Too much hassle—your browser can do it right now.

JsonKit’s File Hash Calculator does exactly that. Drop a file in, and it computes MD5, SHA-1, SHA-256, and SHA-512 all at once. Best part: files never leave your browser—it’s all local computation.

What Does a Hash Function Actually Compute#

Hash functions are like “digital fingerprint extractors”: no matter how large the input file, the output is always a fixed-length string. And it’s one-way—you can compute the fingerprint, but you can’t reconstruct the original file from it.

// The core code is surprisingly simple
const buffer = await file.arrayBuffer()
const hashBuffer = await crypto.subtle.digest('SHA-256', buffer)
const hashHex = Array.from(new Uint8Array(hashBuffer))
  .map(b => b.toString(16).padStart(2, '0'))
  .join('')

crypto.subtle.digest() is the browser’s native Web Crypto API. Under the hood, it calls the operating system’s cryptographic libraries, making it much faster than pure JavaScript implementations.

Which Algorithm Should You Use#

Algorithm Output Length Security Typical Use
MD5 128 bit ⚠️ Broken File verification, non-security contexts
SHA-1 160 bit ⚠️ Broken Git objects, legacy systems
SHA-256 256 bit ✅ Secure Digital signatures, blockchain
SHA-512 512 bit ✅ Secure High-security requirements

MD5 and SHA-1 have been proven vulnerable to collision attacks—meaning attackers can craft two different files that produce the same hash. So for security-critical scenarios (SSL certificates, digital signatures), avoid these two. But for simple file integrity checks? MD5 is still fine. Collision attacks require精心 crafted inputs; the probability of an accidental collision is lower than winning the lottery.

Handling Large Files#

file.arrayBuffer() reads the entire file into memory. A 10MB file is fine, but a 1GB file? The browser will crash.

In production, you need chunked computation:

async function hashLargeFile(file, algorithm = 'SHA-256') {
  const chunkSize = 2 * 1024 * 1024 // 2MB chunks
  const chunks = Math.ceil(file.size / chunkSize)

  // SHA-256 etc. require streaming API
  // But Web Crypto doesn't support it natively
  // You need libraries like SparkMD5

  // Or use File.slice() for chunked reading
  for (let i = 0; i < chunks; i++) {
    const start = i * chunkSize
    const end = Math.min(start + chunkSize, file.size)
    const chunk = file.slice(start, end)
    const buffer = await chunk.arrayBuffer()
    // Incrementally update hash...
  }
}

Web Crypto API’s digest() is a one-shot operation—it doesn’t support streaming updates. For streaming hashes, you’ll need pure JS libraries like SparkMD5 or hash.js. They’ll be slower, though.

Parallel Computation for Speed#

Computing four hashes sequentially? No need:

const [md5, sha1, sha256, sha512] = await Promise.all([
  calculateMD5(file),
  calculateSHA(file, 'SHA-1'),
  calculateSHA(file, 'SHA-256'),
  calculateSHA(file, 'SHA-512'),
])

Promise.all triggers all four computations in parallel. While JS is single-threaded, the Web Crypto API is native code underneath and can leverage multi-core CPUs. In practice, parallel computation is 2-3x faster for large files.

How to Implement Progress Bars#

crypto.subtle.digest() has no progress callback—only “computing” and “done” states. To show a progress bar, you have to simulate it:

// Simulated progress (actual computation has no intermediate states)
const progressInterval = setInterval(() => {
  setProgress(prev => Math.min(prev + 10, 90)) // Max 90%
}, 100)

// Jump to 100% when done
clearInterval(progressInterval)
setProgress(100)

For accurate progress, you’d need the chunked approach—update progress after each chunk. But that adds complexity for minimal UX improvement—most file hashes complete in seconds anyway.

File Verification in Practice#

Downloaded an Ubuntu ISO? The official site provides a SHA-256:

e4e3b7b7c7b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7b7

Drop it into the File Hash Calculator. Match? Your download is intact—no packet loss, no malware, no man-in-the-middle tampering. Mismatch? Delete and re-download immediately.

MD5 works fine for this scenario, but SHA-256 gives more peace of mind—MD5 collisions are hard but not impossible.

Security Considerations#

All computation happens locally in your browser. file.arrayBuffer() reads the file into memory, then passes it directly to crypto.subtle.digest()—the data never leaves your computer. You can safely hash ID photos, contract PDFs, or other sensitive files.

Of course, that assumes you trust the website. If you’re paranoid, open browser DevTools and check the Network panel for any upload requests—you won’t find any.

Related Tools: