atom tldr

What’s a cookie?

Generally, a cookie is just a string saved in your browser and automatically sent in headers to servers.

Cookie attributes

Domain

Domain determins the domains to which the cookie will be available. When omitted: defaults to the current document URL, not including subdomains. Setting a domain will also work for all subdomains of that domain

Example 1:

Frontend hosted at sahal.com Backend hosted at example.com No domain value set = cookie will never be sent to the domain. Domain set to example.com = cookie will always be sent for requests to example.com

Example 2:

Frontend hosted at sahal.com backend hosted at test.sahal.com including or not including the domain will not matter here, since the default is sahal.com Multiple host/domain values are not allowed

Expires

Determines the lifetime of a cookie. When omitted: the cookie becomes a Session Cookie, which terminates when the client shuts down (i.e alt f4 or just closing the tab) Note that the deadline is relative to the client, not the server. when the deadline is reached, the browser auotomatically deletes the cookie.

Max-Age

Similar to Expires. Instead of a time stamp, this is a count-down in seconds. Max-Age has Priority over Expires.

HttpOnly

Forbids JavaScript from accessing the cookie. That’s it.

Path

The URL path to which the cookie will be sent. For example, if the path is /api/hello, the cookie will only be sent if the request is to /api/hello/* If omitted: defaults to the endpoint that generated the cookie

Example

User sent request to /api/auth. Path not set in the cookie: Cookie will be issued with path /api/auth. Cookie will only be sent to requests to /api/auth or its subdirectories. NOTE: THIS BEHAVIOR IS BROWSER-SPECIFIC. ALways set Path manually to ensure consistency To send it to any route: specify the path as /

Secure

Secure cookies cannot be accessed except in HTTPS context. This is ignored if the cookie setter is localhost. NOTE: the localhost ignore thing may not be consistent across browsers

SameSite

Can be None, Lax or Strict.

  1. Strict means only the issuing site can use the cookie(first party only). This means the the Originating Request site must be the same ast the Set-Cookie site. This includes both DOMAIN and PORT. A strict cookie set by example.sahal.com cannot be use to access sahal.com. A strict cookie set by localhost:3000 cannot access localhost:3001
  2. Lax is similar to strict, only first party can access the cookie. But additionally, the cookie will also be sent when navigating to the originating website. Example: localhost:8000 sets the cookie. Document is on localhost:3000. The cookie will not be sent with any fetch requests to :8000, but will be sent if the user clicks a link that navigates to :8000. Lax is the default setting if omitted (Inconsistent/browser specific)
  3. None means the cookie will be sent to any server, so long as Domain and Path match. Firefox rejects None if the cookie is not Secure