HTTP Cookies Explained: A Complete Guide

26/08/2025

Introduction

HTTP cookies (or simply cookies) are small pieces of data that a server sends to a user's web browser. The browser may store them and send them back with later requests to the same server. They are a fundamental part of the modern web, enabling essential features like session management, personalization, and user tracking.

How Do Cookies Work?

The process begins when a server wants to store information on the client. It includes a Set-Cookie header in its HTTP response. The browser receives this response, stores the cookie, and then includes a Cookie header in all subsequent HTTP requests to that same server.

This flow allows the server to maintain a "memory" of the user across multiple requests, which are otherwise stateless.

Here’s a visual representation of the cookie flow:

HTTP Cookie Flow

Initial Request: The browser sends an HTTP request to the server.
Server Response with Set-Cookie: The server responds with the requested resource and includes a Set-Cookie header. For example: Set-Cookie: user_id=12345;.
Browser Stores Cookie: The browser receives the response and stores the cookie for the server's domain.
Subsequent Requests with Cookie: For every subsequent request to the same server, the browser automatically includes the Cookie header with the stored value. For example: Cookie: user_id=12345;.

Cookie Attributes

A cookie isn't just a simple key-value pair. It has several attributes that control its behavior, lifetime, and security. These are set by the server in the Set-Cookie header.

Here are the most important attributes:

Attribute	Purpose	Details / Values
Expires Max-Age	Controls cookie lifetime	Expires: Sets a specific expiration date/time. Max-Age: Sets duration in seconds from set time. If both are set, Max-Age* takes precedence. If neither, cookie is a session cookie (deleted when browser closes).*
Domain	Specifies which hosts receive the cookie	Defaults to the host that set the cookie. Not sent to subdomains unless specified.
Path	Scopes cookie to a URL path	E.g., `Path=/app` means cookie sent only for `/app` and its subdirectories.
Secure	Restricts cookie to HTTPS	Cookie sent only over encrypted (HTTPS) connections.
HttpOnly	Prevents JS access	Not accessible via `document.cookie` in JavaScript. Helps prevent XSS attacks.
SameSite	CSRF protection	Controls cross-site sending: Strict: Only sent with same-site requests. Lax: (Default) Sent with same-site and top-level GET navigations. None: Sent with all requests (must also set Secure).

Client-Side: Managing Cookies with JavaScript

You can interact with non-HttpOnly cookies using JavaScript through the document.cookie property.

Creating a Cookie

To create a cookie, you assign a string to document.cookie that includes the key-value pair and any desired attributes.


// Basic cookie
document.cookie = "username=JohnDoe";

// Cookie with expiration and path
const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 7); // Expires in 7 days
document.cookie = `theme=dark; expires=${expirationDate.toUTCString()}; path=/`;

Reading Cookies

document.cookie returns a single string containing all cookies for the current document, separated by semicolons. You need to parse this string to get a specific value.


function getCookie(name) {
    const cookies = document.cookie.split(';').map(cookie => cookie.trim());
    for (const cookie of cookies) {
        const [cookieName, cookieValue] = cookie.split('=');
        if (cookieName === name) {
            return decodeURIComponent(cookieValue);
        }
    }
    return null;
}

const username = getCookie('username'); // "JohnDoe"

Deleting a Cookie

To delete a cookie, you set its Expires attribute to a past date.


document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

Server-Side: Node.js with Express

Managing cookies on the server is more robust and secure, especially with the HttpOnly attribute. Here’s how to do it in Node.js using the popular cookie-parser middleware for Express.

First, install the necessary packages: npm install express cookie-parser

Setting a Cookie

The res.cookie() method makes it easy to set cookies and their attributes.


const express = require('express');
const cookieParser = require('cookie-parser');

const app = express();
app.use(cookieParser());

app.get('/login', (req, res) => {
    // Set a simple cookie
    res.cookie('username', 'JohnDoe', { maxAge: 900000, httpOnly: true });

    // Set a secure, SameSite cookie for sensitive data
    res.cookie('session_id', 'xyz789', {
        maxAge: 86400000, // 24 hours
        httpOnly: true,
        secure: true, // Only send over HTTPS
        sameSite: 'Strict'
    });

    res.send('Cookies have been set!');
});

app.listen(3000, () => console.log('Server running on port 3000'));

Reading a Cookie


app.get('/profile', (req, res) => {
    const username = req.cookies.username;
    if (username) {
        res.send(`Welcome back, ${username}!`);
    } else {
        res.send('Please log in.');
    }
});

Deleting a Cookie

The res.clearCookie() method deletes a cookie by its name.


app.get('/logout', (req, res) => {
    res.clearCookie('username');
    res.clearCookie('session_id');
    res.send('Logged out successfully.');
});

Server-Side: Java and Spring Boot

Spring Boot provides excellent, built-in support for handling cookies via the HttpServletRequest and HttpServletResponse objects, or more elegantly with @CookieValue annotations.

Setting a Cookie

You create a Cookie object and add it to the HttpServletResponse.


import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;

@RestController
public class CookieController {

    @GetMapping("/login")
    public String setCookie(HttpServletResponse response) {
        // Create a cookie
        Cookie userCookie = new Cookie("username", "JaneDoe");
        userCookie.setMaxAge(7 * 24 * 60 * 60); // 7 days
        userCookie.setHttpOnly(true);
        userCookie.setPath("/"); // Global cookie

        // Create a secure cookie for session
        Cookie sessionCookie = new Cookie("session_id", "abc456");
        sessionCookie.setMaxAge(24 * 60 * 60); // 24 hours
        sessionCookie.setHttpOnly(true);
        sessionCookie.setSecure(true); // Requires HTTPS
        // In Spring, SameSite is configured globally or via HttpHeaders

        // Add cookies to the response
        response.addCookie(userCookie);
        response.addCookie(sessionCookie);

        return "Cookies have been set!";
    }
}

Reading a Cookie

The easiest way to read a cookie in a Spring controller is with the @CookieValue annotation.


import org.springframework.web.bind.annotation.CookieValue;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ProfileController {

    @GetMapping("/profile")
    public String readCookie(
            @CookieValue(name = "username", defaultValue = "Guest") String username) {
        return "Welcome back, " + username + "!";
    }
}

Deleting a Cookie

To delete a cookie, you create a cookie with the same name and set its maxAge to 0.


import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;

@RestController
public class LogoutController {

    @GetMapping("/logout")
    public String deleteCookie(HttpServletResponse response) {
        Cookie cookie = new Cookie("username", null); // value can be null
        cookie.setMaxAge(0); // 0 seconds
        cookie.setPath("/");

        response.addCookie(cookie);

        return "Logged out successfully.";
    }
}

Server-Side: Next.js

Next.js provides powerful built-in utilities for handling cookies on both the client and server side.

Setting Cookies in Server Components

Use the cookies() function from next/headers to set cookies in server components or API routes.


import { cookies } from 'next/headers';

// In a Server Component or API Route
export async function POST(request: Request) {
  const cookieStore = cookies();
  
  // Set a simple cookie
  cookieStore.set('username', 'JohnDoe', {
    maxAge: 7 * 24 * 60 * 60, // 7 days
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'strict',
    path: '/'
  });

  // Set a session cookie
  cookieStore.set('session_id', 'xyz789', {
    maxAge: 24 * 60 * 60, // 24 hours
    httpOnly: true,
    secure: true,
    sameSite: 'strict'
  });

  return Response.json({ message: 'Cookies set successfully' });
}

Reading Cookies in Server Components

Access cookies directly in server components using the cookies() function.


import { cookies } from 'next/headers';

export default async function ProfilePage() {
  const cookieStore = cookies();
  const username = cookieStore.get('username')?.value || 'Guest';
  const sessionId = cookieStore.get('session_id')?.value;

  return (
    <div>
      <h1>Welcome back, {username}!</h1>
      {sessionId && <p>Session ID: {sessionId}</p>}
    </div>
  );
}

Conclusion

Cookies are a cornerstone of modern web development, enabling stateful interactions over the stateless HTTP protocol. While client-side manipulation is possible, best practices dictate that cookies, especially those containing sensitive information, should be managed on the server with the HttpOnly, Secure, and SameSite attributes to enhance security.