Mysteries of the Cookie Explained
Tags: cookies, learn, beginners
Published: 2020-10-09 12:56:28

If you're in the world of web development, you've no doubt encountered the word cookies. They seem to do their magic behind the scenes, but aid your web experience in subtle and seemingly mysterious ways.

Other terms that often get confused for cookies are sessionStorage and localStorage. In the end, they are all storage mechanisms on the client's side. [There is a handy guide to understanding the difference between the powers of the three (including when each is initiated and destroyed) included here](https://github.com/yangshun/front-end-interview-handbook/blob/master/contents/en/html-questions.md#describe-the-difference-between-a-cookie-sessionstorage-and-localstorage):

![Differences between a cookie, sessionStorage and localStorage](https://dev-to-uploads.s3.amazonaws.com/i/4ibfcov7x388qov4ry57.png)

### Intro to Cookies 

Cookies are bits of information that travel from the browser to the server. The best way to remember what they are is to picture a fortune cookie, which is actually where the term derived from. Fortune cookies are cookies delivered with an embedded message, much like internet cookies.

When I say "bits of information", it's always in the form of a text file. This could be a username or password that is used to recognize your computer as you are connected to a network. Specific cookies known as HTTP cookies are used to identify a user accordingly and improve their browsing experience. As soon as you establish a connection to a server, it creates a cookie with a label of a unique ID for your computer. The server can read this ID, and from it know what information to particularly serve to you.

The original term was actually magic cookies. ✨ Back before the internet was as widespread as it is now, these magic cookies were commonly used for just logging into your computer securely. Nowadays with several areas for privacy leaks amongst the countless transactions of information we make today, the magic cookies were renamed to HTTP cookies or internet cookies (one in the same) and adapted specifically for browsers to track and store information regarding a session (the time spent on a site).

### Power of Cookies

Don't need to sign in to your Amazon account every time you close the page? Added items to your cart that persisted even after closing Chrome? Advertisements targeted a little too freakishly similar to your recent Google search history? You can thank cookies for that. Although not all cookies are the same. Some come with greater powers than others, as they handle privacy of different levels. 

The different types of HTTP cookies include:
1. **Session** = (Stored in RAM and deleted upon the end of a session) these cookies are great for information pertaining to your interactions with the website, like remembering the items in your shopping cart 
2. **Persistent** = (Stored in the hard drive and remain there indefinitely) these cookies handle more secure information like authentication or tracking what items you've viewed
3. **First-party** = Created by the website itself, they might want to watch for any patterns in your shopping behavior when you go from one item to another, or choose to purchase one item from a "suggested for you" list but not another  
4. **Third-party** = Created by websites that you might not even be on at the time. An advertisement on a website can generate a cookie from wherever that ad is derived from. This can get quite suspicious. You can have 15 cookies generated on a website with 15 advertisements, all watching for what you do on the site
5. **Zombie** = Likely the most evil of the bunch, these are third-party cookies that are *permanently* installed on your computer, often without your consent

On Chrome, you can see the cookies a site is establishing by clicking on the 🔒 icon next to the url:

![Click on lock to show cookies](https://dev-to-uploads.s3.amazonaws.com/i/qwi1nk1i6twyc06ogszp.png)

Click on Cookies, and view the content of a single one: 
![View all cookies and their data](https://dev-to-uploads.s3.amazonaws.com/i/zqchhefv8j7zlpmeogbp.png)

Some of your most commonly visited sites may shock you with how many cookies they are using. Try it out!

### Security
Wait a minute, these cookies are just happily exchanging private information about us? That sounds helpful, but couldn't someone try to steal a cookie? Compromise information about us or manipulate us in subtle ways to sell more of their products?

Yes.

😳

Cookies on their own are not harmful - in fact without them our internet experience would be quite annoying with having to constantly verify our identity. However, to what degree should we be allowing third-party and zombie cookies to infest a user's computer? Should we be giving the user more authority over who tracks them and to what degree? These questions are all amongst a larger debate between the developers of the web of whether we are doing all we can to protect the user. 

A silver lining is that you do have some control over all of this, you can choose to disable or block cookies from tracking your experience. According to [Cookibot](https://www.cookiebot.com/en/gdpr-cookies/) GDPR is seeking to do exactly this as well as ensure the security of the user in many other ways:

> *Under the GDPR, cookies that are not strictly necessary for the basic function of your website must only be activated after your end-users have given their explicit consent to the specific purpose of their operation and collection of personal data.*

Unfortunately many websites rely on cookies to tailor their service to how the user might best enjoy it, so the site might not feel the same afterwards. But it's worth going to the cookies manager that many modern browsers now have (which I showed Chrome's version of above) on some of your most browsed websites. Take the time to see what cookies they add to your experience - which ones you do or don't recognize. 

The fear of security around cookies might grow when you realize [just how easy it is to create and read cookies in JavaScript](https://www.w3schools.com/js/js_cookies.asp) and with [go-to packages for React](https://www.npmjs.com/package/react-cookie).

Cookies truly make a web experience the fun, personalized environment it can be, but the potential for exploitation is not to be ignored. In recent years, especially with the launch of GDPR, techies all around are speaking out in favor of building an internet that doesn't need to frighten the user into watching their back.

🍪 Yum.

---

Cover photo from [Internet Cookies](https://www.internetcookies.org/)