When I started studying about web applications, one of the topics where I spent a hell lot of time was cookies. Once you clearly understand the concept of cookies, I think you are done learning 50% of the basic web application concepts. Yes I said it, because it deals with lot of stuffs like session management which is the basic building block of a web application.

What are cookies?

While browsing through various web applications you might have seen this message asking you to set cookies in your browser. Most of us won’t read it and simply click “I agree”. But have you ever thought why websites like facebook.com wants to store cookies in your browser? HTTP is a stateless protocol. Which means If you make two consecutive requests to a particular web application, http can’t understand the previous request was actually sent by you. Some of you might not understand what is actually meant by stateless protocol. I will explain it in a bit more simple terms.

Imagine that you are logged into Facebook. Now you are going to your friend’s (let’s call him Jacob) profile and then sending a message to him. Here HTTP will see basically two requests only. The first request, clicking on your friends profile. Second, you are sending a message. HTTP cannot understand whether these two requests are sent by the same person or different persons. It knows that someone has requested Jacob’s profile and someone is sending Jacob a message. So basically HTTP will be confused by who is the actual sender of the message. But it properly delivers the message into Jacob’s inbox and tell Jacob that you have sent him a message. So there must be an alternate mechanism that tells HTTP that the message is actually sent by you, right? It is cookies who does this job. And let’s name the job as session management.

How cookies manage sessions?

When you’re logging into Facebook you will be typing your username and password and click the submit button. Immediately your browser will send this information to Facebook server. The server will have a lot of code and a database of all users which contains the username and password. When the server receives this username and password, the code will validate this combination with the data in the database. Once the server understands that the username and password are valid, it will send a response back to the browser saying that the request was ok. When sending this it will also send a key value pair and tell the browser to store it.This key-value pair is called a cookie. The server will also store this value in its database.

Thereafter whenever you send a request to Facebook this cookie will be appended along with the request. The value of your cookie will be unique to you. When Facebook receives this request it will check the cookie and match its value with the value in the database. So that Facebook will start thinking: “ Oh yeah, he has the cookie that I have given him. Well, I can trust him now”. So it can serve you with whatever thing you have requested. If you don’t have the cookie with you, then Facebook will immediately redirect you to the login page.

This cookie will live in your browser until you logout from Facebook. HTTP will be getting thousands of such requests to Facebook. And it can specifically identify you by looking at the cookie value. The time interval between your login and logout is called a session and it is completely controlled by cookie. That is the very basic and I hope it is clear.

What are the contents of a cookie?

Okay, so now you know what is the basic purpose of a cookie. Not now let’s inspect a cookie and understand its metadata. Let us use the New York Times website as an example. To view the cookies of NY Times press F12 so that the web developer toolbar will be fired up. Move ahead to the application tab and there you can see the cookies.

Attributes of a Cookie

Let’s try to understand each of its attributes.

Name & Value

Name : It is just a name and it doesn’t hold any sensitive information. But by looking at the cookie name , sometimes we can gather several other information. For example, when you see a cookie named PHPSESSID for a website, it is easy for us to guess that the application is built using PHP.

Value: This is the most important attribute of a cookie. We will experiment with the value of the cookies later but for now just understand that it is the core content of the cookie.

Other attributes

Domain: This attribute defines which all domains are allowed to access the cookie. in the image shown above consider the cookies ext_name & nyt-a. ext_name is accessible to www.nytimes.com only but nyt-a can be accessed by any subdomains of nytimes.com. I.e., if you load https://cooking.nytimes.com/ in a new tab, it will not have access to ext_name. But it can access nyt-a and it’s value.

Path: Path attribute defines what part of the application is allowed to access the cookie. In our example it is set as / which means any page of the application is allowed to access the cookie. Sometimes this attribute will be set as /admin/. In that case any page following admin will only have access to that cookie. For example, www.example.com/admin/ user can access the cookie but www.example.com/ blog/ can’t.

which Expires/Max-Age: This attribute defines the lifetime of the cookie. It shows the date and time of cookie expiry. Once the ex expiry time is passed, the server will no longer be able to validate the cookie value. This can be explained with Facebook session.if you didn’t log out from Facebook, you will be able to use Facebook without again logging into the application the very next day.But you might have also noticed that, if you didn’t use Facebook for few days then you will get automatically logged out from Facebook and you need to login again.It is because your cookies have got expired and Facebook was not able to validate your old cookie.

Size: Size is the total character length of the cookie. It is the sum of character lengths of name and value. Have a look at the cookie named vistory. The character length of vistory is 7 and it’s value is a00, that counts to three. So total 7 + 3 equals 10.

Security specific attributes

HTTP: HTTP or HttpOnly flag is used to protect the cookie from hackers. It is a Boolean value which means it can have either true or false. If it is set as true, then it is believed that the attackers cannot steal your cookie by attacks such as xss. if you didn’t understand this, don’t worry just keep reading.

Secure: This is a again a Boolean value. When secure is set as true the cookie will only be transmitted if there is an https connection. You might know that HTTP is plain text protocol, which means anyone who is wire-tapping the communication between you and the server will be able to see everything that is being sent through the wire. If the connection is HTTPS, then the attacker will see only encrypted data.

SameSite: This is a relatively new flag introduced back in 2016. Chrome and Firefox started support for this flag from their latest versions only. So, if you are using an older version of the any of these browsers, then you might not see this flag. At, the time of writing this blog IE, Edge and Safari doesn’t support this flag. But they may do it in future. To understand the use of this flag you first need to understand CSRF attack. I am not going into its details, but for now understand that this flag can have two values namely lax and strict .

Those who are trying to understand cookies for the first time might not understand the security specific flags. Explaining it deeply will confuse you even more. Moreover, you don’t need to learn in depth about these flags to understand the basic concept. I will write an article about these 3 flags soon in detail.

Let’s go practical

Enough theories! Let’s go ahead and bite some cookies. For the demo purpose let’s use the website http://demo.horde.org. Before you click submit let’s install an extension to our browser which can view and edit Cookies. If you are using Chrome browser you can use Edit This Cookie and if you are of Firefox you can install Cookie Editor. I will be using Chrome for the Demo.

Open a new tab and press F12, so that web developer toolbar will show up. Move on to the Applications tab and click open the Cookies from the left sidebar of the tool window. The window will show empty because we haven’t loaded any website yet. Now paste http://demo.horde.org into the url bar, hit Enter and watch the cookies showing up.

Let’s concentrate on the value of each cookie. This website has a login form. You can use demo/demo as username and password and Choose English as language and hit Enter. Now that we have logged in. Have a look at the cookie tab again. The value of HordeDemo is changed.

What happened here? Once the login was success, the horde.org server send this new value of cookie to us. This will be stored in the browser as such unless you logout from the application. You can try logging out from the application if you want to see it yourselves. Anyway, now I am logged in the application. I have a dashboard. I can click on any links, use the application as I wish. Whatever I do, the value of HordeDemo will remain unchanged. Because that is the only identifier that the web server can use to differentiate me from other users. What will happen if I edit the value of that cookie?

Editing a cookie

Let’s go ahead and do that. You have installed the EditThisCookie extension right? You can see its icon on Chrome’s toolbar. Move on to the http://demo.horde.org and fire up the extension. You can see all the cookies of this website there. (When you click the extension button make sure that you are not in this website. Then you will only be able to see the cookies of https://wst.space. )

Choose HordeDemo cookie and edit the value to anything you like. And then click the Green tick icon at the bottom to save the changes. So, we have changed the value of the cookie. Let’s try to browse the application now. No wonder 🙂 You got logged out. You know why this happened, don’t you? Yes, demo.horde.org couldn’t verify the value of HordeDemo that you have sent. Because, the server has a different value stored in its database. So it cannot verify your identity and it will ask you to login again. Quite obvious!

So far, we have learned only one type of cookie, that is the Session Cookie. There are several other uses for cookies. For example, if you have searched for branded Nike shoes from amazon.com, the very next day when you read some online newspaper you will be served with an advertisement saying that the Nike shoe is now available at a reduced price. How does this happen? It is also cookie activity. I will discuss that deeply in the next part of this series.