HomeGuidesHow to Use the Browser Web Crypto API for Client-Side Hashing & Encryption
Security & Web APIs6 min readUpdated 2026-11-06

How to Use the Browser Web Crypto API for Client-Side Hashing & Encryption

Harness native hardware-accelerated SubtleCrypto in JavaScript for SHA-256 digests and zero-knowledge privacy.

Need to do this immediately?

Use our free, private client-side browser tool with zero installation.

View Web Crypto API Cheat Sheet
Historically, doing cryptography in the browser required bloated third-party JavaScript libraries (CryptoJS) that were slow and susceptible to side-channel timing attacks. Modern web browsers include the native Web Crypto API (`window.crypto.subtle`), executing cryptographic operations directly on native host hardware.

Why Native Web Crypto Beats JavaScript Libraries

The Web Crypto API executes in compiled C++ inside the browser engine, running 10x to 50x faster than pure JavaScript alternatives while preventing memory-scraping attacks.

Because cryptographic keys are stored as non-extractable CryptoKey handles in memory, malicious third-party scripts and cross-site scripting (XSS) payloads cannot export the raw secret keys.

Pro Tip:SubtleCrypto requires a Secure Context (HTTPS or localhost); it is completely disabled on plain HTTP origins.

Calculating SHA-256 Digests in 3 Lines of Code

Computing a cryptographic hash is asynchronous and requires converting strings to ArrayBuffers using TextEncoder: `const buffer = new TextEncoder().encode("data"); const hash = await crypto.subtle.digest("SHA-256", buffer);`.

Formatting the raw binary Uint8Array into a standard 64-character hex string allows instant verification against server checksums.

Step-by-Step Tutorial

1

Convert Data to ArrayBuffer

Use `new TextEncoder().encode(str)` for text or `await file.arrayBuffer()` for uploaded documents.

2

Invoke crypto.subtle.digest

Pass the algorithm name ("SHA-256") and the ArrayBuffer to obtain an ArrayBuffer hash.

3

Format to Hexadecimal String

Map byte values with `.toString(16).padStart(2, "0")` to generate the final digest string.

Ready to Try It Yourself?

DocSwift processes everything directly on your device. Fast, safe, and completely free forever.

How helpful was this guide?

Rated 4.9 / 5 by 3,420+ users worldwide

Share with Colleagues & Friends

Help others protect their document privacy

Frequently Asked Questions

Is Web Crypto API supported on mobile browsers?

Yes! `window.crypto.subtle` is supported in 100% of modern mobile browsers including iOS Safari, Chrome on Android, and Samsung Internet.