Where to hide your cookie?

Have you ever wondered how you browsed for the best chocolate ice cream in your town and then, you ended up getting ads and recommendations about it on every single website? Alternatively, how does the browser know you’ve already logged in? If you don’t, then you should definitely learn about how the browser is able to do so.

Browsers are able to store and retrieve user data through various options. Website owners can preserve website content or documents for offline usage, store user preferences, apply states, and more. In this post, we are going to discuss mainly Local Storage, Session Storage, and Cookie.

Local Storage

You might have come across websites where you enter some text and a search box and next time when you visit that website, it still holds those values. Chances are that the website is using local storage to save all the texts that you have entered for future reference. Another example can be forms on a website. You will notice that the forms get auto-populated with your name, address, etc.

Local Storage is used to store data in your browser for future reference. JavaScript and HTML5 are the only ways to access local storage. When the browser is closed, the data is not destroyed, and it is available the next day, week, or year — until the website or the user deletes it. The user can, however, wipe the browser data/cache to clear all local storage data.

Pros:

• No expiration date is set for the data stored.
• The storage limit is approximately 5 MB.
• The data is sent to the server if required.

Cons:

• The plaintext is insecure by design and is limited to string data, necessitating serialisation.
• It can only be read on the client-side.
• Local Storage is accessible via JavaScript on the same domain. As a result, any JavaScript running on your site will have access to web storage, making it vulnerable to cross-site scripting (XSS) attacks.

Example:

// Write
localStorage.setItem(‘key’, ‘value’);
// Read
let data = localStorage.getItem(‘key’);
// Delete
localStorage.removeItem(‘key’);
// Delete all
localStorage.clear();

Session Storage

So you logged in to your email account today and forgot to logout. Tomorrow when you try to access your email account, you will notice that you are not required to login again. This is session storage in action for you. In a recent project TopDoc, we used session storage to store the credentials of logged-in users.

The read-only session storage field refers to the current origin’s session Storage object. Data is never transmitted to the server and can only be accessed on the client-side. When you open several tabs/windows with the same URL, session storage is created for each tab/window. We can write key-value pairs in session storage just like we can in local storage.

Pros:

• The storage limit is about 5–10 MB.
• The data is not persistent, meaning that it is only available for a single-window (or tab in browsers like Chrome and Firefox).
• Data is only available while the user is on the page. Changes made on the current page are kept and available for future visits to the site in the same tab/window. The data is destroyed after the tab/window is closed.

Cons:

• The data is only accessible within the window/tab where it was set.
• It follows the same-origin policy as local storage. As a result, data stored will only be accessible from the same source.

Example:

// Write
sessionStorage.setItem(‘key’, ‘value’);
// Read
let data = sessionStorage.getItem(‘key’);
// Delete
sessionStorage.removeItem(‘key’);
// Delete all
sessionStorage.clear();

Cookie

Remember the previous example where I was talking about chocolate ice cream? Yes, that is done by Cookie. No, not THE COOKIE YOU EAT. This is a browser cookie. Shopping sites also use cookies to track items users previously viewed, allowing the sites to suggest other goods they might like and keep items in shopping carts while they continue shopping.

If we look at the picture above, we can see that there is an ad popping up on the website. These kinds of ads are related to the browsing history we had in the past. And as we keep on browsing about various things on the internet, these ads get affected and change from time to time.

Cookies are text files containing small bits of information — such as a username or location — that are used to identify your computer when you connect to the internet. HTTP cookies are used to identify and improve your web browsing experience by allowing you to identify specific users. It is the legacy approach for storing data on the client machine. Before HTML5, this was the only option for web storage. Visitors to websites can benefit from cookies by making their experiences more personalised. Cookies are created on the server and sent to the client, and the data is exchanged each time a request is sent. The servers can use cookie data to deliver personalised content to visitors.

Pros:

• Cookies are primarily for server-side reading (can also be read on client-side), local storage and session storage can only be read on client-side.
• By setting the httpOnly flag to true for a cookie, it can be made secure. This stops the cookie from being accessed by the client. The document.cookie object from the browser window object can be used to update and set cookies.

Cons:

• Size must be less than 4 KB.
• Cookie vulnerabilities include cross-site request forgery (CSRF). CSRF attacks occur when a malicious website, email, or blog causes a user’s web browser to perform an unwanted action on a trusted site that the user is currently logged in to.

Example:

// Write
document.cookie = “key=value”;
// Read
let x = document.cookie;
// Update
document.cookie = “key=new value”;
// Delete — for deletion you should set expiration parameter to past date
document.cookie = “expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;”;

Apart from Local Storage, Session Storage, and Cookie, we have other options like Cache, WebSQL, IndexedDB, etc. But the three types of storage that we discussed in this blog are the most commonly used. And it is really vital for a software developer to know about these for developing your web application project. And if you do not like to read through long blogs like this one, I have summarised below all the key features of web storage.

So in a nutshell

Summary

It is vital to store user data in a secure environment. Any breach in security can leak vital and sensitive information about users to hackers. Hence it is really important to choose wisely among different data storage options depending on the sensitivity of the information and your use case.

Our team at StackMyBiz has worked on many web applications with various technologies. We are equipped with all the latest skills to escort you through the startup jungle. If you are looking for consultancy or application building, well, look no further. Connect with us!