HMAC & Message Auth Lab
A shared-key tag is how a webhook, an API request or a JWT proves it was not altered and really came from who it claims. This lab runs the real thing — HMAC-SHA256 via your browser's Web Crypto API, no server, no mocks. Tag a message in the workbench and watch a one-character edit break the tag, then take the graded run: play the verifier, flag the tampered requests a real server would reject, and learn why a raw SHA256(key‖message) is unsafe and why tags must be compared in constant time.
The real job. More noise, a tighter clock.
HMAC workbench
real HMAC-SHA256, in your browserThe sender tags the message with the shared key. Change the received copy by one character and watch the tag stop verifying — that is tamper detection.
—
Graded run
You are the server verifying incoming signed requests. For each classify round, decide whether the message is authentic or tampered — graded against a REAL HMAC-SHA256 verification done in your browser. For each pitfall round, pick the safe construction or comparison. Clear 80% to pass; finish under par for a speed bonus and a better grade.
Precomputing HMAC tags with Web Crypto…
What this lab is
- A free, browser-based HMAC lab that runs REAL HMAC-SHA256 via the Web Crypto API — the exact primitive that signs webhooks, API requests and JWTs.
- A live workbench tags a message with a shared key; change the received copy by one character and watch the tag stop verifying — that is tamper detection.
- A graded run puts you in the verifier seat: decide whether each incoming (message, tag) pair is authentic or tampered, scored against an actual crypto.subtle verification.
- Tampers get subtler by tier — a flipped digit, a trailing space, a homoglyph, even an invisible zero-width character — to prove HMAC catches any byte change your eyes cannot.
- Two pitfall rounds teach the theory that matters: why SHA256(secret ‖ message) is open to a length-extension attack while HMAC is not, and why tags must be compared in constant time.
Frequently asked questions
What is the HMAC & Message Auth Lab?
A free, in-browser exercise that teaches message authentication with real cryptography. A workbench computes a genuine HMAC-SHA256 tag over a message and a shared key using the Web Crypto API, and a graded run asks you to classify incoming (message, tag) pairs as authentic or tampered — each call checked against an actual crypto.subtle.verify. It also covers two classic pitfalls: length extension and non-constant-time tag comparison.
Is this real HMAC or a simulation?
Real. Every tag is produced by crypto.subtle.sign with HMAC over SHA-256, and every verdict comes from crypto.subtle.verify — the same code path a production service uses. Nothing is faked or precomputed on a server; it all runs locally in your browser with no account, upload or install.
Why is SHA256(secret ‖ message) unsafe?
Because SHA-256 is a Merkle–Damgård hash, an attacker who knows SHA256(secret ‖ message) and the length of the secret can append data and compute a valid digest for the extended message without ever knowing the secret — a length-extension attack. HMAC wraps the inner keyed hash in a second keyed hash, so the value an attacker sees is never a raw hash state they can extend. Use HMAC, never a naive keyed hash.
Why compare tags in constant time?
A short-circuiting comparison like a === b returns as soon as it finds the first differing byte, so how long it takes leaks how many leading bytes matched. An attacker can measure that timing to recover a valid tag byte by byte. A constant-time comparison inspects every byte regardless, leaking nothing — and crypto.subtle.verify already does this for you.
Who is it for?
Engineers signing or verifying webhooks and API requests, security people learning how MACs actually behave, and anyone prepping for a cryptography or app-security interview. The lesson — a valid tag proves both integrity and origin, and any change breaks it completely — lands faster when you can see it happen.