HTTP vs HTTPS - TLS Handshake & Certificate Chain

▶

Steps

setup

Client sends ClientHello

The client initiates the TLS handshake by sending a ClientHello message to the server. This message includes supported TLS versions, cipher suites, and a random nonce.

💡 This step starts the secure connection setup, signaling the client's capabilities and intent to establish a secure session.

Line:

send(ClientHello)

💡 The handshake begins with the client proposing security parameters.

fill_row

Server receives ClientHello and sends ServerHello

The server receives the ClientHello and responds with a ServerHello message. It selects the TLS version and cipher suite from the client's list and sends its own random nonce.

💡 The server confirms the security parameters to use, establishing the basis for the secure session.

Line:

receive(ClientHello)
send(ServerHello)

💡 ServerHello finalizes the protocol parameters for the session.

fill_cells

Server sends Certificate

The server sends its digital certificate to the client. This certificate contains the server's public key and is signed by a trusted Certificate Authority (CA).

💡 The certificate allows the client to verify the server's identity and establish trust.

Line:

send(Certificate)

💡 Certificate transmission is essential for authentication in HTTPS.

fill_cells

Server sends ServerHelloDone

The server sends a ServerHelloDone message indicating it has finished its part of the handshake messages.

💡 This message signals the client to proceed with key exchange and authentication.

Line:

send(ServerHelloDone)

💡 ServerHelloDone marks the transition to client key exchange.

compare

Client verifies Certificate

The client verifies the server's certificate by checking the CA signature and certificate validity.

💡 Verification ensures the server is trustworthy and prevents man-in-the-middle attacks.

Line:

verify_certificate(certificate)

💡 Certificate verification is critical for secure HTTPS connections.

insert

Client sends ClientKeyExchange

The client sends the ClientKeyExchange message containing the pre-master secret encrypted with the server's public key.

💡 This message allows both parties to derive the same session key securely.

Line:

send(ClientKeyExchange)

💡 Key exchange enables encrypted communication.

expand

Client sends ChangeCipherSpec

The client sends a ChangeCipherSpec message to notify the server that subsequent messages will be encrypted using the negotiated keys.

💡 This message signals the switch to encrypted communication.

Line:

send(ChangeCipherSpec)

💡 ChangeCipherSpec marks the start of encrypted data exchange.

insert

Client sends Finished message

The client sends the Finished message encrypted with the session key, containing a hash of all previous handshake messages to verify integrity.

💡 This message confirms the handshake was successful from the client's side.

Line:

send(Finished)

💡 Finished message ensures handshake integrity and authenticity.

expand

Server sends ChangeCipherSpec

The server sends its ChangeCipherSpec message to notify the client that it will also switch to encrypted communication.

💡 This message synchronizes encryption activation on the server side.

Line:

send(ChangeCipherSpec)

💡 Both sides must signal encryption activation.

insert

Server sends Finished message

The server sends its Finished message encrypted with the session key, confirming the handshake integrity from its side.

💡 This final message completes the handshake, allowing secure data exchange to begin.

Line:

send(Finished)

💡 Finished messages confirm both sides agree on the handshake.

reconstruct

Handshake complete, secure connection established

Both client and server have exchanged Finished messages and switched to encrypted communication. The TLS handshake is complete, and secure HTTP (HTTPS) communication can begin.

💡 This final step confirms the secure channel is ready for application data.

Line:

handshake_complete = True

💡 TLS handshake establishes trust and encryption before data transfer.

def tls_handshake():
    # STEP 1
    send(ClientHello())  # Client sends ClientHello
    # STEP 2
    server_hello = receive()
    send(ServerHello(server_hello.selected_version, server_hello.selected_cipher))  # ServerHello
    # STEP 3
    send(Certificate(server_certificate))  # Server sends certificate
    # STEP 4
    send(ServerHelloDone())  # Server signals end of hello messages
    # STEP 5
    verify_certificate(server_certificate)  # Client verifies certificate
    # STEP 6
    send(ClientKeyExchange(encrypt(pre_master_secret, server_public_key)))  # Client sends key exchange
    # STEP 7
    send(ChangeCipherSpec())  # Client switches to encrypted communication
    # STEP 8
    send(Finished(hash_handshake_messages))  # Client sends Finished
    # STEP 9
    send(ChangeCipherSpec())  # Server switches to encrypted communication
    # STEP 10
    send(Finished(hash_handshake_messages))  # Server sends Finished
    # STEP 11
    handshake_complete = True  # Handshake done
    return handshake_complete

📊

HTTP vs HTTPS - TLS Handshake & Certificate Chain - Watch the Algorithm Execute, Step by Step

Watching the TLS handshake step-by-step reveals the sequence and purpose of each message, clarifying how HTTPS secures HTTP communication.

ClientHello sent, handshake started

Hop: 1

Client

Server

📦Packet

↗ fromclient

↘ toserver

📄 payloadClientHello: TLS versions, cipher suites, random nonce

🔌 protocolTLS

🚩 flagsClientHello

src→192.168.1.2:52345

dst→93.184.216.34:443

data→TLS versions, cipher suites, random nonce

flags→ClientHello

ClientHello: client→server

ServerHello sent, parameters agreed

Hop: 2

Client

Server

📦Packet

↗ fromserver

↘ toclient

📄 payloadServerHello: selected TLS 1.2, AES_256_GCM, random nonce

🔌 protocolTLS

🚩 flagsServerHello

src→93.184.216.34:443

dst→192.168.1.2:52345

data→TLS 1.2, AES_256_GCM, random nonce

flags→ServerHello

ClientHello: client→server

ServerHello: server→client

Certificate sent, client can verify server identity

Hop: 3

Client

Server

📦Packet

↗ fromserver

↘ toclient

📄 payloadCertificate: server public key, CA signature

🔌 protocolTLS

🚩 flagsCertificate

src→93.184.216.34:443

dst→192.168.1.2:52345

data→Server public key, CA signature

flags→Certificate

ClientHello: client→server

ServerHello: server→client

Certificate: server→client

ServerHelloDone sent, client to respond

Hop: 4

Client

Server

📦Packet

↗ fromserver

↘ toclient

📄 payloadServerHelloDone

🔌 protocolTLS

🚩 flagsServerHelloDone

src→93.184.216.34:443

dst→192.168.1.2:52345

flags→ServerHelloDone

ServerHello: server→client

Certificate: server→client

ServerHelloDone: server→client

Certificate verified successfully

Hop: 5

Client

Server

📦Packet

↗ fromclient

↘ toclient

📄 payloadVerify Certificate

🔌 protocolTLS

🚩 flagsVerify

src→—:—

dst→—:—

data→Certificate verification

flags→Verify

ServerHello: server→client

Certificate: server→client

ServerHelloDone: server→client

ClientKeyExchange sent, key material shared

Hop: 6

Client

Server

📦Packet

↗ fromclient

↘ toserver

📄 payloadClientKeyExchange: encrypted pre-master secret

🔌 protocolTLS

🚩 flagsClientKeyExchange

src→192.168.1.2:52345

dst→93.184.216.34:443

data→Encrypted pre-master secret

flags→ClientKeyExchange

Certificate: server→client

ServerHelloDone: server→client

ClientKeyExchange: client→server

Client switched to encrypted communication

Hop: 7

Client

Server

📦Packet

↗ fromclient

↘ toserver

📄 payloadChangeCipherSpec

🔌 protocolTLS

🚩 flagsChangeCipherSpec

src→192.168.1.2:52345

dst→93.184.216.34:443

flags→ChangeCipherSpec

ServerHelloDone: server→client

ClientKeyExchange: client→server

ChangeCipherSpec: client→server

Client Finished message sent

Hop: 8

Client

Server

📦Packet

↗ fromclient

↘ toserver

📄 payloadFinished: encrypted handshake hash

🔌 protocolTLS

🚩 flagsFinished

src→192.168.1.2:52345

dst→93.184.216.34:443

data→Encrypted handshake hash

flags→Finished

ClientKeyExchange: client→server

ChangeCipherSpec: client→server

Finished: client→server

Server switched to encrypted communication

Hop: 9

Client

Server

📦Packet

↗ fromserver

↘ toclient

📄 payloadChangeCipherSpec

🔌 protocolTLS

🚩 flagsChangeCipherSpec

src→93.184.216.34:443

dst→192.168.1.2:52345

flags→ChangeCipherSpec

ChangeCipherSpec: client→server

Finished: client→server

ChangeCipherSpec: server→client

Server Finished message sent, handshake complete

Hop: 10

Client

Server

📦Packet

↗ fromserver

↘ toclient

📄 payloadFinished: encrypted handshake hash

🔌 protocolTLS

🚩 flagsFinished

src→93.184.216.34:443

dst→192.168.1.2:52345

data→Encrypted handshake hash

flags→Finished

Finished: client→server

ChangeCipherSpec: server→client

Finished: server→client

TLS handshake complete, secure connection established

Hop: 11

Client

Server

Finished: client→server

ChangeCipherSpec: server→client

Finished: server→client

Key Takeaways

✓ TLS handshake is a multi-step protocol that establishes trust and encryption before any application data is sent.

Reading code alone hides the sequence and purpose of each message; visualization clarifies the flow and dependencies.

✓ Certificate exchange and verification are critical for authenticating the server and preventing man-in-the-middle attacks.

Visualizing certificate transmission and verification highlights their role in security, which is often abstracted in code.

✓ ChangeCipherSpec messages mark the transition to encrypted communication, ensuring both sides switch synchronously.

Seeing these messages explicitly helps understand how encryption activation is coordinated.