ReviseAlgo Logo

Browser APIs & Web APIs

Cookies

Master browser cookies in JavaScript. Learn the Document.cookie API, options like HttpOnly, Secure, SameSite, and how to manage session cookies.

Last Updated: July 15, 2026 • 10 min read

1. Introduction

HTTP Cookies are small packets of data (up to 4KB) stored in the browser. Unlike Web Storage, cookies are automatically sent to the server with every HTTP request, making them ideal for managing session state and authentication.

2. Why It Matters

Cookies are critical for securing web applications. By understanding security attributes like HttpOnly, Secure, and SameSite, developers can protect session tokens from Cross-Site Scripting (XSS) and Cross-Site Request Forgery (CSRF) attacks.

3. Real-World Analogy

Think of an Amusement Park Entry Wristband:

  • Web Storage (Personal Map): A park map in your pocket. You read it to find rides, but the park staff never inspect it.
  • Cookie (Entry Wristband): A wristband with a unique ID given to you at the gate. Every time you enter a ride, the staff inspects your wristband (cookie is sent with the HTTP request) to verify your access.
  • HttpOnly Cookie (Locked Wristband): A tamper-proof wristband locked onto your wrist. You cannot modify it yourself (client-side JS cannot access it), ensuring it can only be verified by the staff at the entrance.

4. The Document.cookie API

JavaScript reads and writes client-accessible cookies using the document.cookie property. This property acts as a getter/setter wrapper, modifying only the specified entry instead of overwriting the entire cookie string:

5. Cookie Security Attributes

  • HttpOnly: Prevents client-side scripts from reading the cookie via document.cookie. This helps protect session tokens from XSS attacks. Note that this attribute can only be set by the server in HTTP headers.
  • Secure: Restricts cookie transmission to encrypted (HTTPS) requests only.
  • SameSite: Restricts whether cookies are sent with cross-site requests, protecting against CSRF attacks. Options: Strict, Lax (default), or None.
  • Expires / Max-Age: Defines the cookie's lifespan. If omitted, the cookie is deleted when the browser session ends.

6. Practical Example

This script demonstrates how to parse document.cookie to read an individual cookie value:

7. Common Mistakes

  • Trying to clear a cookie without matching its path: To delete a cookie, set its expiration date to the past. However, you must specify the exact path and domain attributes that were used to create the cookie, or the browser will ignore the deletion request.

8. Quick Quiz

Q1: Which cookie attribute prevents client-side JavaScript from reading the cookie via document.cookie?

A) Secure

B) HttpOnly

Answer: B — The HttpOnly attribute blocks client-side scripts from reading the cookie, protecting session tokens from XSS leaks.

9. Scenario-Based Challenge

The CSRF Cookie Guard:

An application stores authentication state in cookies. You want to make sure these cookies are not sent with cross-site resource requests initiated by external sites, preventing CSRF vulnerabilities. Design a cookie setter string with the correct attributes.

10. Debugging Exercise

Explain why this delete code does not remove the session cookie, and how to fix it:

// Objective: logout the user by deleting the user token
document.cookie = "token="; // cookie is not removed! Why?
View Solution

Diagnosis: Setting the cookie value to empty does not delete the cookie. The cookie remains in browser storage, just with an empty value. To delete it, you must set its expiration date to the past and match its original path.

Fix: Set the expiration date to a date in the past (e.g. Epoch time) and match the path parameter:

document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

11. Interview Questions

🟢 Q1: Explain the purpose of SameSite attributes (Strict, Lax, None) on cookies.

Answer: The SameSite attribute controls whether cookies are sent with cross-site requests, protecting against CSRF attacks:
• Strict: The cookie is only sent in first-party contexts. It is not sent with requests initiated by external sites, even when clicking standard links.
• Lax: The cookie is withheld on cross-site subrequests (like images or frames) but is sent when a user navigates to the origin site (e.g. clicking a link). This is the default in modern browsers.
• None: The cookie is sent with all requests, including cross-site requests. This requires the Secure attribute to be set as well.

12. Production Considerations

  • • HttpOnly for Authentication: Always set the HttpOnly attribute on authentication session cookies. This prevents malicious scripts from reading the token via XSS, keeping user sessions secure.