What are Cookies? — HTTP State Management

After completing this topic, you will be able to:

Understand why HTTP is a "stateless" protocol, explain how cookies solve this problem, and know how to set and read cookies in Express.

HTTP Has No Memory

The HTTP protocol is stateless. After processing a request, the server completely forgets the client.

Client: GET /page1 → Server: "Here is the content of Page 1"
Client: GET /page2 → Server: "Who are you? Nice to meet you. Here is the content of Page 2"

The server cannot tell if the browser that requested /page1 one second ago is the same user. Login, shopping carts, dark mode settings—any feature that "remembers previous requests" is impossible due to this stateless nature.

Cookies solve this problem. It's like the server saying to the client, "Store this information and show it to me the next time you come."

How Cookies Work

Cookies are exchanged through HTTP headers.

1. Server → Client (response header)
   Set-Cookie: username=Hoon; Path=/

2. Client → Server (next request's request header)
   Cookie: username=Hoon

Once set, the browser automatically includes the cookie in all requests to the same domain. The browser sends it without the server having to ask. This is the core mechanism of cookies.

Handling Cookies in Express

Setting Cookies

const express = require('express');
const app = express();

app.get('/login', (req, res) => {
  // Send the Set-Cookie header
  res.cookie('username', 'Hoon', {
    maxAge: 24 * 60 * 60 * 1000, // 1 day (milliseconds)
    httpOnly: true,
    secure: false,    // Only transmit over HTTPS (set to false during development)
    sameSite: 'lax'
  });
  res.json({ message: 'Logged in, cookie set' });
});

Reading Cookies

To read cookies, you need the cookie-parser middleware.

npm install cookie-parser

const cookieParser = require('cookie-parser');
app.use(cookieParser());

app.get('/profile', (req, res) => {
  const username = req.cookies.username;
  if (!username) {
    return res.status(401).json({ error: 'Not logged in' });
  }
  res.json({ message: `Welcome back, ${username}` });
});

cookie-parser parses the Cookie header and creates a req.cookies object. Without this middleware, you would have to parse the header yourself.

Deleting Cookies

app.get('/logout', (req, res) => {
  res.clearCookie('username');
  res.json({ message: 'Logged out, cookie cleared' });
});

clearCookie immediately expires the cookie with the same name.

Cookie Attributes

Of these attributes, httpOnly and secure are the most important for security.

Security — Keeping Cookies Safe

httpOnly

// Bad — Cookie can be accessed by JavaScript (XSS vulnerability)
res.cookie('token', 'abc123');

// Good — Cannot be accessed by JavaScript
res.cookie('token', 'abc123', { httpOnly: true });

Setting httpOnly: true prevents reading the cookie with document.cookie. Even if an XSS attacker injects a script, they cannot steal the cookie. This should always be set for authentication-related cookies.

secure

res.cookie('token', 'abc123', {
  httpOnly: true,
  secure: true  // Only transmit over HTTPS
});

The cookie is not transmitted over HTTP (unencrypted) connections. An attacker cannot intercept the cookie.

sameSite

res.cookie('token', 'abc123', {
  httpOnly: true,
  secure: true,
  sameSite: 'strict'  // Only transmit on requests from the same site
});

Cookies vs. Local Storage

Use cookies for "information that the server needs to know," and localStorage for "information that only the browser needs to know."

Real-world pattern — Dark mode cookie

// Setting dark mode—can be applied during server-side rendering
app.post('/settings/theme', (req, res) => {
  const { theme } = req.body; // 'dark' or 'light'
  res.cookie('theme', theme, {
    maxAge: 365 * 24 * 60 * 60 * 1000, // 1 year
    httpOnly: false,  // JavaScript access required to apply CSS
    sameSite: 'lax'
  });
  res.json({ theme });
});

app.get('/', (req, res) => {
  const theme = req.cookies.theme || 'light';
  res.render('index', { theme });
});

For settings that are not security-sensitive, such as dark mode, you can set httpOnly: false. However, you should never set httpOnly: false for authentication tokens.

Key Takeaways

Cookies are one of the oldest state management mechanisms on the web, but they are still widely used. Sessions, authentication, user settings—all of these are based on cookies. If you forget to set the security attributes (httpOnly, secure, sameSite), you will be vulnerable to XSS and CSRF attacks, so always check these three when setting cookies.

Production Checklist

When setting authentication cookies, be sure to check these items:

res.cookie('session_token', token, {
  httpOnly: true,       // ✓ XSS protection — Prevents JavaScript access
  secure: true,         // ✓ HTTPS only — Prevents plain text transmission
  sameSite: 'lax',      // ✓ CSRF protection — Blocks cross-site POST requests
  maxAge: 3600000,      // ✓ Set expiration — Prevents persistent cookies
  path: '/'             // ✓ Restrict path — Limit to necessary scope
});

If you miss any of these, it will create a security vulnerability. Be sure to check this checklist before deploying to production.