Cross-Session Contamination

在 localStorage 和 sessionStorage 之间传输值会不知不觉地暴露敏感信息。

HTML5 提供 localStorage 和 sessionStorage 映射，以支持开发人员保留程序值。sessionStorage 映射仅在页面实例和即时浏览器会话期间为调用页面提供存储。但是，localStorage 映射会提供可供多个页面实例和浏览器实例访问的存储。此功能允许应用程序在多个浏览器选项卡或窗口中保留和使用同一信息。

例如，开发人员可能希望在旅游应用程序中使用多个浏览器选项卡或实例，以支持用户打开多个选项卡来比较住宿选择，同时保留用户最初的搜索条件。在传统的 HTTP 存储方法中，用户会面临在一个选项卡中执行的购买和决策（并存储在会话或 cookies 中）与另一个选项卡中的购买相干扰的风险。

借助跨多个浏览器选项卡使用用户值的功能，开发人员必须多加小心，以免将敏感信息从 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 信息在其他浏览器选项卡和新调用的浏览器中可用。这样可以绕开预期工作流的应用程序逻辑。