Visual TLS Handshake

Step-by-step visualization of TLS 1.2 and TLS 1.3 handshakes. Understand what happens behind the scenes.

1

ClientHello

Client → Server

The client sends a hello message with supported TLS 1.3 cipher suites, key share for key exchange, and other extensions. SNI is included.

Key fields:

  • TLS version: 1.3
  • Supported cipher suites
  • Key share (client public key)
  • SNI: example.com
2

ServerHello + EncryptedExtensions

Server → Client

The server responds with the selected cipher suite, its key share, and encrypted extensions. The server's certificate and CertificateVerify are also sent.

Key fields:

  • Selected cipher suite
  • Server key share
  • Server certificate
  • CertificateVerify
3

Certificate + CertificateVerify

Server → Client

The server sends its certificate chain and a signature proving it owns the private key. This is sent along with ServerHello in TLS 1.3.

Key fields:

  • Server certificate chain
  • Signature proof
4

Finished

Server → Client

The server sends a Finished message encrypted with the handshake keys, confirming the handshake is complete.

Key fields:

  • Encrypted verification data
5

Client Finished

Server → Client

The client sends its own Finished message, also encrypted with the handshake keys.

Key fields:

  • Encrypted verification data
6

Application Data

Bidirectional

After the handshake completes, encrypted application data can be exchanged. TLS 1.3 is faster because it requires fewer round trips.

Key fields:

  • Encrypted HTTP traffic