Cross-Session Contamination

Transferring values between localStorage and sessionStorage can expose sensitive information unwittingly.

HTML5 provides localStorage and sessionStorage maps to allow developers to persist program values. The sessionStorage map provides storage for the invoking page and lasts only for the duration of the page instance and the immediate browser session. The localStorage map, however, provides storage that is accessible over multiple page instances and multiple browser instances. This functionality allows an application to persist and utilize the same information in multiple browser tabs or windows.

For example, a developer may wish to utilize multiple browsers tabs or instances in a travel application that wants to allow a user to open multiple tabs to compare accommodations while still maintaining the users original search criteria. In the traditional HTTP storage scenario, the user risks purchases and decisions made in one tab (and stored in the session or cookies) interfering with purchases in another tab.

With the ability to utilize user values across multiple browser tabs, developers must be careful not to move sensitive information from the sessionStorage scope to the localStorage or vice versa.

Example 1: The following example stores the credit card CCV information in the session to indicate that a user has already authorized the site to charge the card on file for a purchase. For each purchase attempt within the context of the browser tab, credit card approval is required. To avoid the CCV being entered again, the information is stored in the sessionStorage object. However, the developer also stores the information within the localStorage object.

...
try {
    sessionStorage.setItem("userCCV", currentCCV);
} catch (e) {
    if (e == QUOTA_EXCEEDED_ERR) {
        alert('Quota exceeded.');
    }
}

...
...

var retrieveObject = sessionStorage.getItem("userCCV");
try {
    localStorage.setItem("userCCV",retrieveObject);
} catch (e) {
    if (e == QUOTA_EXCEEDED_ERR) {
        alert('Quota exceeded.');
    }
    ...

    var userCCV = localStorage.getItem("userCCV");
    ...
}
...

By placing the information back into the localStorage object, the CCV information is now available in other browser tabs and also on new invocations of the browser. This will by-pass the application logic for the intended workflow.