How TLS and HTTPS Work: The TLS 1.3 Handshake & SSL Stripping (Animated)

TLS is what puts the “S” in HTTPS. It gives three guarantees: encryption (nobody can read the traffic), authentication (the certificate proves which server you reached) and integrity (nothing was changed on the way).

1. Client hello: here is what i support

The browser opens with the TLS versions and ciphers it supports, plus its half of a key exchange.

1. CLIENT HELLO (Your laptop → Web server): Sent in clear text. SNI names the site wanted; the key share is the browser’s half of a Diffie-Hellman exchange.

Wireshark filter:

tls.handshake.type == 1

2. Server hello & certificate: here is my choice, and proof of who i am

The server picks the cipher, sends its own key share, and proves its identity with a certificate signed by a trusted authority.

1. SERVER HELLO (Web server → Your laptop): With both key shares, each side computes the same secret without ever sending it. An eavesdropper who saw both shares still cannot.
2. CERTIFICATE (Web server → Your laptop): The browser checks: is the name right, is it in date, is it signed by an authority I trust? The Certificate Verify signature proves the server really holds the private key.

Wireshark filter:

tls.handshake.type == 2

3. Finished: handshake complete

Both sides confirm that nothing in the handshake was tampered with. TLS 1.3 needs only one round trip.

1. FINISHED (Your laptop → Web server): If an attacker had altered any earlier message, this check would fail and the connection would close.

Wireshark filter:

tls.handshake.type == 20

4. Encrypted data: http inside tls

Now ordinary HTTP flows inside the encrypted tunnel. That is all HTTPS is.

1. APP DATA (Your laptop → Web server): To anyone watching, this is random-looking bytes.
2. APP DATA (Web server → Your laptop): The reply is encrypted the same way.

Wireshark filter:

tls.record.content_type == 23

5. Ssl stripping: attack: keep the victim on http

Many users type bank.example without https://, so the first request is plain HTTP. A man-in-the-middle answers that request himself and never lets the browser upgrade.

1. HTTP GET (Your laptop → Attacker): The first request is unencrypted and goes through the attacker.
2. HTTPS (Attacker → Web server): The attacker opens a genuine HTTPS connection to the bank on the victim’s behalf.
3. HTTP 200 (Attacker → Your laptop): The victim gets the real page, but over HTTP with every https link rewritten. The only clue is the missing padlock.
4. HTTP POST (Your laptop → Attacker): The password reaches the attacker in clear text.

Wireshark filter:

http.host == "bank.example"

6. Hsts: defence: the browser refuses plain http

With HSTS the site tells browsers “only ever use HTTPS for me”. Popular sites are preloaded into browsers, so even the first visit is protected.

1. CLIENT HELLO (Your laptop → Web server): The browser never sends plain HTTP. If the attacker tries a fake certificate, the browser shows an error that cannot be clicked through.

Server response header:

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

FAQ