A cookie is a simple and important feature in frontend engineering. In fact, without cookies, most web apps may not be able to identify you. For instance, your Gmail won’t remember you. You have to enter login and password again. If cookies are a must-have, why are websites asking for permission about cookie usage? Let’s find out below.
Some of the use cases are indispensable for a web application to work. For instance storing login information, user preferences, etc. We do not need permission for this stuff.
Using cookies for tracking and marketing purposes is a huge industry. Most websites on the internet are supported by ads and not subscriptions. This calls for cookie usage for tracking purposes to augment the revenue to run the business.
When cookies, tracking, data collections were caught, new rules were put. Based on your permission the tracking continues or discontinues in theory.
To understand this we need to know how a cookie is set. A cookie is sent and received by the browser through HTTP request headers. When an HTTP request contains a cookie header then the cookie gets set for that domain from where it loaded.
Before we get there we need to know about the 2 basic terminologies.
First party cookie - They are generated, set on the same domain. Dhbalaji. dev website sets a cookie to Dhbalaji. dev. In programming, anything “First” has certain enhanced features. In the first-party cookie, we can set and read the cookie from Dhbalaji. dev.
Third-party cookie - This cookie is generated from another website and set to that website through an intermediate site. For instance, I have 2 websites (one not working though) bookstoc.com & Dhbalaji. dev. I want to track if the user visiting Dhbalaji. dev is visiting bookstoc.com.
I would set a cookie to the bookstoc.com website from Dhbalaji. dev. In this case, the cookie can never be read from Dhbalaji. dev but it can be read from bookstoc.com. Based on cookie content I can be aware of user behavior.
Understanding that cookies are transported through HTTP request headers is an important concept. It’s not uncommon to find developers not knowing how cookies get transported on the internet.
User story: Given the business owner has 2 websites, when the visitors visit his first website A1 then the cookie needs to be set on another website A2
Analysis: Though setting a cookie on the same domain happens through
Solution: Load a 1px transparent pixel from the A2 website from A1. You need to add an image tag, since it’s a small image there will neither layout change nor performance issue. I do not recommend using hidden images, they are never loaded to DOM. When the image loads then the cookie is set to A2 from A1
It’s the browser on which the above user story needs to be tested. For instance, browsers can completely block cookies or some extensions can block third party cookies, etc. So 100% working solutions cannot be guaranteed.
I was not very curious about cookie content. Here is my guess. The cookie can have an encrypted code which the network of websites can decipher or share information.
For example, the ad networks can have cookie set of different websites which contain tracking information useful for serving ads.