Stop 01 · Internet & Web BasicsTopics · 7/14

Cookies

Part of the Frontend Developer Roadmap

In short

Cookies are how a website remembers you between visits, like keeping you logged in. They're tiny and automatic, which is also why attackers love them.

Small pieces of data a server asks the browser to store and send back on every request — commonly used for sessions, auth tokens and preferences. Because cookies are automatically attached to matching requests, their scope, lifetime, and security attributes directly affect authentication, privacy, and cross-site request behavior.

The jaadu at a cloakroom counter hands a token to a student.

Think of it like this

A cloakroom token

You hand over your bag and get a numbered token. Next time you show the token, they know which bag is yours. A cookie is that token: the server gives it once, and your browser shows it on every visit.

Watch it happen

How you stay logged in

Browser
Server

POST /login

1/5You submit your email and password.

The big ideas

What you need to know

Small key-value data

A cookie is a small piece of text (about 4 KB at most) that the browser stores for a site.

Sent automatically

The browser attaches matching cookies to every request to that site, so the server knows who you are.

Flags keep them safe

HttpOnly hides a cookie from JavaScript, Secure sends it only over HTTPS, and SameSite limits cross-site requests.

They can expire

Session cookies vanish when the browser closes. Cookies with Expires or Max-Age stay until that time.

See it in code

A tiny example

http
1# The server sends this after login2Set-Cookie: session_id=abc123; HttpOnly; Secure; SameSite=Lax; Max-Age=864003 4# The browser then adds this to every request to the site5Cookie: session_id=abc123

Max-Age=86400 keeps the cookie for one day. HttpOnly means document.cookie can't read it, which protects it from injected scripts.

Save yourself the pain

Common mistakes

Oops

Storing a login token in a cookie without HttpOnly.

Do this instead

Add HttpOnly so scripts, including injected ones, can't steal it.

Oops

Stuffing lots of data into cookies.

Do this instead

Keep cookies tiny. They travel with every request, so big cookies slow the whole site down.

Your mission

Find the cookies

~10 min

Quick check

Which flag stops JavaScript on the page from reading a cookie?

Go deeper

  1. 1Inspect cookies for a site you're logged into via DevTools' Application tab. Validate your understanding by applying it in a small practical example.
  2. 2Learn the difference between session and persistent cookies. Focus on understanding the underlying reason it works, not only memorizing the definition.
  3. 3Understand HttpOnly, Secure and SameSite cookie flags and why they matter for 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