Cookies

A cookie is a piece of information stored in the browser. Browsers can set cookies using JavaScript, and servers can set cookies using headers. Usually, a website stores multiple cookies at the same time. Cookies contain information in a key/value pair.

Cookies share many features with localStorage and sessionStorage. Cookies are stored on a user's computer and can be cleared by the user. But unlike the modern API's, cookies have some built-in security features that make them useful for handling authentication.

Authentication

Cookies can be used for authentication purposes, both in stateless and stateful methods.

Cookies can safely store a session id in the browser. The server stores the actual session.

Cookies can store tokens securely in single-page applications.

JavaScript

Cookies can be set and read with JavaScript using document.cookie. JavaScript cookies can store things like user preferences. But when dealing with authentication, it's not a good idea to use JavaScript cookies. Cookies set using JavaScript are vulnerable to XSS attacks similar to localStorage.

Headers

Cookies can be set by servers using HTTP headers.

To set a cookie in the user's browser, a request must include a Set-Cookie header.

Set-Cookie: <key>=<value>

Multiple cookies can be set in the same request using separate headers.

The browser automatically sends cookies to the server using the Cookie header.

Cookie: session_id=abc123; tracking_id=987qwe;

Lifetime

Cookies can be permanent or limited to the user's current session.

Session cookies are deleted whenever the user's session ends. Each browser determines when a session is over, but it's usually when the browser is closed.

Permanent cookies are stored in the browser until it's deleted by the user or until it expires. An expiration date can be set using the Expires attribute.

Set-Cookie: <key>=<value>; Expires=<date>;

Attributes

Cookies contain meta-information in the form of attributes.

The Secure attribute ensures that a cookie can only be set or returned on an HTTPS connection. This attribute is a good security measure against man-in-the-middle attacks because the cookie contents are encrypted.

The HttpOnly attribute ensures that a cookie can only be accessed by the server. This attribute is a good security measure against XSS attacks because malicious JavaScript code cannot access the cookie's contents. Cookies used to store session id's or tokens should use this attribute.

The Domain attribute specifies which host can receive the cookie. The browser will send the cookie to the domain stored in this attribute, including subdomains. If a cookie does not have this attribute, the browser will only send the cookie to the domain it was set from, excluding subdomains.

The Path attribute is similar to the Domain attribute, except it can specify a specific path that must be present in the URL before the browser includes the cookie with the request.

The SameSite attribute specifies where a cookie can come from. The value Strict means it's only allowed to come from the same URL that stored the cookie. The value Lax is similar to Strict, except it will also be permitted when navigating to a page from an external URL. The value None means there aren't any restrictions.

Setting the SameSite attribute to Strict or Lax can help mitigate CSRF attacks.

The difference between Domain and SameSite attributes is that Domain specifies where the browser will send cookies, whereas SameSite determines where the cookie may come from.

Authentication scaffolding

Starter kits for Laravel, Vue and React.