HTTP Cookies

An HTTP cookie (web cookie, browser cookie) is a small piece of data that a server sends to a user's web browser. The browser may store the cookie and send it back to the same server with later requests.

Uses for cookies:

Session management:

Session management facilitates secure interactions between the user and some service or application.

Examples: Logins, auto-filled form fields, shopping lists

User personalization:

Settings are saved and synchronized with a central database to help users return to preferred settings used during their first application interaction.

Examples: User preferences, themes, language

Tracking:

Tracking records and analyzes users’ web browsing habits and finds the number and type of pages the user visits. Details include time spent on page and page sequence across a user’s sessions. Due to the sensitive information behind tracking, users should be aware of vulnerabilities from visiting insecure web pages.

Examples: Ads

Properties

The scope of a cookie determines what URLs cookies should be sent to.

Domain

Domains attributes are β€œbuckets” in which cookies are placed. Example: Domain=example.io will set cookies to be available for on all subdomains such as developer.example.io.

Path

The path attribute indicates a specific URL path to send the cookie header. In order to set cookies for different paths, you can write the code:

document.cookie="examplepath1=1; path=/path"
  1. Expires and Max-age​

Another property to consider is the lifetime of a cookie or, more simply, the cookie’s expiration date. The Expires and Max-Age attributes fall under a persistent cookies category. Despite the name β€œpermanent cookie,” the Expires attribute will delete a cookie at a specified date. In contrast, the Max-Age attribute will delete a cookie after a specified period of time.

On the other hand, session cookies are deleted when the current session ends. Keep in mind that some browsers define when that current session ends, which can be an indefinite amount of time.

  1. SameSite

We covered earlier how HTTP cookies are set for direct URLs, but what about clicking a link within that direct URL? When clicking a link within a page, your cookies can be sent from the new page you are directed to. This is where the SameSite attribute comes into play. Put simply, Samesite specifies whether cookies are sent with cross-site requests or whenever you click a link on any given page. For example, let’s follow this sequence for how cookies are sent and received when navigating between one web page to another.

  1. You type in the URL www.example.com

  2. You will receive a first-party cookie

  3. On www.example.com, you click a link or button that sends a Fetch request to www.cookie.com.

  4. www.example.com now holds a third-party cookie from www.cookie.com.

A SameSite attribute specifies whether third-party cookies are sent with three values:

  • Strict

With a SameSite value of strict, cookies will only be sent through a first-party cookie context and not third-party cookies.

  • Lax

With a SameSite value of lax, cookies will only be sent when users actively click a link to a third-party website. If the SameSite attribute isn’t directly set, lax becomes the default value.

  • None

With a SameSite value of None, cookies will be sent in all contexts.

Reference

Last updated