Jump to content
Aerosol

HTML5 Security: Local Storage

Recommended Posts

In a previous article of mine, I discussed Cross Domain Messaging in HTML5. This article walks you through another feature, called local storage, and its security.

Local Storage

Local storage is one of the new features added in HTML5. It was first introduced in Mozilla 1.5 and eventually embraced by the HTML5 specification.

We can use the local storage feature in HTML5 by using the JavaScript objects localStorage and sessionStorage. These objects allow us to store, retrieve and delete data based on name value pairs.

The data processed using the localStorage object persists through browser shutdowns, while data created using the sessionStorage object will be cleared after the current browsing session.

One important point to note is, this storage is origin-specific. This means that a site from a different origin cannot access the data stored in an application’s local database.

Let me make it clear with a simple example. Below is a sample HTML5 application, which is capable of storing data using the local storage feature. We can also retrieve the data stored in the database using the “Show Data” button.

Let us first observe the origin of this site.

Let us assume that this is “Application A”.

http://localhost:8383/

So here are the details:

Name: Application A

Origin: http://localhost:8383/

Let us click the Show Data button.

042415_1052_HTML5Securi1.png

We are able to access the data stored by this application in the database. That is expected.

Now, let us try to access this data stored by application A from a different origin.

Let us assume that this is Application B

Here are the details:

Name: Application B

Origin: http://localhost/

Please note that the port number is different from Application A.

Let us click the “Show Data” button.

042415_1052_HTML5Securi2.png

When I clicked “Show Data”, there seems to be nothing displayed on the web page. This is because this application is running on a different origin.

Just to confirm, let us run a different application named “Application C” from the same origin as “Application A”.

Here are the details.

Name: Application C

Origin: http://localhost:8383/

Let us click “Show Data” and observe the result.

042415_1052_HTML5Securi3.png

Nice! We are able to access the data from this application, since it is from the same origin as Application A.

To conclude, I have used the same code in all the above examples but with different origins. We inserted data into the database using Application A. When we tried accessing it from Application B, it failed due to the same origin policy.

Let us now see some attacks possible with HTML5 local storage.

Storing Sensitive Data

Developers may store sensitive information in these databases. It is possible to find API keys or similar sensitive data when working with APIs due to their statelessness. We can exploit them using an XSS vulnerability if there is no physical access to the device.

Below is an example of how JavaScript’s localStorage object stores data.

We can use the function setItem with some name-value pairs as parameters.

localStorage.setItem(“data”, “mydata”);

As we can see in the figure below, Chrome stores this data in the following path.

042415_1052_HTML5Securi4.png

We can programmatically read this data using JavaScript as shown below.

localStorage.getItem(“data”);

We can now go ahead and read this data from the SQLite database as shown below.

042415_1052_HTML5Securi5.png

042415_1052_HTML5Securi6.png

Script Injection

SQLite data, when not properly sanitized, may lead to script injection attacks. Let us see a simple example.

Below is the same form we saw in the beginning of the article.

Let us store some sample data and retrieve it back as shown below.

042415_1052_HTML5Securi7.png

042415_1052_HTML5Securi8.png

If this data is not properly sanitized, it will lead to stored XSS Vulnerability as shown below.

This time, let us enter the below piece of code into the message box.

<img src=’X’ onerror=alert(1);>

042415_1052_HTML5Securi9.png

et us click the “Show Data” button and see the result.

042415_1052_HTML5Securi10.png

As we can see, it has popped up an alertbox due to the JavaScript we injected.

Conclusion

This article has discussed how the HTML5 local storage feature works and how Same Origin Policy restrictions are applied on the data being stored. Finally, we have had a look at some possible attacks on the HTML5 local storage feature. We will see other HTML5 features and possible attacks in later articles.

Source

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...