Cross-Session Contamination

localStorage と sessionStorage 間で値を転送すると、意図せずに重要な情報が公開される可能性があります。

HTML5 は、localStorage および sessionStorage マップを提供して、開発者がプログラムの値を保持できるようにしています。sessionStorage マップは、ページを起動するためのストレージを提供し、該当するページ インスタンスおよび直近のブラウザ セッションの期間だけ持続します。しかし、localStorage マップは、複数のページ インスタンスおよび複数のブラウザ インスタンスにわたってアクセス可能なストレージを提供します。この機能により、アプリケーションは、複数のブラウザタブやウィンドウで同じ情報を保持して利用できるようになります。

たとえば開発者は、ユーザーの元々の検索条件を保持しながら、ユーザーが複数のタブを開いて宿泊設備を比較できるように、複数のブラウザタブやインスタンスを旅行アプリケーションで使用したいと考える場合があります。従来型のストレージシナリオでは、ユーザーがあるタブで行った(そしてセッションまたは cookie に保存された)購入や決定が、別のタブにおける購入を妨げてしまう危険性があります。

ユーザーの値を複数のブラウザ タブ間で使用できる場合、開発者は、重要な情報を sessionStorage スコープと localStorage 間で移動しないように注意するよう必要があります。

例 1: 次の例では、クレジッド カードの CCV 情報がセッションに保存され、購入物についてカードで支払うことをユーザーがすでに承認していることが示されます。このブラウザー タブのコンテキストで購入しようとすると、必ずクレジッド カードの承認が求められます。CCV の再入力を回避するために、情報は sessionStorage オブジェクトに保存されます。しかし、開発者は、localStorage オブジェクト内にも情報を保存します。

...
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");
    ...
}
...

localStorage オブジェクトに情報を戻すことで、CCV 情報は他のブラウザ タブでも利用できるようになります。また、ブラウザを新たに呼び出した場合でも利用できるようになります。これは、アプリケーション論理の本来のワークフローを回避しています。