03-Apr-2025

HTTP Cookies are small pieces of data that a web server sends to a client’s browser. The browser then stores these cookies and sends them back to the server with every subsequent request to the same domain. This mechanism allows websites to “remember” information about the user across multiple requests or even across multiple browsing sessions.

How Cookies Work:

1. Server Sends a Set-Cookie Header: When a user interacts with a website, the server can include a Set-Cookie header in the HTTP response. This header contains the cookie’s data.

2. Browser Stores the Cookie: The browser receives the Set-Cookie header and stores the cookie locally.

3. Browser Sends Cookies with Requests: For every subsequent request to the same domain, the browser automatically includes all applicable cookies in the Cookie header of the HTTP request.

4. Server Accesses Cookies: The server can then access the cookies sent by the browser and use the stored information.

Example in JavaScript (Setting a Cookie):

// Set a cookie named "username" with the value "john_doe"
// It expires after 30 days
const expirationDate = new Date();
expirationDate.setTime(expirationDate.getTime() + (30 * 24 * 60 * 60 * 1000));
document.cookie = `username=john_doe; expires=${expirationDate.toUTCString()}; path=/`;


// Setting a cookie with additional attributes
document.cookie = "theme=dark; path=/; SameSite=Strict; Secure"; 

Explanation of Attributes:

• expires: Specifies the expiration date of the cookie. After this date, the browser automatically deletes the cookie. If omitted, the cookie becomes a session cookie, meaning it is deleted when the browser closes.
• path: Specifies the path on the server for which the cookie is valid. A value of / means the cookie is valid for the entire domain.
• domain: Specifies the domain for which the cookie is valid. If omitted, the cookie is only sent to the domain that set it.
• Secure: This attribute instructs the browser to only send the cookie over HTTPS connections, enhancing security.
• HttpOnly: This attribute prevents client-side JavaScript from accessing the cookie, mitigating certain types of cross-site scripting (XSS) attacks. The cookie can only be accessed by the server.
• SameSite: This attribute helps prevent cross-site request forgery (CSRF) attacks. Possible values include:
  • Strict: The cookie is only sent if the request originates from the same site.
  • Lax: The cookie is sent with top-level navigations (e.g., clicking a link) from other sites, but not with cross-site requests from other contexts (e.g., forms, iframes).
  • None: The cookie is sent with all requests, including cross-site requests. If SameSite=None is used, the Secure attribute must also be present.

Uses of Cookies:

• Session Management: Storing user login information so users don’t have to re-authenticate with every request.
• Personalization: Remembering user preferences, such as website themes or language settings.
• Tracking: Monitoring user behavior across a website for analytics purposes (often using third-party cookies).

Cookie Limitations:

• Size: Cookies are limited in size (typically around 4KB).
• Security Concerns: Cookies can be vulnerable to security risks if not handled properly, particularly regarding sensitive information. Always use HttpOnly and Secure flags where applicable.
• Privacy Concerns: The use of cookies, especially third-party cookies for tracking, raises privacy concerns. Users are increasingly aware of and concerned about their online privacy.

By understanding how HTTP cookies work and their associated attributes, developers can effectively utilize them for various functionalities while keeping security and privacy considerations in mind.