What Are Cookies in Web Development? A Practical Guide for AI-Assisted Developers

Cookies are how browsers remember you. When AI builds auth or sessions into your app, cookies are almost always involved — and the security flags matter a lot.

Why AI Coders Need to Know This

The moment you ask AI to "add user login," it will generate cookies. When you ask for "remember me," it sets a cookie. When it builds a shopping cart, a cookie. When your app keeps you logged in after closing the browser — cookie.

The problem: AI often generates working cookie code with missing security flags. A missing HttpOnly flag makes your session token vulnerable to JavaScript-based attacks. A missing Secure flag sends auth data over plain HTTP. These aren't theoretical risks — they're common vulnerabilities in AI-generated apps.

You don't need to memorize every cookie attribute. You need to know the three security flags and always check that AI includes them on any cookie that holds user data.

Real Scenario

The keyword "secure" in the prompt is important — it should trigger the AI to include security flags. Let's see what it produces.

What AI Generated

// Express.js login endpoint with secure cookie setup
const express = require('express');
const router = express.Router();

router.post('/login', async (req, res) => {
  const { email, password } = req.body;

  try {
    // 1. Verify credentials (simplified)
    const user = await authenticateUser(email, password);
    
    if (!user) {
      return res.status(401).json({ error: 'Invalid credentials' });
    }

    // 2. Create a session token
    const sessionToken = generateSecureToken(); // crypto.randomBytes(32).toString('hex')

    // 3. Store session in database
    await saveSession(sessionToken, user.id, Date.now() + 7 * 24 * 60 * 60 * 1000); // 7 days

    // 4. Set the cookie with security flags
    res.cookie('session_token', sessionToken, {
      httpOnly: true,    // ← JS cannot read this cookie (XSS protection)
      secure: true,      // ← Only sent over HTTPS
      sameSite: 'lax',   // ← Blocks most CSRF attacks
      maxAge: 7 * 24 * 60 * 60 * 1000, // 7 days in milliseconds
      path: '/'          // ← Cookie valid for all routes
    });

    res.json({ success: true, user: { id: user.id, email: user.email } });

  } catch (error) {
    console.error('Login error:', error);
    res.status(500).json({ error: 'Login failed' });
  }
});

// Logout: clear the cookie
router.post('/logout', (req, res) => {
  res.clearCookie('session_token', { 
    httpOnly: true, 
    secure: true,
    sameSite: 'lax'
  });
  res.json({ success: true });
});

// Read cookie in middleware
function requireAuth(req, res, next) {
  const token = req.cookies.session_token; // requires cookie-parser middleware
  if (!token) {
    return res.status(401).json({ error: 'Not authenticated' });
  }
  // Validate token against database...
  next();
}

module.exports = router;

Understanding Each Part

How cookies work: the flow

1. Server sends: On login, the server sends a Set-Cookie header in the HTTP response. The browser receives and stores it.
2. Browser stores: The browser saves the cookie associated with that domain and path.
3. Browser sends: On every subsequent request to that domain, the browser automatically includes the cookie in a Cookie header. You don't write any code to make this happen — it's automatic.
4. Server reads: The server reads req.cookies.session_token to verify the user's identity.

This is fundamentally different from localStorage, which the server never sees.

The HttpOnly flag

When set, JavaScript cannot access this cookie via document.cookie. This is critical for session tokens: if malicious code runs in your browser (XSS attack), it cannot steal the cookie because JS can't read it. Never skip this on auth cookies.

The Secure flag

The browser only sends this cookie over HTTPS connections. During local development (http://localhost), you may need to set this to false temporarily — but it must be true in production. AI sometimes hardcodes secure: false for development and doesn't change it before shipping.

The SameSite attribute

• Strict: Cookie never sent on cross-site requests. Most secure, but breaks some OAuth flows.
• Lax: Cookie sent on top-level navigation (clicking a link) but not on cross-site POST requests. Good default.
• None: Cookie sent on all requests. Required for cross-site cookies (like an embedded payment widget) but must be paired with Secure.

maxAge vs. expires

maxAge sets the cookie lifetime in milliseconds from now. expires sets an absolute date/time. Without either, the cookie is a "session cookie" — it disappears when the browser closes. For "remember me" functionality, set maxAge.

Cookie size limit

Cookies are limited to 4KB per cookie. Don't store large amounts of data in cookies — store a session ID in the cookie and keep the real data in your database. This is what the code above does: the cookie holds only a token, and the token maps to the user session in the database.

What AI Gets Wrong

How to Debug with AI

Inspecting cookies in DevTools

Open DevTools (F12) → Application tab → Cookies → your domain. You'll see every cookie, its value, flags, and expiration. This is the fastest way to confirm your cookie was set and has the right flags.

Cookie not being sent to the server

Check: Does the cookie's domain/path match where you're making the request? Is Secure set but you're on HTTP (localhost)? Is SameSite=Strict blocking a cross-origin request?

Debugging prompt: "My session cookie isn't being sent to the server. I'm on http://localhost:3000 making requests to http://localhost:4000 (different port). The cookie has SameSite=Lax and Secure=false for dev. What would prevent it from being sent?"

Tool-specific tips

• Cursor: Ask it to add console.log statements that print req.cookies on each protected route to confirm the cookie is arriving.
• Claude Code: Paste your cookie configuration and ask: "Audit this cookie setup for security. Is HttpOnly set on auth cookies? Is Secure appropriate for my environment?"
• Windsurf: Ask it to create a security checklist for all cookie usage in the project and flag any cookies missing required security flags.

What to Learn Next

• What Is Authentication? — Cookies are the transport layer for session-based auth. Understanding authentication explains why cookies are structured this way.
• What Is JWT? — JWT is an alternative approach where the token itself carries the user data. Comparing JWT with session cookies helps you choose the right approach.
• What Is XSS? — The attack that HttpOnly protects against. Understanding the threat makes the defense make sense.
• What Is CSRF? — The attack that SameSite protects against.

FAQ