Diagramium
🔒 Narrated diagram

How HTTPS keeps you safe

Two machines that have never met agree on a secret while everyone is listening. The certificate, the chain of trust, the key exchange and the encrypted traffic that follows.

15 steps3 min readNarrated with a studio voice
How HTTPS keeps you safeopens a connectionciphers I supportcipher chosensigned bypublic keyroot reachedidentity acceptedderivetranscriptproof of ownershipkey readyhandshake verifiedeach chunkfor next timein practiceA source or sink outside the system (person or system)Your browserA transform that changes data1Client helloA transform that changes data2Server helloA transform that changes data3Certificate presentedWhere data rests — a file, table or databaseCertificate authority signed itA transform that changes data4Chain of trust followedA transform that changes data5Name, dates and revocationA transform that changes data6Key exchange in the openWhere data rests — a file, table or databaseShared session keyA transform that changes data7Server signs the handshakeA transform that changes data8Finished messages comparedA transform that changes data9Symmetric encryption beginsA transform that changes data10Every record sealed and taggedA transform that changes data11Resumption ticket savedA source or sink outside the system (person or system)What the padlock does not promise
How HTTPS keeps you safe — the complete diagram. Press Present to watch it build itself.
Step 1 of 15

Your browser

The padlock in your address bar stands for a conversation that happens before any web page moves. Two machines that have never met agree on a shared secret, in the open, while anyone on the wire can listen.

Step 2 of 15

Client hello

Your browser speaks first. It lists the encryption it can handle, sends a freshly generated random number, and in the modern version of the protocol it already guesses at a key, so the whole negotiation fits inside a single round trip.

Step 3 of 15

Server hello

The server picks one cipher from that list and answers with a random number of its own. Those two randoms, mixed with fresh key material from both sides, make it effectively impossible for any two sessions anywhere to end up with the same key.

Step 4 of 15

Certificate presented

Then the certificate arrives: a public file saying this key belongs to this domain name, signed by a company your browser already trusts. Most certificates now expire within about ninety days rather than years.

Step 5 of 15

Certificate authority signed it

Certificate authorities are the notaries of the web. Your device ships with roughly a hundred and fifty of their root certificates baked in, and every padlock on Earth traces back to one of them.

Step 6 of 15

Chain of trust followed

The browser follows the signatures upward, link by link, until it reaches a root it already holds. Break any link in that chain and the connection stops dead with a full page warning instead of a website.

Step 7 of 15

Name, dates and revocation

It also checks the unglamorous things. Has the certificate expired, does the name really match the site you asked for, has it been revoked. Almost every certificate error you have ever seen is one of those three.

Step 8 of 15

Key exchange in the open

Now the clever part. Each side mixes a private number with a public one and both arrive at the same secret without ever sending it. Someone who recorded every packet still cannot compute what they agreed on.

Step 9 of 15

Shared session key

Out of that comes a session key that is thrown away when you close the tab. Steal the server's long term key next year and last year's recordings stay gibberish. That property is called forward secrecy.

Step 10 of 15

Server signs the handshake

The server signs the whole conversation so far with the private key matching its certificate. This is the moment it proves it truly is the site, and not just a machine holding a copy of a public file.

Step 11 of 15

Finished messages compared

Both sides then send a finished message, a fingerprint of everything said up to now. If a middleman quietly altered one byte anywhere in the handshake, the fingerprints disagree and the connection is abandoned.

Step 12 of 15

Symmetric encryption begins

From here the conversation switches to fast symmetric encryption, usually with hardware acceleration built directly into your processor. On a modern phone or laptop it adds a couple of milliseconds to the page load, no more.

Step 13 of 15

Every record sealed and tagged

Every chunk carries an authentication tag alongside the ciphertext. That stops anyone flipping bits to change, say, a transfer amount, even blindly. Encryption hides the message and the tag proves nobody touched it.

Step 14 of 15

Resumption ticket saved

Next time you return, a resumption ticket lets both sides skip nearly all of this. A repeat visit can start sending encrypted data in its very first packet, with no extra round trip at all.

Step 15 of 15

What the padlock does not promise

One honest caveat to finish. The padlock proves who you are talking to and that nobody can read it. It says nothing about whether the site deserves your trust, and an observer can still see which site you visited.

Watch it explain itself

Every step above is narrated aloud. Play it, or open it in the editor and make it yours — no account needed.