Article content
Denis Kryukov
9 min read
HTTP cookies are an essential part of the modern web – when a user visits practically any website, they’re greeted with a cookie consent window. With the rise of cross-site tracking and ad networks, cookies became a concern for user privacy. Well, what role do they play in the user's web browser – and their browsing experience? How important are they for storing data? How are first- and third-party cookies different? How should web developers create them the right way? In this guide, we’re taking a closer look at the HTTP cookie and answering all of these questions.
What are HTTP Cookies?
An HTTP cookie is a small data packet that gets exchanged between the web browser (e.g. Mozilla Firefox) and the target web server (e.g. wikipedia.org.) This data is primarily used for managing website sessions, personalizing user experience, and tracking. The most popular term for this technology is “HTTP cookies”, but you may also hear people refer to them as “web cookies” , “internet cookies”, and “browser cookies”.
Upon opening the website for the first time, your browser creates a cookie file and stores it on your disk. Each HTTP cookie is used for storing data tied to the given session.
Let’s take a look at the cookie file itself – we can do this via your browser’s developer tools, which are typically accessible by pressing F12. In Google Chrome, for instance, you can then navigate to the Application tab (select it from the top menu) and open the Cookies submenu (select it from the list on the left.) This will show you a table containing all first- and third-party cookies that your browser acquired on the given website.
We can also see that each HTTP cookie has certain parameters like:
- Name: cookie name.
- Value: cookie value.
- Domain: target servers that can acquire the given cookie.
- Expires / Max-Age: the cookie's expiration date or max age attribute.
- Size: The cookie's size, in bytes.
- And more.
Why is an HTTP cookie called that? The cookie technology’s name is tied to the cookie-the-baked-treat, so designers always add icons of these snacks to cookie consent pop-ups. Here’s the explanation: Fortune cookies (those with messages on a paper inside them) inspired the Unix term magic cookies, which denoted a small piece of data exchanged between computer programs.
What Are HTTP Cookies Used For?
Modern web applications are vastly different from their Web 1.0 counterparts – they’re interactive and dynamic, making up the fun factor of using them: Shopping gets quicker, logging in gets easier, and major tech platforms like Google get uncannily adept at targeting ads at you.
Personalizing user experience
While old(er) static websites stay the same day in, day out, each HTTP cookie helps create the illusion of modern websites “getting to know you”, showing you relevant content the more you browse them. Websites typically provide specialized menus for customizing their appearance and functionality: For instance, Twitter lets the user choose the web page’s color scheme – and saves this data in the cookie file, which can be accessed by the browser on the next visit.
Managing sessions
The HTTP cookie’s original goal was realizing the concept of an online shopping cart – a simple website feature that was previously impossible without a way to exchange data between the browser and the web server. Nowadays, the server exchanges session identifier cookies with the user each time the latter makes a request, while the server stores all users’ shopping cart data in its database. This way, it can use an HTTP cookie with a session identifier to display the correct shopping cart.
Identifiers also help with session management and logins: Upon opening a login window, the browser receives a HTTP cookie with a unique user's session identifier. If the user manages to log in, the server will then associate the user session with the given HTTP cookie.
Tracking the user
The same site identifiers could be used to monitor the user's browsing history across multiple sites – and so tracking was born: In most cases, these are third-party cookies which don’t generate value for the end-user (via website personalization or session management) and simply track them instead.
While tracking cookies aren’t “evil” per se, they’re prone to serious misuse when the advertiser wants to earn even more money. For example, tracking cookies can be exploited to analyze customer behavior at scale: An experiment by the Wall Street Journal showed that, upon visiting 50 most popular websites in the US (Google, YouTube, Facebook, Amazon, Yahoo, etc.), you would have 3,180 third-party cookies on your device. These tracking cookies, working actively on millions of devices, create powerful ad networks – and even force government regulators to step in (e.g. the EU.)
Cookie Types
Different HTTP cookies serve different purposes and vary by different parameters: The most obvious difference, for instance, is functionality of first- and third-party cookies. Let’s explore each type:
First-Party Cookies
A first-party cookie, as the name implies, comes from a first party: In case of web browsing, these cookies are sent by the website/domain itself. First-party cookies are important for performance as websites often rely on them to provide:
- Automatic login via a username/password combination,
- Website preferences,
- Visited links (shown in purple),
- Saved settings,
- Shopping cart items,
- And more.
Third-Party Cookies
Conversely, third-party cookies come from third party websites: For example, visiting a domain abc.com may create cookie files from the domain xyz.com. Third-party cookies aren’t usually related to website functionality; instead, they collect users’ unique identifiers to enable tracking them en masse.
Moreover, third-party cookies may remain on the user’s device even after it reboots or shuts down, which allows advertisers to monitor the user’s activity on other websites. For example, they can show a product ad and later use third-party cookies to check if the user purchased it.
Session Cookies
The main quality of session cookies is their short lifespan (i.e. expiration date), which is reflected in their alternative names: transient / non-persistent / temporary cookies. User receives them upon opening a website; when the user closes the website tab, session cookies expire. Here’s another important distinction: Session cookie data is stored in temporary memory – and not on the device's drive.
Secure Cookies
In an earlier screenshot, you may have noticed that an HTTP cookie may have the Secure attribute. If set to True, the HTTP request containing the cookie will use a secure protocol (e.g. HTTPS) for exchanging data. This way, secure cookies have a way of protecting the confidentiality of their data.
However, security mechanisms of an HTTP cookie can be bypassed via network threats, end system threats, cross site request forgery, and cookie harvesting, which would allow the attacker to intercept data like login details and session identifiers. For this reason, some web browser programmers advise to avoid transmitting sensitive data via cookies.
Zombie Cookies
As the name suggests, zombie cookies come back to life after deletion: While a regular HTTP cookie is engineered to respect the user’s privacy, its zombie counterpart ignores all restrictions: In addition to “respawning”, it can be saved in several locations, preventing the user from controlling their web data properly. Notably, third-party cookies often use the “zombie” mechanic to boost their efficiency.
Many privacy-conscious users decline web cookies or delete them on a regular basis. This is a concern for ad networks, which use tracking cookies to monitor the user’s behavior across different services. A zombie HTTP cookie is an effective, if morally dubious, solution to this problem: They enable web traffic monitoring across different websites via obtaining the user’s unique IDs meant for other websites. Moreover, they may ignore the confinements of a single user's browser and track them across their entire device.
These shady practices are largely to blame for the criticism targeting the HTTP cookie as a whole, resulting in a number of pro-privacy regulations like the EU cookie law (also known as the ePrivacy Directive), GDPR, and more.
How to Create HTTP Cookies
To better understand how HTTP cookies work under the hood, we can create them manually: One option involves using a web browser; the alternative is using a web server to send cookie headers.
Client-side
For this method, we’ll need the document.cookie property and any web browser – for instance, Google Chrome. Let’s open Chrome’s Developer Tools (F12), navigate to the Console tab, and type:
document.cookie="testcookie=1"Let’s check if our test HTTP cookie has been added correctly. In the Application menu tab, select the Cookies menu on the left. Let’s look for our test cookie in the list:
Here it is! We successfully created an HTTP cookie.
Web server-side
Creating HTTP cookies on the backend is a more common option, rich with different approaches towards this task: JavaScript or Python, backend code itself or a web server like Nginx, etc. In any case, the backend sets cookies in the HTTP response and then sends the data to the user.
We can start with a simple HTML script:
<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-compatible" content ="ie=edge">
<title>Document</title>
</head>
<body>
<button id = 'btnCreateCookie'>Create Cookie </button>
<script>
const btnCreateCookie = document.getElementbyID("btnCreateCookie")
btnCreateCookie.addEventLister("click", e=> document.cookie = "example-3")
</script>
</body>
</html>We can then use Node.js to return the HTML script via an index.js app:
const app = require("express")()
app.get("/", (req, res) => {
res.sendFile(`${__dirname}/index.html`)
})
app.listen(8080, ()=>console.log("listening on port8080"))Upon running the script, you can create an HTTP cookie by pressing a button. If you don’t want to type JavaScript code manually, you can input an array of HTTP cookies:
const app = require("express")()
app.get("/", (req, res) => {
res.setHeader("set-cookie", ["setfromserver=1"])
res.sendFile(`${__dirname}/index.html`)
})
app.listen(8080, ()=>console.log("listening on port8080"))Conclusion
Even though HTTP cookies have been at the center of controversy in recent years, they’re still an integral part of the modern web: Without them, navigating websites would take much more time – and web development would be restricted in terms of website functionality. Creating and managing an HTTP cookie correctly is important for data collection and similar tasks – and we hope this guide helped you understand this topic better.
Frequently Asked Questions
An HTTP cookie has three primary uses:
- Session management: Recognize existing users’ login credential and preferences,
- Personalization: Offer different experience, content, and ads to different users, and
- Tracking: Show relevant ads based on the user’s preferences and browsing.
An HTTP cookie can be either a session cookie or a persistent one: The former enables website navigation and gets removed once the session is over; the latter is used for authentication and tracking – and it may remain on your device forever.
HttpOnly is an attribute that disallows client-side scripts to read data. This way, only the server can access cookie data, which makes cookie usage more secure and prevents malicious client-side scripts. To add the HttpOnly tag to the HTTP cookie, append [; HttpOnly] like this:
Set-Cookie: `=“[; “=“]` `[; expires=“][; domain=“]` `[; path=“][; secure][; HttpOnly]`
- The server sets a cookie field via sending
Set-Cookie:name=valuein its HTTP header. - If a set already exists, it sends this instead:
Cookie:name=value.
An HTTP cookie ensures important functionality of web browsers: session management, personalization, and more. If you want the website to work correctly, it’s preferable to accept the functionality cookies at least. If you’re worried about tracking, however, you can reject cookies – modern websites usually allow you to do this.
Different browsers store HTTP cookies differently: Google Chrome uses the
Cookies file in the \AppData\Local\Google\Chrome\User Data\Default folder; Mozilla Firefox stores them in cookies.sqlite located in \AppData\Roaming\Mozilla\Firefox\Profiles.
