Does HTML5 web storage (localStorage) offer a security advantage over cookies?

Question

I was looking up alternative to cookies and I've read about HTML5 web storage here, and I've read a simpler explanation here but I still don't get how it works fully. Can someone offer a slightly non-techinical explanation so that I can then understand the technical bits. It says about browsers having to store key value pairs but where and how is it stored and why is it inaccessible to other sites? Why isn't it considered just an other form of cookies?

1. I'm looking for a thorough and complete alternative to cookies; as in if my organisation wants to replace all it's websites from using cookies to say an alternative for say web-storage then can we easily say 'Yes' to that requirement? Let's assume only the latest browsers are used.

2. How and in what ways does web-storage enhance security when compared to cookies? Does it have potential to compromise security in other ways? Is there someone with any real life experiences who can share the pros and cons?

Answer 1

The differences between localStorage and cookies

Both cookies and localStorage are protected from access by unrelated domains by the Same Origin Policy.

The difference is that localStorage is only accessible through JavaScript, whilst cookies are accessible through JavaScript¹ and sent with each HTTP request.

There isn't much of a security benefit of using localStorage as opposed to cookies. The difference between the two is because the goal is different: localStorage can be used for things you'll only use in JavaScript, whilst cookies can be used for storing things you need on the server (as well).

Both can be accessed by anyone that has access to the browser of a user's computer and both localStorage and cookies can be accessed by JavaScript that is executed on the web page. (For the latter, see the exception below.)

You can see this if you enter localStorage or document.cookie in the browser console.

1. You can set the HTTPOnly flag on a cookie so it isn't accessible through JavaScript.

How to use localStorage

Since there is already a lot of information available on using localStorage, I will just refer to two web sites documenting it:

• DOM Storage at the Mozilla Developer Network
• Local Storage at Dive Into HTML5

How the data is stored

How the data is stored differs per browser. Below, I give information on how Mozilla Firefox stores cookies and local storage.

Note: instructions on how to find your Firefox profile are available in this article at Mozilla Support.

Cookies

Firefox stores your cookies in your profile folder in a file named cookies.sqlite. This is a SQLite database. Opening the file using SQLiteStudio shows that the database contains one table, moz_cookies.

Table structure

The table is structured as follows:

Table contents

Here is a part of the contents of my cookies.sqlite database:

LocalStorage

Firefox stores your localStorage data in your profile folder in a file named webappsstore.sqlite. This is a SQLite database. Opening the file using SQLiteStudio shows that the database contains one table, webappsstore2.

Table structure

The table is structured as follows:

Structure of the column contents:

• scope:
  • <the domain name in reverse>:<the protocol>:<the port number>
• KEY:
  • The name name of the stored value.
• value
  • The stored value
• secure
  • This column isn't used.
• owner
  • This column isn't used.

Table contents

Here is a part of the contents of my webappsstore.sqlite database:

This is the same as the data that I get when I type localStorage in the console at the web page https://login.persona.org.

Conclusion

As you can see, data from both cookies and local storage is stored by the browser in the same way. If you are concerned about the safety of data that is being stored at the user's computer, localStorage offers no security benefit over cookies.

In fact, it may even be a greater risk, because you can set cookies to expire after a certain time, whilst localStorage won't expire. Thus, data saved in localStorage may remain at the user's computer for longer than if you would have if you had used cookies.

(If, however, you only need to store data for the duration of a single session, you can use sessionStorage instead of localStorage.)

Answer 2

It sounds like you're looking at formulating a company-wide policy with respect to use of cookies in web application development.

As such, for a company-wide policy, be careful to consider not only your typical type webapp where server produces HTML+JavaScript, but also any potential web APIs that company web applications may be publishing. Such web APIs may be for AJAX purposes, but also may be for consumption by other type clients, for example B2B type data feeds, that may rely on some form of persistence on the consumer end. For example a "browser" like Twilio only understands TwiML, as opposed to HTML+JS, and local storage is not applicable there. And if webapp that interfaces with Twilio relies on persistent storage, local storage is not an option (whereas cookies are).

This is not to say that such applications, if such exist or will exist in your organization, cannot be (re-)designed to avoid need for client-side persistence. This is to say that local storage may not necessarily always be available in all contexts to provide alternative to cookies.

Otherwise, user2428118's answer nicely contrasts the two technologies.