HTTPS & TLS Handshake
20 min read
HTTPSTLS 1.3Asymmetric EncryptionSymmetric EncryptionCertificate AuthoritySSL Pinning
How HTTPS Secures Every Request
Every time you see the padlock icon in your browser, a complex cryptographic ceremony has just occurred in milliseconds. Understanding this process is critical for any frontend developer who cares about security.
The TLS Handshake (TLS 1.3 — Modern Standard)
TLS 1.3 reduced the handshake from 2 round-trips (TLS 1.2) to just 1 round-trip, dramatically improving page load times.
Step-by-Step:
- Client Hello: Your browser sends supported cipher suites and a random number to the server.
- Server Hello + Certificate: The server responds with its chosen cipher suite, its SSL certificate (containing the public key), and its own random number.
- Key Exchange: The client verifies the certificate against a Certificate Authority (CA), then both sides use Diffie-Hellman key exchange to generate a shared secret — without ever transmitting it.
- Symmetric Encryption Begins: All subsequent data is encrypted with the shared secret using fast symmetric encryption (AES-256-GCM).
Asymmetric vs. Symmetric Encryption
| Property | Asymmetric (RSA/ECDSA) | Symmetric (AES) |
|---|---|---|
| Keys | Public + Private key pair | Single shared key |
| Speed | ~1000x slower | Very fast |
| Used For | Key exchange, signatures | Bulk data encryption |
| Example | TLS handshake | Encrypting page data |
Certificate Authorities (CAs)
CAs are trusted third parties (like Let's Encrypt, DigiCert) that vouch for a server's identity. Your browser ships with a list of ~150 trusted root CAs. If a certificate is not signed by one of these, you see the "Not Secure" warning.
Why Frontend Devs Must Care
- Mixed Content: Loading an HTTP image on an HTTPS page will be blocked by modern browsers.
- HSTS (HTTP Strict Transport Security): Tells browsers to ONLY connect via HTTPS — prevents downgrade attacks.
- Certificate Pinning: Mobile apps can "pin" a specific certificate to prevent man-in-the-middle attacks.
Performance Impact
TLS 1.3's 1-RTT handshake + 0-RTT resumption (for returning visitors) means HTTPS adds almost zero latency. There is no longer any performance excuse to use HTTP.