All of us doing web development might have come across the term 'Cookie' once in our journey. In this post, we will try to understand what is cookie exactly and how we can use it in Javascript.

What is cookie?

Cookie is just a small string that can be created by the host server and sent to the client (browser). Client can also manipulate it and send it back in the next request.

• Server uses 'Set-cookie' in header to set the cookie
• Browser uses document.cookie to read it using javascript
• In the next request, browser automatically adds the cookie in the header

Reading Cookie

We can easily read cookie using the document.cookie object. It will return us all the key-value pairs.

Writing Cookie

In javascript, cookie object has built in set method to set the cookie. Cookie can not be so large, most of the browser supports only 4KB as the max size.

To write the cookie, we can simply use assignment operator:
document.cookie = 'key=value'

Note that it will append this new key/value pair to the cookie object and it will not overwrite it.

Cookie Options

Along with each key/value pair, we can pass some 'options' specific to that pair. We need to pass them as ';' separated strings.

Example:

document.cookie = 'user=admin;path=/;domain=myapp.com'

Some of the commonly used options are:

• path: It is the current page by default, but we can restrict the access to this cookie by setting any different webpage path
• domain: It is the domain in which this cookie is accessible.
• expire, max-age: These options will mark the cookie as expired.
• samesite: This option will prevent from XSRF attack.

What is XSRF Attack:

XSRF attack, aka Cross Site Request Forgery, is a common attack that uses cookie to perform Impersonation attack. Suppose we are using a site which uses cookie as the authentication method. Since cookies are sent in each request, if we login to our account and click on some third party link, if we do not use proper security, our login token will reach to the third party site which can be malicious.

To prevent this attack, most frameworks restrict to use XSRF token along with the forms. The samesite=strict option can also be useful to prevent such attacks. But there are better security mechanisms to prevent the XSRF attack nowadays.

Deleting a cookie:

We can not directly manipulate the cookie object due to its set methods. To delete a cookie, we can set the expire or max-age option to delete the cookie.

Example:

document.cookie = 'user=admin;max-age=-1'

Third Party cookie

You might have seen sites that use third party cookies. They ask for our consent before using the third party cookies. But what exactly is third party cookie?

A third party cookie is basically the browser's ability to send the cookie to third party sites. Browser has the ability to restrict it. But most of the sites use it to collect the data from users, generally to show ads.

For example, most of the sites use some third party services or functionality. They might request for some Javascript code while loading the page to use their services. Note that that request will consist of some cookie that is from that third party site. Next time we visit the third party site, this cookie will be sent along with our request. We can create many such scenarios here on how those 3rd party sites can use it to collect information on what kind of sites we are visiting and other stuff.

There is a regulatory in European countries that restrict the sites to use third party cookies without user's permission. This is known as GDPR and this is why sites need to take user's permission.

This is it in this post. We will try to see more storage types in next post.