This content originally appeared on DEV Community and was authored by ZeeshanAli-0704

Cookies in Web Development: Client & Server Perspective

Cookies are small pieces of data stored in your browser that help websites remember who you are, maintain sessions, and personalize your experience. If you’ve ever logged into a website and stayed logged in the next day, chances are—cookies made that possible.

In this article, we’ll explore cookies from both the client-side (browser/JavaScript) and the server-side (Node.js/Express, Java Spring Boot).

Table of Contents

1. What is a Cookie?

2. Types of Cookies

   • Session Cookies
   • Persistent Cookies

3. How Cookies Work

4. Client-Side Cookie Management

   • Reading cookies with JavaScript
   • Writing cookies with JavaScript
   • Limitations & HttpOnly

5. Server-Side Cookie Management

   • Setting cookies in Node.js/Express
   • Setting cookies in Java Spring Boot
   • Secure, HttpOnly, and SameSite attributes

6. Cookie Security Best Practices

7. Why Websites Ask for Cookie Permissions

8. Conclusion

1. What is a Cookie?

A cookie is a small key-value pair stored in a user’s browser.
Example format:

sessionId=abc123; Path=/; Expires=Wed, 30 Aug 2025 12:00:00 GMT; Secure; HttpOnly

Cookies travel back and forth between client and server via HTTP headers, making them essential for sessions, personalization, and analytics.

2. Types of Cookies

Session Cookies

• Stored only until the browser is closed.
• Commonly used for temporary sessions like shopping carts.

Persistent Cookies

• Stored with an expiry date.
• Example: “Remember Me” login sessions.

3. How Cookies Work

1. Server → Browser: The server sets cookies using the Set-Cookie header.
2. Browser → Server: On each subsequent request, the browser automatically attaches cookies in the Cookie header.
3. JavaScript: Can also create, read, or modify cookies (unless restricted with HttpOnly).

4. Client-Side Cookie Management

Reading Cookies in JavaScript

console.log(document.cookie);
// Example output: "theme=dark; sessionId=abc123"

Writing Cookies in JavaScript

// Set a cookie that expires in 7 days
document.cookie = "user=Zeeshan; max-age=" + 7 * 24 * 60 * 60;

Limitation

• JavaScript cannot read HttpOnly cookies, making them more secure.

5. Server-Side Cookie Management

While JavaScript can manage cookies, servers usually set secure cookies for authentication and sessions.

Node.js / Express Example

const express = require("express");
const app = express();

// Set cookie
app.get("/set-cookie", (req, res) => {
  res.cookie("sessionId", "abc123", {
    httpOnly: true,   // Not accessible via JavaScript
    secure: true,     // Sent only over HTTPS
    maxAge: 24 * 60 * 60 * 1000 // 1 day
  });
  res.send("Cookie has been set!");
});

// Read cookie
app.get("/get-cookie", (req, res) => {
  console.log(req.cookies);  // Requires cookie-parser middleware
  res.send(req.cookies);
});

app.listen(3000, () => console.log("Server running on http://localhost:3000"));

Java Spring Boot Example

import org.springframework.http.ResponseCookie;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import jakarta.servlet.http.HttpServletResponse;

@RestController
public class CookieController {

    @GetMapping("/set-cookie")
    public String setCookie(HttpServletResponse response) {
        ResponseCookie cookie = ResponseCookie.from("sessionId", "abc123")
                .httpOnly(true)
                .secure(true)
                .path("/")
                .maxAge(24 * 60 * 60) // 1 day
                .build();
        response.addHeader("Set-Cookie", cookie.toString());
        return "Cookie has been set!";
    }

    @GetMapping("/get-cookie")
    public String getCookie(javax.servlet.http.HttpServletRequest request) {
        if (request.getCookies() != null) {
            return "Cookies: " + java.util.Arrays.toString(request.getCookies());
        }
        return "No cookies found.";
    }
}

Secure, HttpOnly, and SameSite Attributes

• Secure → Only sent over HTTPS.
• HttpOnly → Hidden from JavaScript (document.cookie).
• SameSite → Prevents cross-site request forgery (CSRF).

6. Cookie Security Best Practices

• Always set HttpOnly and Secure for authentication cookies.
• Use SameSite=Strict for sensitive apps.
• Avoid storing sensitive data (like passwords) in cookies.
• Rotate and expire cookies regularly.

7. Why Websites Ask for Cookie Permissions?

Due to privacy regulations (GDPR, CCPA), websites must ask for consent before storing cookies that track user behavior (especially advertising cookies).

8. Conclusion

Cookies are the backbone of sessions, authentication, and personalization on the web.

• On the client side, JavaScript can read/write cookies for general use.
• On the server side, frameworks like Express and Spring Boot set secure cookies for authentication and state management.

By combining both perspectives, developers can create secure and user-friendly web applications.

More Details:

Get all articles related to system design
Hastag: SystemDesignWithZeeshanAli

Git: https://github.com/ZeeshanAli-0704/SystemDesignWithZeeshanAli

This content originally appeared on DEV Community and was authored by ZeeshanAli-0704