Intermediate 9 min read

🔐 How HTTPS & SSL Works — From Handshake to Encrypted Connection

📘 What You Will Learn

  • What HTTPS is and why it exists
  • What SSL and TLS actually mean
  • How encryption works (simple version)
  • What happens during the TLS Handshake
  • What an SSL Certificate is
  • Why browsers show ✅ padlock or ⚠️ warnings

🧠 Easy Analogy (Must Read First!)

Imagine you want to pass a secret note to your friend in class.

But you have to pass it through 10 other students to reach them.

Without HTTPS: Anyone who touches the note can read it.

With HTTPS: The note is in a locked box. Only your friend has the key to open it.

👉 That's HTTPS — it locks your data so only the right person can read it.


🌐 What is HTTPS?

HTTP = HyperText Transfer Protocol → How your browser talks to websites

HTTPS = HTTP + Secure → Same thing, but everything is encrypted

The "S" comes from SSL/TLS — the technology that adds the lock.

http://example.com   →  ⚠️ Not secure (anyone can read)
https://example.com  →  🔒 Secure (encrypted)

🤔 What is SSL? What is TLS?

You'll hear both words. Here's the simple truth:

Name Full Form Status
SSL Secure Sockets Layer ❌ Old, retired
TLS Transport Layer Security ✅ Current, what we actually use

SSL is dead. TLS replaced it. But everyone still says "SSL" out of habit. When someone says SSL — they almost always mean TLS.


⚠️ What Problem Does HTTPS Solve?

Without HTTPS, three bad things can happen:

1. Eavesdropping 👁️

Someone on the same WiFi reads your password as you type it.

2. Tampering ✂️

A middleman changes the webpage before it reaches you.

3. Fake Sites 🎭

You think you're on your bank's website. You're not.

HTTPS Prevents All Three:

Problem HTTPS Fix
Eavesdropping Encrypts all data
Tampering Detects any change in transit
Fake sites Verifies server identity with certificate

🔑 Two Types of Encryption

Before we see the handshake — understand these two ideas:


🐢 Asymmetric Encryption (Slow but Secure)

Uses two keys — a Public Key and a Private Key.

Public Key  → Anyone can use it to LOCK data
Private Key → Only the server can UNLOCK it

Like a padlock anyone can snap shut — but only you have the key to open.

👉 Used to safely share a secret at the start of a connection.


⚡ Symmetric Encryption (Fast)

Uses one shared key for both locking and unlocking.

Same Key → Locks AND Unlocks data

👉 Used to encrypt all actual browsing data after the handshake.


💡 Why Use Both?

Type Speed Use in HTTPS
Asymmetric Slow Share the secret key safely
Symmetric Fast Encrypt all data after that

Asymmetric is too slow for everything. Symmetric is fast but needs a safe way to share the key first.

HTTPS uses both — best of both worlds. ✅


🤝 The TLS Handshake — Step by Step

This is what happens every time you open an https:// website.

It takes less than 1 second — but a lot happens inside.


📊 Full Flow

YOUR BROWSER                         WEB SERVER
      │                                   │
      │──── 1. Hello! Here's what ───────►│
      │         I support                 │
      │                                   │
      │◄─── 2. Hello! I choose ───────────│
      │         this encryption           │
      │◄─── 3. Here's my Certificate ─────│
      │                                   │
      │  [Browser checks certificate ✅]  │
      │                                   │
      │──── 4. Here's a secret ──────────►│
      │    (locked with your public key)  │
      │                                   │
      │  [Both sides create session key]  │
      │                                   │
      │──── 5. Ready! (encrypted) ───────►│
      │◄─── 6. Ready! (encrypted) ────────│
      │                                   │
      ║═══════ All data encrypted ════════║

Step 1 — Browser Says Hello

Your browser sends: - "I support TLS 1.2 and TLS 1.3" - "Here are encryption methods I know" - A random number (used later for key generation)


Step 2 — Server Picks Settings

Server replies with: - "Let's use TLS 1.3" - "Let's use AES-256 encryption" - Its own random number


Step 3 — Server Sends Certificate

The server sends its SSL Certificate.

Think of it like a government-issued ID card for websites.

It contains: - ✅ The website's domain name - ✅ The server's Public Key - ✅ Who issued it (Certificate Authority) - ✅ Expiry date


Step 4 — Browser Verifies and Sends Secret

Browser checks the certificate: - Is it expired? - Does it match this domain? - Is it from a trusted authority?

If all good ✅ → Browser creates a Pre-Master Secret → Encrypts it with the server's Public Key → Sends it to server

Only the server can decrypt this. It has the Private Key. 🔒


Step 5 and 6 — Both Sides Are Ready

Both browser and server use the shared secret to independently create the same Session Key.

They each send a "Finished" message — encrypted with that key.

If both can read each other's message → Handshake complete! 🎉


🔁 After the Handshake

Everything is now encrypted with the Session Key.

You type password  →  🔒 Encrypted  →  Server
Server sends page  →  🔒 Encrypted  →  Your browser

Nobody in the middle can read any of it.


📜 What is an SSL Certificate?

An SSL Certificate is a digital ID card for websites.

┌──────────────────────────────────────┐
│          SSL Certificate             │
├──────────────────────────────────────┤
│  Domain:    techwithjuned.com        │
│  Issued by: Let's Encrypt            │
│  Valid:     Jan 2025 → Apr 2025      │
│  Public Key: [long string...]        │
│  Signature:  [CA's signature]        │
└──────────────────────────────────────┘

Types of SSL Certificates

Type What it verifies Used by
DV (Domain Validated) Domain ownership only Blogs, personal sites
OV (Organization Validated) Company identity Business websites
EV (Extended Validated) Strict company check Banks, payment sites
Wildcard All subdomains *.domain.com Large sites

🏛️ Certificate Authorities (CA)

Who issues these certificates?

Certificate Authorities (CAs) — trusted organizations that verify websites and sign their certificates.

Popular CAs: - Let's Encrypt → Free ✅ (most common for developers) - DigiCert - Comodo - GlobalSign

Your browser and OS already have a built-in list of trusted CAs.


The Chain of Trust

Root CA (trusted by all browsers)
      │
      └──► Intermediate CA (trusted by Root)
                │
                └──► Your Website Certificate

Browser checks step by step: 1. Is this cert signed by a known CA? 2. Is that CA signed by a Root CA I trust?

Yes to both → 🔒 Padlock shown No → ⚠️ Warning shown


⚔️ HTTP vs HTTPS

Feature HTTP ❌ HTTPS ✅
Data encrypted? No Yes
Password safe? No Yes
Browser padlock? No Yes
Google SEO ranking Lower Higher
Can be tampered? Yes No
Modern features (payments, camera)? No Yes

🔒 Forward Secrecy — Bonus Concept

Even if someone records all your encrypted traffic today and steals the server key years later — they still can't decrypt it.

Why?

Because TLS generates a fresh session key for every single connection.

Old traffic stays protected even if keys are later exposed.

👉 This is called Forward Secrecy and it's required in TLS 1.3.


🆚 TLS 1.2 vs TLS 1.3

Feature TLS 1.2 TLS 1.3 ✅
Handshake speed 2 round trips 1 round trip (2x faster)
Weak ciphers allowed? Yes No — removed
Forward secrecy Optional Mandatory
Old RSA key exchange Allowed Removed

TLS 1.3 is faster and more secure. Modern browsers use it by default.


❌ Common HTTPS Problems

⚠️ Mixed Content

Your page is HTTPS but loads an image or script over HTTP.

<!-- ❌ Breaks HTTPS security -->
<img src="http://example.com/logo.png">

<!-- ✅ Correct -->
<img src="https://example.com/logo.png">

⚠️ Expired Certificate

Certificates expire (every 90 days for Let's Encrypt).

Fix: Use Certbot with auto-renewal — it handles this automatically.


⚠️ Self-Signed Certificate

You made your own certificate — not signed by a real CA.

Browsers don't trust it → ⚠️ big scary warning shown to users.

Fix: Use Let's Encrypt (free) for any real website.


⚠️ Wrong Domain Name

Certificate says example.com but you're visiting shop.example.com.

Fix: Use a Wildcard certificate that covers *.example.com.


❓ Common Questions

Q: Is HTTPS unbreakable? No. But breaking modern TLS would take billions of years with current computers.

Q: Does HTTPS mean the site is safe to use? HTTPS means the connection is encrypted — not that the website is trustworthy. Scam sites can also have HTTPS. Always check the domain too.

Q: My site has HTTPS but still shows ⚠️ warning? Check for mixed content — even one HTTP resource on the page breaks it.


🎯 Final Summary

HTTPS = HTTP + Encryption (powered by TLS)

SSL = Old name
TLS = Current name (what we actually use)

Handshake:
Browser hello → Server hello → Certificate
→ Verify → Share secret → Session key → 🔒 Encrypted

Certificate = Digital ID card for websites
Issued by Certificate Authorities (CAs)
Let's Encrypt = Free CA ✅

TLS 1.3 = Faster + More secure
Forward Secrecy = Old sessions stay safe forever

📌 Quick Reference

Term Meaning
HTTPS HTTP with encryption
TLS Protocol that adds the encryption
SSL Old name for TLS
Certificate Website's digital ID card
CA Organization that issues certificates
Handshake Setup process before data transfer
Session Key Key used to encrypt actual data
Forward Secrecy Old sessions can't be decrypted later

📌 Next Tutorial

👉 How to Add Free SSL to Your Website Using Certbot


TechWithJuned · Learn → Execute → Build