1. The Story
Press "Next" to go through it step by step. In each step a character appears and explains what they are doing.
Prologue: A Quick Recap
Step 1 of 12
Look Up the Name, Then Shake Hands
Let me look that up... The IP Address of example.com is 192.0.2.80! Next, Mac and the server do the TCP (Transmission Control Protocol) three-way handshake on Port 443, the usual Port for web pages.
Animation text version (all steps)
- Prologue: A Quick Recap
- Look Up the Name, Then Shake Hands · Dr. Lookup: Let me look that up... The IP Address of
example.comis192.0.2.80! Next, Mac and the server do the TCP (Transmission Control Protocol) three-way handshake on Port 443, the usual Port for web pages. - Act 1: The Trouble with Postcards
- An Eavesdropper on the Same Wi-Fi · Pip: The coffee shop's Wi-Fi is public, so anyone can join. The eavesdropper's computer is here too, and because radio waves travel through the air, every device nearby can pick them up.
- Sending a Password over HTTP? · Pip: With HTTP (Hypertext Transfer Protocol), the letter in my backpack is like a postcard: "User: Mac, Password: ..." The eavesdropper picks up a copy of the signal and can read every single word!
- Three Risks · Pango: I'm Pango, the Firewall guarding the network's exit. Postcards have three risks: peeking, tampering and impersonating. Someone could read your data, change your web page, or even pretend to be
example.comto steal your password. I only look at addresses and Ports, not what's inside the letter. With HTTP postcards, I can't stop anyone from peeking either.- Peeking: reading passwords and content
- Tampering: adding adverts or malware to a web page
- Impersonating: pretending to be the real website
- Act 2: TLS Seals the Letter
- ClientHello · Pip: Switch to HTTPS! First comes the TLS (Transport Layer Security) handshake. I set off carrying ClientHello: "I support TLS 1.3 and these encryption methods; here is my key material; I'm looking for
example.com."- HTTPS = HTTP + TLS
- The TLS handshake happens after the TCP three-way handshake
- ServerHello and the Certificate · Pip: The server replies with ServerHello and attaches its own key material. Then it shows its Digital Certificate: "I really am
example.com. Here's my proof." - Proving Who You Are · Pip: Mac's browser checks the certificate carefully. Was it issued by a trusted CA (Certificate Authority)? Is the name
example.com? Has it expired? Everything passes! Even if someone tricks Dr. Lookup's phone book, a fake server can at most copy the certificate. Without the matching Private Key, it can't prove the certificate is its own.- ① Issuer: a trusted CA built into the browser
- ② Name:
example.com - ③ Validity: not expired
- If any check fails → the browser shows a warning
- Each Side Works Out the Same Key · Pip: Using the key material they just swapped, Mac and the server each calculate the same key on their own end. The key is never sent across the network, so even if the eavesdropper collects all the material, they can't work it out!
- This method is called Diffie-Hellman Key Exchange
- Every conversation uses a brand-new key
- A Sealed Letter · Pip: Now the letter in my backpack is fully encrypted. The copy the eavesdropper picks up is just a jumble of gibberish. And if anyone changes the content on the way, the server will notice straight away.
- Act 3: A Reminder from Pango
- What Can Still Be Seen? · Pango: If I stood at the coffee shop's network exit, I could see that Pip is going to
192.0.2.80, Port 443, and usually the website name too. But the content of the letter, the password and the URL path are all hidden from me. HTTPS protects the content. - A Padlock Doesn't Mean a Good Guy · Pango: A reminder for everyone: I only check addresses and Ports, so I can't tell a real website from a fake one. Scammers can also get a valid certificate for a fake name like
example.com.example.net. The padlock only means "you are talking privately with this name". Always check the web address carefully before you log in! - Summary: The Sealed Letter · Pip: HTTPS = HTTP + TLS: first prove who you are, then each side works out the key, then the letter is sealed. On public Wi-Fi, only type your password when the address starts with
https://and the name is correct!
2. Where Is the Problem
Mac is online in a coffee shop, with the address 192.168.0.23. The coffee shop's Wi-Fi (wireless network) is public. Anyone can join, and an eavesdropper could be sitting right next to you.
If a website only uses HTTP (Hypertext Transfer Protocol), the letter in Pip's backpack is like a postcard: everyone it passes can read it. This brings three risks:
| Risk | What the bad guy does | Example |
|---|---|---|
| Peeking | Reads what you send and receive | Passwords, messages, credit card numbers |
| Tampering | Changes the content along the way | Adds adverts or malware to a web page |
| Impersonating | Pretends to be the real website | A fake example.com login page that tricks you into typing your password |
HTTP on its own has no way at all to stop these three things.
Pango is the Firewall (a guard that checks the packets going in and out) standing at the network's exit. Story 19 introduces his list in detail. But he only looks at addresses and the Port (the numbered door that tells a computer which program should receive the data). He can't see what is inside the letter, so he can't help here either.
3. How the Network Solves It
Switch to HTTPS (Hypertext Transfer Protocol Secure), which is HTTP plus TLS (Transport Layer Security). TLS is a technology that encrypts a connection and proves who the server is.
It's like doing three things before you post a letter: first, check the recipient's ID card carefully; next, agree on a key that only the two of you know; finally, seal the envelope and stamp it with a wax seal.
The ID card is the Digital Certificate. Sealing the envelope stops anyone from seeing the content. And once the wax seal is broken, the recipient knows the letter has been changed.
4. A Closer Look
The TLS 1.3 handshake, step by step
The TLS handshake happens after the TCP (Transmission Control Protocol) three-way handshake. The server usually waits on Port 443. Taking TLS 1.3 as an example:
- ClientHello: Mac's browser says: "I support TLS 1.3 and these encryption methods; here is my key material; I'm looking for
example.com." - ServerHello: The server picks an encryption method and attaches its own key material.
- Each side works out the key: Using the material they just swapped, each side calculates the same key on its own end.
- Show the certificate and sign: The server sends its Digital Certificate, then makes a signature with the Private Key that matches the certificate. This proves the certificate really belongs to it.
- The browser checks: The certificate passes and the signature is correct, so the handshake is complete.
- Sending for real: From now on, every HTTP request and reply is encrypted with that key.
In real TLS 1.3, step 3 happens right after ServerHello, so the certificate itself is also sent encrypted. To make things easier to follow, the animation explains the certificate first and the key afterwards.
Who is the server 192.0.2.80?
Dr. Lookup finds that the address of example.com is 192.0.2.80. Note: an address starting with 192 is not always Private. Only addresses starting with 192.168 are. 192.0.2.80 is a public address on the Internet (this website uses example addresses reserved for documentation).
How does a certificate "prove who you are"?
A Digital Certificate is an electronic document that says "the public key for this domain is this one". It is issued by a CA (Certificate Authority). A CA is an organisation that checks who owns a domain and then signs the certificate. Browsers and operating systems come with a built-in list of trusted CAs.
The browser checks three things:
| What is checked | Question | What happens if it fails |
|---|---|---|
| Issuer | Was it issued by a trusted CA? | A security warning is shown |
| Name | Is the name on the certificate example.com? |
A security warning is shown |
| Validity period | Has the certificate expired? | A security warning is shown |
Certificates are public, so anyone can copy one. That means even if someone tricks Dr. Lookup's phone book, a fake server can at most copy the certificate. Without the matching Private Key, it can't pass the signature test in step 4, so it can't prove the certificate is its own.
The key is never sent across the network
The two sides only swap "key material". The real key is calculated separately on each side. This method is called Diffie-Hellman Key Exchange. Even if an eavesdropper collects all the material, they can't work out the key.
Every connection uses a brand-new key. After that, the data is protected with Symmetric Encryption, which means the same key is used to lock and unlock, so it is very fast. Each piece of encrypted data also carries a check code. If even one bit is changed on the way, the recipient will notice.
After encryption, what can still be seen?
TLS only encrypts "the content of the letter". The IP header holds the sender's and recipient's IP Addresses (network addresses), so the Routers (devices that choose the path) along the way can find the route. The TCP header tells the other side which program to hand the data to. So neither of them can be encrypted.
Visible: sender IP, recipient IP 192.0.2.80, Port 443, website name (usually)
Hidden: URL path (e.g. /login), passwords, page content, Cookies
Why can the website name usually be seen? Because ClientHello has a field called SNI (Server Name Indication). It writes the domain you want in plain text, so a server hosting many sites knows which certificate to show. A newer technology, ECH (Encrypted ClientHello), can encrypt this name too, but not every website supports it.
5. Try It Yourself
Mission: take a look at your connection
- Open any
https://website in a browser on your computer. - Click the padlock or settings icon to the left of the address bar, and look for "Connection is secure" or "Certificate".
- See which domain the certificate was issued to, which CA signed it, and when it expires.
- Think about it: if the address is
example.com.example.net(it looks like example.com at the start, but actually belongs to example.net), could it also have a padlock? (Answer: Yes!)
Mini game
What does HTTPS protect?
When you use HTTPS on public Wi-Fi, which of these can an eavesdropper NOT see, and which can they still see?
-
1The password you type
-
2Your IP Address
-
3The name of the website you connect to
-
4The content of the web page
-
5The Port number you connect to (443)
-
6The path of the URL, such as /login
All sorted correctly! HTTPS protects the content (passwords, web pages, paths). The addresses, Port and website name can usually still be seen.
6. Where the Analogy Breaks
- There isn't really an envelope. TLS uses maths to turn data into gibberish. "Sealing" and "wax seal" are just ways to describe encryption and tamper protection.
- A padlock doesn't mean a good guy. Scammers can also get a valid certificate for a look-alike name such as
example.com.example.net. The padlock only means "you are talking privately with this name". It does not mean the website can be trusted. - Eavesdropping isn't always that easy. Wi-Fi encrypted with WPA (Wi-Fi Protected Access) makes eavesdropping much harder. But you can't be sure how a public Wi-Fi network is set up, so you still need HTTPS to protect yourself.
- HTTPS only protects the journey. Once the data reaches the server, it is unlocked. How the server looks after your data is outside what HTTPS can control.
- ID cards have loopholes too. If someone installs a fake "trusted CA" on your computer, your browser might not show a warning. So don't install certificates from unknown sources.
7. Quiz
8. Key Notes
- HTTPS = HTTP + TLS (Transport Layer Security). It prevents peeking, tampering and impersonating.
- The server shows a Digital Certificate issued by a CA (Certificate Authority), and signs with its Private Key to prove it really is
example.com. - Using Diffie-Hellman Key Exchange, both sides work out the same key on their own. The key is never sent across the network.
- HTTPS encrypts the content, passwords and URL path. The IP Address, Port and website name can usually still be seen.
- A padlock doesn't mean a website can be trusted. Always check the web address carefully before you log in.
Further reading
HTTPS seals every letter, but only for websites and programs that support HTTPS. What if Mac wants to connect safely from the coffee shop back home, to use the devices at home that have no encryption? In the next story, Rue and Pango dig a secret tunnel together: a VPN (Virtual Private Network).