Developer PlaygroundGiri's Place
  1. Welcome Developer Playground by Giri
Add BookmarkBuy Me a CoffeePayPal

Developer Playground

HTTP Cookie: The Core Mechanism of Web State Management

Updated: May 26, 2025

Table of Contents

HTTP Cookie Flow Client Browser Web Server 1. Initial HTTP Request GET /login HTTP/1.1 2. Response with Set-Cookie Header Set-Cookie: sessionId=abc123; HttpOnly; Secure Cookie Storage 3. Subsequent Request with Cookie Cookie: sessionId=abc123 4. Server Response HTTP/1.1 200 OK

Security Considerations

Major Security Threats

1. Session Hijacking

Attack where an attacker steals a user's session cookie and impersonates them.

  • Use HTTPS (Secure attribute)
  • Prevent XSS with HttpOnly attribute
  • Regular session token regeneration
  • IP address validation

2. Cross-Site Request Forgery (CSRF)

Attack where malicious sites send unwanted requests using the user's credentials.

  • Use SameSite attribute
  • Implement CSRF tokens
  • Validate Referer header
  • Double Submit Cookie pattern

3. Cross-Site Scripting (XSS)

Attack where malicious scripts execute and steal cookies from users.

  • Block JavaScript access with HttpOnly attribute
  • Validate and escape input data
  • Apply Content Security Policy (CSP)
  • Regular security updates

Security Best Practices

// Maximum security authentication cookie
Set-Cookie: sessionId=abc123; Secure; HttpOnly; SameSite=Strict; Max-Age=3600

// API token cookie
Set-Cookie: apiToken=xyz789; Secure; HttpOnly; SameSite=Lax; Path=/api

// User preference cookie
Set-Cookie: theme=dark; Secure; SameSite=Lax; Max-Age=31536000
SameSite Value Cross-Site GET Cross-Site POST Use Case
Strict ❌ Not sent ❌ Not sent Maximum security, auth tokens
Lax ✅ Top-level navigation only ❌ Not sent Default value, general use
None ✅ Always sent ✅ Always sent Third-party integration, embeds

Modern Alternatives

1. Web Storage API

Client-side storage provided by browsers for storing data locally.

localStorage

// Store data
localStorage.setItem('userPreference', 'dark-theme');

// Read data
const preference = localStorage.getItem('userPreference');

// Remove data
localStorage.removeItem('userPreference');
  • Persists after browser closure
  • Not automatically sent with HTTP requests
  • Only accessible via JavaScript
  • Isolated per domain

sessionStorage

// Store temporary data
sessionStorage.setItem('tempData', 'temporary-value');

// Read data
const tempData = sessionStorage.getItem('tempData');

// Automatically deleted when tab closes
  • Deleted when tab/window closes
  • Not automatically sent with HTTP requests
  • Independent storage space per tab

2. JWT (JSON Web Token)

A stateless authentication method that includes state information within the token itself. 

// JWT token storage (using HttpOnly cookie)
Set-Cookie: token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...; HttpOnly; Secure; SameSite=Strict

// Or sent via Authorization header
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
  • No server state storage required
  • Suitable for microservices architecture
  • Contains claim-based information
  • Controllable token expiration time

JWT Storage Options: Security Analysis

When using JWT for authentication, choosing the right storage method is crucial for security. Let's compare the main options:

1. HttpOnly Cookies (Recommended)
// Server-side: Set JWT in HttpOnly cookie
res.cookie('accessToken', jwtToken, {
    httpOnly: true,    // Prevents XSS attacks
    secure: true,      // HTTPS only
    sameSite: 'strict', // Prevents CSRF attacks
    maxAge: 15 * 60 * 1000  // 15 minutes
});

// Client-side: Cannot access via JavaScript (more secure)
// Token is automatically sent with requests

✅ Pros:

  • • Protected from XSS attacks (JavaScript cannot access)
  • • Automatic transmission with requests
  • • CSRF protection with SameSite attribute
  • • Server-controlled expiration

⚠️ Cons:

  • • Potential CSRF attacks if not properly configured
  • • Limited control from client-side
  • • Sent with all requests to the domain
2. localStorage (Common but Less Secure)
// Store JWT in localStorage
localStorage.setItem('accessToken', jwtToken);

// Manual token management required
const token = localStorage.getItem('accessToken');
fetch('/api/protected', {
    headers: {
        'Authorization': Bearer ${token}
    }
});

✅ Pros:

  • • Full client-side control
  • • No CSRF vulnerability
  • • Flexible token management
  • • Works well with SPAs

❌ Cons:

  • • Vulnerable to XSS attacks
  • • Accessible via JavaScript
  • • Manual token refresh handling
  • • Persists until manually cleared
3. Memory Storage (Most Secure for Short-lived Tokens)
// Store JWT in memory (JavaScript variable)
let accessToken = null;

// Set token after login
function setAccessToken(token) {
    accessToken = token;
}

// Use token for requests
function authenticatedFetch(url, options = {}) {
    return fetch(url, {
        ...options,
        headers: {
            ...options.headers,
            'Authorization': Bearer ${accessToken}
        }
    });
}

✅ Pros:

  • • Highest security (cleared on page refresh)
  • • No XSS persistence
  • • No CSRF vulnerability
  • • Complete control over token lifecycle

⚠️ Cons:

  • • Lost on page refresh
  • • Complex state management required
  • • Poor user experience for long sessions
Best Practice: Dual Token Strategy

The most secure approach combines multiple strategies: 

// 1. Short-lived access token in memory (15 minutes)
let accessToken = null;

// 2. Long-lived refresh token in HttpOnly cookie (7 days)
res.cookie('refreshToken', refreshToken, {
    httpOnly: true,
    secure: true,
    sameSite: 'strict',
    maxAge: 7 * 24 * 60 * 60 * 1000 // 7 days
});

// 3. Automatic token refresh
async function refreshAccessToken() {
    const response = await fetch('/auth/refresh', {
        method: 'POST',
        credentials: 'include' // Include HttpOnly cookies
    });
    const { accessToken: newToken } = await response.json();
    accessToken = newToken;
}

🔒 Security Benefits:

  • • Access token expires quickly (limits XSS damage)
  • • Refresh token protected from XSS (HttpOnly)
  • • Refresh token protected from CSRF (SameSite)
  • • Automatic token rotation
  • • Graceful handling of token expiration
Security Recommendation Summary
🥇 Best: Dual token strategy (short-lived access token in memory + HttpOnly refresh token)
🥈 Good: HttpOnly cookie with proper security attributes
🥉 Acceptable: Memory storage (for short sessions)
❌ Avoid: localStorage/sessionStorage for sensitive tokens

Implementation Examples

1. JavaScript Cookie Utilities

// Cookie utility functions
function setCookie(name, value, days) {
    const expires = new Date();
    expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
    document.cookie = ${name}${value}; expires=${expires.toUTCString()}; path=/; SameSite=Lax;
}

2. Spring Boot ResponseCookie Example

// Example of setting secure authentication cookie in Spring Boot
@PostMapping("/login")
public ResponseEntity<Void> login(@RequestBody LoginRequest request) {
    // Create JWT token after successful authentication
    String jwtToken = jwtService.generateToken(request.getUsername());
    
    // Create secure cookie with JWT token
    ResponseCookie cookie = ResponseCookie
        .from("auth_token", jwtToken)
        .httpOnly(true)      // Prevents JavaScript access
        .secure(true)        // HTTPS only
        .sameSite("Strict")  // Prevents CSRF attacks
        .path("/")           // Available for all paths
        .maxAge(Duration.ofHours(1))  // 1 hour expiration
        .build();

    // Return response with cookie
    return ResponseEntity
        .ok()
        .header(HttpHeaders.SET_COOKIE", cookie.toString())
        .build();
}

// Example of clearing cookie on logout
@PostMapping("/logout")
public ResponseEntity<Void> logout() {
    ResponseCookie cookie = ResponseCookie
        .from("auth_token", "")
        .httpOnly(true)
        .secure(true)
        .sameSite("Strict")
        .path("/")
        .maxAge(Duration.ZERO)  // Expire immediately
        .build();

    return ResponseEntity
        .ok()
        .header(HttpHeaders.SET_COOKIE", cookie.toString())
        .build();
}

This example demonstrates how to create and manage secure cookies in a Spring Boot application. The code shows:

  • Setting a secure authentication cookie with JWT token
  • Implementing proper security attributes (HttpOnly, Secure, SameSite)
  • Cookie expiration management
  • Proper cookie clearing on logout

Conclusion

HTTP Cookies remain a fundamental technology for web state management, despite the emergence of modern alternatives. Understanding their structure, security attributes, and proper implementation is crucial for building secure web applications.

While newer technologies like Web Storage API and JWT tokens offer different advantages, cookies continue to be the preferred choice for authentication and session management due to their automatic transmission with HTTP requests and robust security features when properly configured.

The key to secure cookie implementation lies in using appropriate attributes like HttpOnly, Secure, and SameSite, combined with proper validation and regular security audits.


Advertisement