One of the concepts that all web developers should understand is cookies. While they've gotten a bad rap in the last few years, they're still a key piece of most applications. In this article, we'll review the purpose behind cookies, how the server / client interact through cookies, and common cookie attributes.
Purpose
Cookies are a way to keep track of stateful information in what would otherwise be stateless http requests. Left alone, each http request is isolated and has no knowledge of previous requests. While this works fine in some cases, the majority of application calls are not isolated. Instead, they need to know if the user has previously been authorized to make additional requests.
Cookies provide a clean solution to stateful problems like our authentication example. In many applications, a user will send up an authentication request with a username or password. Upon successful authentication, the server attaches a Set-Cookie header to the response, including a token value in the cookie. The browser then takes that cookie, stores it locally, and on subsequent requests it will automatically include the cookie as part of the request. The server then reads the information, validates the token, and allows the request to succeed.
Cookie Structure
Now that we understand the purpose behind cookies, let's take a look at the general cookie structure:
Set-Cookie: hello=world; expires=Thu, 17 Feb 2022 12:48:46 GMT; HttpOnly; Secure; path=/; Domain=https://chasearmstrong.com
The key for this cookie (its unique identifier) is hello and the value for the cookie is world. Everything else in the cookie is an attribue. Some attributes like expires require an associated value whereas others like HttpOnly and Secure do not. Instead, the presence or absence of these attributes conveys enough information that setting them to true or false is unnecessary.
Updating and Deleting Cookies
Updating and deleting cookies on subsequent requests is pretty easy. In the case of updating a cookie's value, we just send back a Set-Cookie header containing the same key but with a different value. So assuming this is our cookie to start:
Set-Cookie: theme=light; expires=Thu, 17 Feb 2022 12:48:46 GMT; path=/; Domain=https://chasearmstrong.com
We could send back the following cookie header to override the current cookie value:
Set-Cookie: theme=dark; expires=Thu, 17 Feb 2022 12:48:46 GMT; path=/; Domain=https://chasearmstrong.com
Just like that, we've changed our theme from light to dark and the client can respond accordingly.
Deleting cookies is very similar. All we need to do is send back a cookie with the same key but with an expires attribute in the past. Going back to our example, let's again assume we have this cookie set in the browser:
Set-Cookie: theme=light; expires=Thu, 17 Feb 2022 12:48:46 GMT; path=/; Domain=https://chasearmstrong.com
We could send back the following cookie header to ensure the browser deletes the cookie:
Set-Cookie: theme=light; expires=Thu, Jan 01 1970 00:00:00 GMT; path=/; Domain=https://chasearmstrong.com
Cookie Concepts
For this next bit, use the dropdown to toggle through the different cookie concepts. Each concept will give a brief explanation and highlight the cookies that match the concept.
Session
A session cookie is any cookie that is missing the Expires attribute. These types of cookies are automatically deleted when the user closes the browser.
Key
Value
Expires
HttpOnly
Path
Domain
Secure
SameSite
abc
123
/
https://chasearmstrong.com
auth
hashed-auth-token
Thu, 17 Feb 2022 12:48:46 GMT
/
https://chasearmstrong.com
Strict
hello
world
Thu, 17 Feb 2022 12:48:46 GMT
/
https://notchasearmstrong.com
None
john
doe
/
https://therealchasearmstrong.com
Lax