The Web Crypto API: A Practical Guide for Frontend Developers

The Web Crypto API lets you perform cryptographic operations directly in the browser without any external libraries. It is fast, secure, and available in every modern browser.

SHA-256 Hashing

const data = new TextEncoder().encode("hello world");
const hash = await crypto.subtle.digest("SHA-256", data);
const hex = Array.from(new Uint8Array(hash)).map(b => b.toString(16).padStart(2, "0")).join("");

HMAC Generation

const key = await crypto.subtle.importKey("raw", new TextEncoder().encode("secret"), { name: "HMAC", hash: "SHA-256" }, false, ["sign"]);
const sig = await crypto.subtle.sign("HMAC", key, new TextEncoder().encode("message"));

Random Values

crypto.getRandomValues(new Uint8Array(32)) gives you 32 cryptographically random bytes. Use this for tokens, nonces, and key material.

UUID Generation

crypto.randomUUID() generates a v4 UUID in one call. No library needed.

When to Use It

Use Web Crypto for: client-side hashing, HMAC verification, random generation, and privacy-first tools where data should not leave the browser. All of our hash, HMAC, and password tools use it.

Do not use it for: password hashing (use bcrypt/argon2 on the server) or anything requiring long-term key storage.