Web cookies - beginner's guide

#javascript #webdev #react #tutorial

Most of the websites we visit nowadays show a pop-up letting us know they use cookies. Sometimes we can click a Reject/ Reject All button and continue to use the website, but most of the time we have to accept at least some cookies to be able to read any of the content on the web page.

So what exactly are these cookies and why are they almost everywhere?

In technical terms, cookies (also called web cookies or HTTP cookies) are just blocks of data stored on our computers/ tablets/ phones, while we are browsing the web. They can store important information, like the time when we visited a website, the language we selected, what items we added to on online shopping cart or even what links we visited on a website. Cookies can be used for things ranging from identifying unique and returning visitors of a website, to building profiles of the visitors (tracking their online moves) so advertisers can target them with ever more personalized content. Their main purpose is to make the user's experience faster, convenient and personalised.

How do these cookies get on our devices?

When we try to access a website, we are sending a request to a server (namely the server on which the files related to that website are stored). The server sends back a response (in simple terms, the page we wish to view) and, if configured to do so, it also sends one or multiple cookies, together with the response. The cookies will then be stored in the browser, in a dedicated folder, in the form of a small file (depending on the browser, each cookie is stored in a separate file or all cookies are stored in the same file).

This is how the cookies pane looks like in Chrome and as you can see, inside the pane I have two cookies stored for dev.to

Next time we visit the same website, the browser will send a request and the cookies belonging to that website. The server will then read the cookie and see it's us visiting the website again. If you saved some preferences on your previous visit, the page will be displayed with those prefences already enabled (the language for example). This will save us a trip to the server, since we don't need to set any of those preferences again. Only the website that created and saved information in a cookie can read that particular cookie.

Based on their lifetime and their purpose, we have different types of cookies:

Session cookies - they get deleted after the browser gets closed. These are commonly used on e-commerce websites and they help websites recognise users while they navigate from one page to another.
Persistent cookies (the developer explicitely defines when the cookies will expire) - they remain stored even after the browser is closed and they can remember login details and passwords so users don't need to re-enter them every time they return to the website.
First-party cookies - they are directly set by the website we are visiting. They mostly collect analytics data or remember theme and language settings, providing a seamless user experience.
Third-party cookies (also called tracking cookies) - they are created by domains that are not the website (or domain) that we are currently visiting. They track, record and analyze a user's behaviour and are commonly used by advertisers who want to ensure that products and services are marketed towards the right target audience.
Super cookies - they are not really cookies and they are injected at the network level as Unique Identifier Headers (UIDH) by the internet service provider (ISP) to collect data about a user's internet browsing history and habits. They can't be deleted like regular cookies and the user can only opt-out if their ISP allows them to.
Zombie cookies - they are automatically re-created after a user has deleted them. They are hard to manage and remove. They can be used to install malicious software onto a user's device or to track their activity across browsers on the same machine.

Just like local and session storage, cookies can be cleared. This way websites won't remember how many times you visited them or what links you clicked on. This will also mean that you need to re-type your login credentials every times you visit a page or that the ads you're going to see will be less relevant to you.

THINGS TO REMEMBER

You shouldn't use cookies to store sensitive data. If you can't avoid it, try to use session cookies whenever possible or set a strict expiration policy (the more sensitive the data, the shorter the lifespan of a cookie should be).
You should only send cookies over encrypted connections, since they are susceptible to eavesdropping attacks.
Even though session cookies get deleted after the session ends, some browsers use session restoring when restarting, so this way a cookie can last indefinitely.

This topic is of course more complex than this. There are many resources on the subject out there and one of my favorites is MDN.

Image source: SJ on Unsplash