Cookies: what, why and how?
![Nik Vogrinec](/static/author-00d4aa9e1c71e9f6b7e762f38948ca5e.jpg)
Nik Vogrinec
30 August, 2020 ยท 5 minute read
![Cookies: what, why and how?](http://images.ctfassets.net/cs7850duayyb/01DgnbVXccL9eHBGmccsbm/351c4c19db249db45541e919b78c3a11/pexels-stockphotoshubcom-298485.jpg)
A cookie is a small piece of data sent from a server and stored on the browser. The browser may send cookies back to the server with later requests. Cookies are used to save stateful information for stateless HTTP.
This is an abstract definition of cookies, but let's dive deeper into what this statement actually means.
HTTP
In short, HTTP is a protocol that allows the fetching of resources. It is the foundation of data exchange over the internet. HTTP uses headers to send additional information with a request or response.
Requests are sent by User-agents (most commonly by browsers) to the server with one of the HTTP verbs (GET, POST, PUT, DELETE, ...).
Responses are what the server sends back to the User-agent, mostly containing HTML markup or JSON data.
Both requests and responses are built similarly, although they have some differences - that is for another blog. They both have headers that are sent every time, although they may differ based on request or response. A cookie is one of those headers.
I will talk about HTTP more extensively in my next blog, but for now, the only important thing for you to understand is that cookies are headers sent by the server to the client. The browser then saves cookies containing stateful data to send back to the server in every subsequent request.
Uses
HTTP is stateless meaning it saves no state on the server. So how does the server know if we are authenticated if there is no state? Well, with cookies of course!
Cookies are most commonly used for things such as:
Authentication (session management);
Personalization (user preferences);
Tracking (analyzing behavior for advertisements);
Creating cookies
For example, when you register on a website, you send a POST request to the server with your username, email, and password. The server will (after processing the data and confirming everything is OK) send back a response with the 'Set-cookie' header that will contain some information about the user. This information is just a random string of characters called tokens. Multiple cookies can also be sent!
Example:
Set-Cookie: user-token=abc123def456...
Using cookies
When the browser receives the cookies it then gets stored to the browser and sent back to the server with every subsequent request.
For example, when you want to access your profile page you send a GET request to the protected route on the server. The server then reads the cookie and checks if the cookie has been modified, if everything is good the server lets you access your user data, otherwise, if the data on the cookie is not valid or if there is no cookie at all (meaning you aren't logged in) it then denies access.
Example:
Cookie: user-token=abc123def456...
Security
Information on cookies is visible and can be changed by anyone. This is why servers implement checks to verify the data on the cookie is valid and has not been tampered with. You can check your cookies on every site you visit. If you're on chrome click the lock icon near the top of the window where the URL of the page is shown. You should see a dropdown containing the 'Cookies' tab.
Law regulations
You must've seen when you visit a site that uses cookies that annoying pop-up saying 'We use cookies, bla bla'. This is required by law. Websites can get into trouble if they do not implement this type of warnings.
Websites must also allow users to opt-out of receiving some or all cookies. This does limit the users experience on the website, however it is also required that the bulk of services are available to users without the use of cookies.
Well, this is it. Please note that this is a very basic principle. If you are interested in reading further visit Using HTTP cookies from MDN web docs. Where they go more in-depth on how cookie attributes, restrictions, prefixes, and much more.