Stop 01 · Internet & Web BasicsTopics · 2/14

HTTP vs HTTPS

Part of the Frontend Developer Roadmap

In short

That little lock icon in your address bar is HTTPS. Without it, anyone on the same café Wi-Fi could read what you type, passwords included.

HTTP is the protocol browsers use to request and receive web pages; HTTPS is the same protocol encrypted with TLS/SSL so data can't be intercepted. HTTPS protects the confidentiality and integrity of traffic and also authenticates the server through a certificate, while plain HTTP sends application data without transport encryption.

The jaadu holds an open postcard a snoop can read, and a locked envelope the snoop can't.

Think of it like this

Postcard vs sealed envelope

HTTP is a postcard: every postman on the way can read it. HTTPS puts the same message in a locked envelope that only the website can open, and proves the envelope really came from that website.

Watch it happen

What a snoop on the Wi-Fi sees

HTTP

  • password=riya123 (plain text)
  • Anyone on the network can read it
  • Chrome shows 'Not secure'

HTTPS

  • x8#Qp!2m@Lz… (scrambled)
  • Only the real site can unscramble it
  • A certificate proves the site is genuine

Use HTTPS on every page. Hosts like Vercel and Netlify set it up for you automatically.

The big ideas

What you need to know

HTTP is how browsers and servers talk

The browser sends a request, the server sends back a response. Both are text messages in a fixed format.

HTTPS adds encryption

HTTPS is HTTP wrapped in TLS. Data is scrambled on the way, so anyone in the middle sees gibberish.

Certificates prove identity

The site shows a certificate signed by a trusted authority, so your browser knows it's the real site and not a fake.

Browsers punish plain HTTP

Chrome marks HTTP pages 'Not secure', and features like location, camera and service workers need HTTPS.

How it works

What happens before an HTTPS page loads

  1. 1

    Say hello

    Your browser tells the server which encryption methods it supports.

  2. 2

    Show the certificate

    The server sends its certificate. The browser checks it's valid and signed by someone it trusts.

  3. 3

    Agree on a secret key

    Both sides work out a shared key without ever sending the key itself.

  4. 4

    Talk in code

    Every request and response is now encrypted with that key.

See it in code

A tiny example

bash
1# Look at the response headers of a site2curl -I https://example.com3 4# Watch the TLS handshake and certificate details5curl -vI https://example.com 2>&1 | grep -iE "SSL|TLS|subject|issuer"

The first command shows the status line and headers. The second prints the TLS version, who owns the certificate (subject) and who signed it (issuer).

Save yourself the pain

Common mistakes

Oops

Thinking HTTPS only matters on login and payment pages.

Do this instead

Use HTTPS everywhere. Even a blog page can be tampered with on the way, for example to inject ads or malware.

Oops

Loading images or scripts over http:// on an https:// page.

Do this instead

Load every file over HTTPS. Browsers block or warn about this 'mixed content'.

Your mission

Be a certificate detective

~10 min

Quick check

You're on public Wi-Fi and log in to a site over plain HTTP. Who can read your password?

Go deeper

  1. 1Inspect a site's HTTPS certificate in your browser's address bar. Validate your understanding by applying it in a small practical example.
  2. 2Learn what the TLS handshake does at a high level. Focus on understanding the underlying reason it works, not only memorizing the definition.
  3. 3Understand why HTTPS is now a hard requirement for SEO and security.

More topics at this stop

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download
InsideEdge