Creating Web Apps  «Prev  Next»

Lesson 4 What exactly are cookies?
Objective Describe the characteristics of cookies and their Role in User Interaction

HTTP Cookies: State Management in Stateless Protocol

HTTP cookies represent fundamental web technology enabling stateful interactions atop HTTP's inherently stateless protocol—where each request exists independently without server memory of previous interactions. Cookies solve critical problem: how can websites remember user preferences, maintain shopping cart contents across sessions, keep users authenticated, personalize experiences, and track behavior when HTTP protocol itself provides no persistence mechanism? Understanding cookies—their technical implementation, security characteristics, privacy implications, modern alternatives (localStorage, sessionStorage, IndexedDB), regulatory requirements (GDPR, CCPA), and evolving browser policies restricting third-party cookies—proves essential for contemporary web development. Cookies influenced web evolution profoundly: enabling e-commerce (shopping carts persisting across visits), user authentication (session management), personalization (language preferences, UI customization), and analytics (user tracking, conversion attribution). However, cookie limitations (4KB size restriction, security vulnerabilities, privacy concerns, performance overhead sending cookies with every request) drove development of alternative client-side storage APIs and privacy-preserving technologies. Modern web development requires balancing cookie functionality against user privacy, understanding cookie attributes controlling scope and lifetime, implementing security best practices (HttpOnly, Secure, SameSite flags), complying with privacy regulations, and selecting appropriate storage mechanisms (cookies for authentication tokens, localStorage for app data, IndexedDB for structured storage) based on specific use case requirements.

What Are Cookies? Technical Definition


Why Cookies Exist: Solving HTTP Statelessness

HTTP's stateless design treats each request independently—server processes request, sends response, forgets transaction. Request for `/page1.html` followed by `/page2.html` appears to server as two unrelated transactions from potentially different users. This simplifies server implementation (no session state management) and improves scalability (servers handle requests independently without coordination) but creates problems for interactive web applications requiring continuity across requests.
  • E-commerce demonstrates the problem: User adds product to cart (request 1), browses other products (request 2), proceeds to checkout (request 3)—without state mechanism, how does server associate these requests with same user and maintain cart contents? Original web design assumed document browsing (stateless fine), but commercial web demanded transaction support (stateless problematic).
  • Cookies solve state management by creating client-side storage server can read/write across requests. Server generates unique session identifier, stores it in cookie, maintains server-side session data keyed by that identifier. Subsequent requests include cookie, server retrieves session data, processes request with context. This client-side state storage enables:
  • Session management - Authentication tokens proving user identity across requests without re-login. Server creates session after successful authentication, stores session ID in cookie, validates session ID on protected resources. Modern pattern: short-lived access tokens (JWT) in memory or httpOnly cookies, long-lived refresh tokens in httpOnly cookies.
  • Shopping carts - E-commerce sites store cart ID in cookie, maintain cart contents server-side associated with that ID. User adds items across multiple page visits, cart persists. Alternative: store entire cart in cookie (within 4KB limit) avoiding server-side storage but exposing data client-side.
  • Personalization - Websites remember user preferences (language, theme, layout) across visits without requiring login. Cookie stores preference directly (lang=es) or references server-side profile. Single Page Applications often store UI preferences in localStorage (larger capacity) using cookies only for authentication.
  • Analytics and tracking - Third-party analytics (Google Analytics) use cookies tracking user behavior across sessions—visits, page views, conversion paths. Advertising networks use third-party cookies tracking users across websites enabling targeted advertising. Privacy regulations and browser policies increasingly restrict third-party cookie usage driving alternative tracking methods (server-side analytics, first-party cookies, fingerprinting, though latter raises ethical concerns).

Cookie Lifecycle and Browser Workflow

Cookie Attributes: Controlling Scope and Security



Cookie Manipulation via JavaScript

Client-side JavaScript can read, create, and delete cookies through `document.cookie` property—though API proves cryptic, lacking methods or structured access. Understanding JavaScript cookie manipulation enables client-side state management, though modern applications increasingly favor localStorage/sessionStorage for better API and larger capacity.
Reading cookies: 

// document.cookie returns all cookies as single string
console.log(document.cookie);
// Output: "sessionId=abc123; userId=42; theme=dark"

// Parse cookies into object
function getCookies() {
  return document.cookie.split('; ').reduce((acc, cookie) => {
    const [name, value] = cookie.split('=');
    acc[name] = decodeURIComponent(value);
    return acc;
  }, {});
}

// Get specific cookie
function getCookie(name) {
  const cookies = getCookies();
  return cookies[name] || null;
}
Setting cookies: 

// Basic cookie (session cookie, current domain/path)
document.cookie = "username=Alice";

// Cookie with attributes
document.cookie = "theme=dark; Max-Age=2592000; Path=/; SameSite=Lax";

// Helper function for setting cookies
function setCookie(name, value, options = {}) {
  let cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
  
  if (options.maxAge) cookie += `; Max-Age=${options.maxAge}`;
  if (options.path) cookie += `; Path=${options.path}`;
  if (options.domain) cookie += `; Domain=${options.domain}`;
  if (options.secure) cookie += '; Secure';
  if (options.sameSite) cookie += `; SameSite=${options.sameSite}`;
  
  document.cookie = cookie;
}

// Usage
setCookie('preference', 'compact', {
  maxAge: 86400,      // 24 hours
  path: '/',
  secure: true,
  sameSite: 'Lax'
});


Deleting cookies: 

// Set cookie with past expiration date
document.cookie = "username=; Max-Age=0";

// Helper function
function deleteCookie(name, path = '/') {
  document.cookie = `${name}=; Max-Age=0; Path=${path}`;
}

Limitations of JavaScript cookie API:
  • Cannot access HttpOnly cookies (security feature preventing XSS theft)
  • Cannot read individual cookie attributes (expiration, domain, secure flag)
  • String-based API requires manual parsing (no native JSON support)
  • 4KB size limit per cookie enforced by browser
  • Synchronous API blocks execution during disk I/O
Modern alternatives preferred for client-side storage: 

// localStorage - 5-10MB, simpler API, persistent
localStorage.setItem('preferences', JSON.stringify({theme: 'dark'}));
const prefs = JSON.parse(localStorage.getItem('preferences'));

// sessionStorage - Same as localStorage but clears on tab close
sessionStorage.setItem('tempData', 'value');

// IndexedDB - Hundreds of MB, structured database with indexes
const db = await window.indexedDB.open('myDB', 1);

Reserve cookies for authentication tokens (httpOnly, server-managed) and cross-domain scenarios (SameSite=None). Use localStorage/sessionStorage for application data providing better capacity, API, and avoiding cookie transmission overhead.

Cookie Security Vulnerabilities and Mitigation

Cookie Privacy Concerns and Regulations


Browser Cookie Management and User Controls

Modern browsers provide comprehensive cookie management enabling users controlling which cookies are accepted, viewing stored cookies, and deleting cookies individually or in bulk. Understanding browser cookie policies and user controls helps developers anticipate user configurations and design accordingly.
Browser cookie settings (Chrome example):
  1. Navigate to chrome://settings/cookies
  2. Cookie options:
    • Allow all cookies (permissive, privacy-poor)
    • Block third-party cookies (default in many browsers, privacy-balanced)
    • Block all cookies (restrictive, breaks many sites)
  3. Site-specific exceptions: Allow/block specific domains regardless of global setting
  4. Clear cookies: Delete all cookies or selectively by site/timeframe

  • Viewing cookies in DevTools:
    • Chrome: DevTools → Application tab → Storage → Cookies → [domain]
    • Shows: Name, Value, Domain, Path, Expires, Size, HttpOnly, Secure, SameSite
    • Edit: Double-click value to modify, test application behavior
    • Delete: Right-click individual cookies or clear all
  • Incognito/Private browsing mode:
    • Starts with no cookies from normal browsing
    • Cookies set during session
    • All cookies deleted when incognito window closes
    • Useful for testing new-user experience or debugging cookie issues
  • Third-party cookie blocking (increasing default):
    • Safari: Intelligent Tracking Prevention blocks third-party cookies, purges first-party cookies from tracking domains
    • Firefox: Enhanced Tracking Protection blocks known trackers
    • Chrome: Delayed third-party cookie deprecation (originally 2022, now 2024+) due to advertising industry pushback
Developer implications: 

// Test if cookies are enabled
function cookiesEnabled() {
  document.cookie = "test=1";
  const enabled = document.cookie.indexOf("test=") !== -1;
  document.cookie = "test=; Max-Age=0"; // Clean up
  return enabled;
}

if (!cookiesEnabled()) {
  // Provide fallback or inform user
  console.warn("Cookies disabled - some features unavailable");
}

// Graceful degradation
try {
  setCookie('preference', 'value');
} catch (e) {
  // Use localStorage fallback or server-side storage
  localStorage.setItem('preference', 'value');
}
Designing for cookie restrictions:
  • Ensure core functionality works without cookies (progressive enhancement)
  • Provide clear messaging when cookies required for features
  • Offer alternative authentication (magic links, OAuth) not requiring persistent cookies
  • Use server-side sessions minimizing client-side cookie dependency
  • Test with various cookie policies (all blocked, third-party blocked, all allowed)

Modern Alternatives to Cookies



Testing and Debugging Cookies

Effective cookie testing requires understanding browser behaviors, debugging tools, and common pitfalls. Systematic testing ensures cookies work across browsers, configurations, and user scenarios.
Chrome DevTools cookie inspection:
  1. Open DevTools (F12)
  2. Application tab → Storage → Cookies → Select domain
  3. View all cookie attributes (name, value, domain, path, expires, size, flags)
  4. Edit values directly testing application behavior
  5. Delete individual cookies or clear all
  6. Filter cookies by name searching large cookie sets

Testing cookie acceptance scenarios: 

// Test 1: Cookies completely disabled
// Chrome → Settings → Privacy → Block all cookies
// Expected: Site degrades gracefully or shows informative message

// Test 2: Third-party cookies blocked (increasingly common default)
// Expected: First-party cookies work, third-party analytics/ads fail

// Test 3: Incognito mode
// Expected: Fresh state, no existing cookies, cookies cleared on close

// Automated test example (Jest/Puppeteer)
test('Sets authentication cookie on login', async () => {
  await page.goto('https://example.com/login');
  await page.type('#username', 'test');
  await page.type('#password', 'password');
  await page.click('#submit');
  
  const cookies = await page.cookies();
  const sessionCookie = cookies.find(c => c.name === 'sessionId');
  
  expect(sessionCookie).toBeDefined();
  expect(sessionCookie.secure).toBe(true);
  expect(sessionCookie.httpOnly).toBe(true);
  expect(sessionCookie.sameSite).toBe('Strict');
});


Common cookie debugging issues:
  • Problem: Cookie not setting
    • Causes:
      • Domain mismatch
      • Path mismatch
      • Secure flag on HTTP
      • SameSite=None without Secure
    • Debug:
      • Check DevTools Console for errors
      • Verify Set-Cookie header in Network tab
  • Problem: Cookie not sending with request
    • Causes:
      • Domain/path mismatch
      • Expired
      • SameSite restrictions
      • Third-party context
    • Debug:
      • Network tab shows request headers
      • Verify Cookie header present
  • Problem: Cookie accessible in JavaScript when shouldn't be
    • Causes:
      • Missing HttpOnly flag
    • Debug:
      • Try document.cookie in Console — should not show HttpOnly cookies
  • Problem: Cookie working in development but not production
    • Causes:
      • HTTP vs HTTPS (Secure flag)
      • localhost vs actual domain (Domain attribute)
      • Development disables SameSite
    • Debug:
      • Test on production-like environment (HTTPS, actual domain)

Testing cookie expiration: 

// Set short-lived cookie for testing
document.cookie = "test=value; Max-Age=5"; // 5 seconds

// Wait and verify deletion
setTimeout(() => {
  console.log(document.cookie.includes('test')); // Should be false
}, 6000);

Cross-browser testing:
  • Chrome/Edge: Chromium-based, similar behavior
  • Firefox: Different cookie storage, test Enhanced Tracking Protection
  • Safari: Aggressive ITP, test third-party cookie blocking
  • Mobile browsers: Test on iOS Safari, Android Chrome with different constraints

Conclusion

HTTP cookies provide fundamental state management mechanism enabling stateful interactions atop HTTP's stateless protocol—maintaining authentication sessions, persisting shopping carts, storing user preferences, and enabling personalization across web requests. Understanding cookie characteristics (4KB size limit, automatic transmission, domain scoping, expiration control), security attributes (HttpOnly preventing XSS theft, Secure requiring HTTPS, SameSite preventing CSRF), privacy implications (third-party tracking, regulatory requirements, user consent), and browser policies (increasing third-party cookie restrictions) proves essential for modern web development. While cookies remain necessary for authentication tokens and cross-domain scenarios, developers increasingly adopt alternative storage APIs (localStorage for user preferences, IndexedDB for structured data, Cache API for offline functionality) offering better capacity, APIs, and use-case fit. Effective cookie implementation balances functionality requirements against security best practices (minimal data in cookies, HttpOnly for sensitive tokens, proper expiration), privacy considerations (consent management, first-party preference, minimal tracking), and user experience (graceful degradation when cookies disabled, clear messaging about requirements). Evolution continues—browser vendors restrict third-party cookies protecting privacy, regulations impose consent requirements, new standards propose privacy-preserving alternatives—requiring developers staying current with cookie policies, security practices, and modern storage alternatives ensuring applications remain functional, secure, and privacy-respecting across diverse user configurations and regulatory environments.

Testing Cookies in Your Browser

Exercise: Cookie Behavior Testing


SEMrush Software 4 SEMrush Banner 4