Everyone is watching what you do online. How user tracking with cookies works
Tags: security, privacy, webdev
Published: 2018-07-16 18:20:18

---
title: Everyone is watching what you do online. How user tracking with cookies works
published: true
description: Have you ever wondered how after you visit a website you start seeing ads about that website everywhere. This post explains how user tracking enables it.
tags: security, privacy, webdev
canonical_url: https://www.blinkingcaret.com/2018/06/13/everyone-is-watching-what-you-do-online-how-user-tracking-with-cookies-works/
---

Have you ever visited a website to check out something you want to buy only to be inundated with ads for that product in other websites?

I've been asked about this enough times that I thought it would be a good exercise to try and explain how this works.

This blog post is an explanation of how websites that seem totally unrelated to each other seem to know about what you are doing online.

![cookie trail of crumbles](https://www.blinkingcaret.com/wp-content/uploads/2018/06/cookie-trail-of-crumbes.jpg)

## It all starts with the Cookie

Before we describe what a cookie is (in the context of the web), let's start by describing why they are needed.

The web is mostly a disconnected system. That's an odd thing to say when the web is almost synonymous with being connected. What disconnected means in this context is that when you use your browser to open visit website, the browser connects to the server that hosts that website, gets the web page and disconnects. The web server only knows about you for that very brief period.

This is what allows one website to potentially serve millions of requests. It doesn't need to hold information about you in memory for very long.

Well, if that's the case how come we have websites that **do** "remember" us, where we can login and see data that is ours?

That's where cookies come in. A cookie is information stored in **your** computer about the website you visited.

When you visit a website your browser sends a HTTP request to a web server that is listening at the address of that website. The web server sends back an HTTP response with the contents of the website (HTML) and some "headers". A header is just a key value pair (for example: `Server: TheServerName`).

There's a header named `Set-Cookie` which when present in an HTTP response will make your browser create a cookie for the website you are visiting. It's actually a little bit more complex than this. The cookie is tied to the domain of the website, but for this discussion it's ok if you think that a cookie belongs to one website.

Also, a cookie is just a text file saved on your computer.

Here's an example of a `Set-Cookie` header from a response to `myawesomewebsite.com`:

    Set-Cookie: the_cookie_name=the_cookie_value; path=/; expires=Tue, 06 Jun 2028 21:50:30 GMT; domain=.myawesomewebsite.com

After this response, every time you visit `myawesomewebsite.com` until 06 June 2028 your browser will send a `Cookie` header in the request like this:

    Cookie: the_cookie_name=the_cookie_value

The easiest example to imagine of a website using this is a website that allows its users to pick a background color. In the response to the request to change the background color the web server will add a header like this: `Set-Cookie: background_color=blue ...`.

Now every time you go to that website your browser will "tell" the website that you want the background to be blue, and the way it will do this is by including the `Cookie` header in the request: `Cookie: background_color=blue`. 

The mechanism that allows you to log in to a website is very similar to this. When you visit a login page and enter the correct username and password the web server will send back a response with a `Set-Cookie` header whose contents will allow the web server to find your data. The value of this cookie is usually encrypted so that only the server can create it, and also only the server will be able to read it. This way a user can't just change the value and potentially sign in as another person.

## Tracking users with cookies

I'm sure you've seen messages similar to this: "We use cookies to improve your experience on our site and to show you _relevant advertising_".

The way that cookies can be used to "show you relevant advertising" hinges on how they are treated by the browser. Every time your browser makes a request to a website for which it has a cookie, it will send that cookie.

Also, when the request originates form a website that is different from the website the cookie is for, the browser will add a header named `Referer` (yes, it's misspelled, but that's the way it is in the [spec](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer) so we have to live with it). That header will contain the URL from the website from where the request originated.

This is simpler to understand with an example. Say you go to Wikipedia to read about the World Cup. While doing that you find something interesting in the references section that you want to explore. For example a page about the 2018 qualification that is hosted in another website that you have visited before (e.g. sofascore.com). 

When you click on the link to sofascore.com your browser will add the `Cookie` header to the request for `sofascore.com` and it will also add a `Referer` header with the url from Wikipedia, for example: `Referer: https://en.wikipedia.org/wiki/2018_FIFA_World_Cup`.

How can this be exploited?

For simplicity imagine that the original website you've visited is named _tracker_. Now imagine _tracker_ set a cookie for you with a value that is unique (will act as an identifier) and has a very long expiration date. Also, _tracker_ has an agreement  with loads of other websites, and those websites host a 1x1 pixel transparent image **from** _tracker_.

Each time you visit one of those websites your browser will make a request to _tracker_ for the transparent image and send the cookie with your _identifier_ and with the _referer_ header. This way, not only does the _tracker_ know who you are, it also knows which websites you are visiting.

The _tracker_ can then sell your info to other websites that then can choose what they want to do with it. Mainly show you ads related to things they think you are interested in. It's as simple as that.

Also, this technique is known as [web beacon](https://en.wikipedia.org/wiki/Web_beacon) and it's one of the most simple techniques. There are [much more elaborate versions](https://en.wikipedia.org/wiki/Evercookie) that will use a combination of features to "tag" you even if you delete your browser cookies.

In case you are wondering why a cookie is called a cookie maybe it's because it's like a fortune cookie? It has a message inside. I actually don't know, but if you do please leave a comment.