DEV Community

Cover image for The Ultimate Guide to Cookie Properties in the Browser
ZeeshanAli-0704
ZeeshanAli-0704

Posted on • Edited on

The Ultimate Guide to Cookie Properties in the Browser

Cookies are the backbone of state management on the web. They help websites remember who you are, what’s in your shopping cart, or what theme you prefer. But beyond the basics of document.cookie, cookies have many properties that control their scope, security, and behavior across domains.

This blog is a deep dive into cookie properties — from Expires to SameSite and how cross-origin rules affect them.

📑 Table of Contents

  1. Introduction
  2. Basic Structure of a Cookie

  3. Cookie Properties Explained

  4. Cookies and Cross Origin Rules

  5. Real World Examples

  6. Best Practices

  7. Conclusion

🔹 Introduction

A cookie is a small key-value pair stored in the browser. While the basics are simple (name=value), the true power of cookies lies in their properties. These properties control lifetime, accessibility, domain scope, cross-site rules, and security.

🔹 Basic Structure of a Cookie

Cookies are set using the Set-Cookie HTTP response header:

Set-Cookie: sessionId=abc123; Expires=Wed, 13 Jan 2027 22:23:01 GMT; Path=/; Domain=example.com; Secure; HttpOnly; SameSite=Strict;
Enter fullscreen mode Exit fullscreen mode

Here:

  • sessionId=abc123 → Name & value
  • Expires → Expiration date
  • Path=/ → Cookie available across entire domain
  • Domain=example.com → Scoped to this domain
  • Secure → Sent only via HTTPS
  • HttpOnly → Not accessible from JavaScript
  • SameSite=Strict → Prevents cross-site usage

🔹 Cookie Properties Explained

Name=Value

  • The fundamental unit of a cookie.
  • Name must be unique within its scope (domain + path).

Example:

Set-Cookie: username=Zeeshan
Enter fullscreen mode Exit fullscreen mode

Expires and Max Age

  • Expires: A fixed date/time after which the cookie is invalid.
  • Max-Age: Lifetime in seconds (takes precedence over Expires).

Examples:

Set-Cookie: theme=dark; Expires=Wed, 01 Jan 2025 00:00:00 GMT
Set-Cookie: token=xyz; Max-Age=3600
Enter fullscreen mode Exit fullscreen mode

⚡ Session cookies are created if neither Expires nor Max-Age is set (deleted when browser closes).

Domain

  • Controls which hosts can receive the cookie.
  • By default, cookies are scoped to the exact domain that set them.
  • If specified, subdomains can also access it.

Example:

Set-Cookie: userId=123; Domain=example.com
Enter fullscreen mode Exit fullscreen mode
  • Accessible to www.example.com, shop.example.com.
  • Not accessible to evil.com.

❌ Security risk: Overly broad domain cookies (like .com) are rejected by browsers.

Path

  • Restricts cookie to specific paths.

Example:

Set-Cookie: cart=5; Path=/shop
Enter fullscreen mode Exit fullscreen mode
  • Sent with requests to /shop or /shop/products.
  • Not sent to /profile.

Secure

  • Cookie only sent over HTTPS.
  • Prevents exposure on unencrypted connections. 
Set-Cookie: sessionToken=abc; Secure
Enter fullscreen mode Exit fullscreen mode

HttpOnly

  • Cookie is inaccessible to JavaScript (document.cookie).
  • Helps prevent XSS attacks from stealing cookies. 
Set-Cookie: auth=abc; HttpOnly
Enter fullscreen mode Exit fullscreen mode

SameSite

Controls whether cookies are sent with cross-site requests.

  • Strict: Sent only for same-site navigation. Strongest CSRF protection.
  • Lax: Sent for top-level navigations (safe by default).
  • None: Sent for all requests, must be Secure.

Example:

Set-Cookie: csrftoken=xyz; SameSite=Strict
Enter fullscreen mode Exit fullscreen mode

⚠️ Modern browsers default to SameSite=Lax if not specified.

Priority (Chrome-specific)

Determines eviction order when hitting browser cookie limits:

  • Low, Medium, High. 
Set-Cookie: pref=light; Priority=High
Enter fullscreen mode Exit fullscreen mode

Partitioned Cookies (CHIPS)

A new spec: Cookies Having Independent Partitioned State (CHIPS).

  • Each third-party cookie is isolated per top-level site.
  • Improves privacy by preventing tracking across sites. 
Set-Cookie: id=123; Secure; SameSite=None; Partitioned
Enter fullscreen mode Exit fullscreen mode

🔹 Cookies and Cross Origin Rules

1. First Party vs Third Party Cookies

  • First-party cookies: Set by the site you are visiting.
  • Third-party cookies: Set by external domains (e.g., ad networks).
  • Browsers are phasing out third-party cookies due to privacy concerns.

2. Cross Site Request Forgery (CSRF) and SameSite

  • Without SameSite, attackers can force a victim’s browser to send cookies to your site via a malicious request.
  • SameSite=Strict or Lax mitigates this.

3. Cross Origin Resource Sharing (CORS) with Cookies

When making cross-origin AJAX requests:

  • Server must allow credentials with Access-Control-Allow-Credentials: true.
  • Browser must send cookies with fetch(..., { credentials: "include" }).

Example:

fetch("https://api.example.com/data", {
  credentials: "include"
});
Enter fullscreen mode Exit fullscreen mode

Server response must include:

Access-Control-Allow-Origin: https://yourdomain.com
Access-Control-Allow-Credentials: true
Enter fullscreen mode Exit fullscreen mode

🔹 Real World Examples

  1. Authentication → Secure + HttpOnly session tokens.
  2. E-commerce → Shopping cart with Path=/cart.
  3. Multi-subdomain apps → Domain=example.com for SSO.
  4. Analytics → Third-party cookies (phasing out → CHIPS).

🔹 Best Practices

✅ Use Secure + HttpOnly for auth cookies.
✅ Use SameSite=Lax or Strict to mitigate CSRF.
✅ Avoid overly broad Domain values.
✅ Keep cookies small (<4KB).
✅ Prefer server-set cookies over client-side JS.
✅ For cross-origin APIs, configure CORS properly.

🔹 Conclusion

Cookies may seem simple, but their properties define how they behave in terms of security, scope, and cross-origin interactions. By mastering these attributes — especially SameSite, Secure, and HttpOnly — you can secure your apps, prevent attacks, and ensure a smooth user experience.

The future is moving towards privacy-first cookies (CHIPS, partitioned cookies), so understanding these fundamentals is more important than ever.

More Details:

Get all articles related to system design
Hastag: SystemDesignWithZeeshanAli

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

Top comments (0)