一、什么是基于DOM的HTML5存储操作

当攻击者将可控制的数据存储在Web浏览器的HTML5存储区（localStorage或sessionStorage）中时，就会出现HTML5存储操作漏洞。攻击者通过此方式来构造URL；如果另一个用户访问了该URL，它则有可能导致用户的浏览器存储攻击者可控制的数据。
此行为本身并不构成安全漏洞。但是，如果应用程序以后从存储中读取数据并以不安全的方式对其进行处理，那么攻击者可能能够利用存储机制来传递其他基于DOM的攻击，例如XSS和JavaScript注入。

二、导致基于DOM的HTML5存储操作漏洞的接收器

1、sessionStorage.setItem()

语法：

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

返回值
一个 Storage 对象。

示例：

下面的代码访问当前域名的 session Storage 对象，并使用 Storage.setItem() 访问往里面添加一个数据条目。

sessionStorage.setItem('myCat', 'Tom');
下面的示例会自动保存一个文本输入框的内容，如果浏览器因偶然因素被刷新了，文本输入框里面的内容会被恢复，因此写入的内容不会丢失。

// 获取文本输入框
let field = document.getElementById("field");

// 检测是否存在 autosave 键值
// (这个会在页面偶然被刷新的情况下存在)
if (sessionStorage.getItem("autosave")) {
  // 恢复文本输入框的内容
  field.value = sessionStorage.getItem("autosave");
}

// 监听文本输入框的 change 事件
field.addEventListener("change", function() {
  // 保存结果到 sessionStorage 对象中
  sessionStorage.setItem("autosave", field.value);
});

2、localStorage.setItem()

语法：

myStorage = localStorage;

示例：

下面的代码片段访问了当前域名下的本地 Storage 对象，并通过 Storage.setItem() 增加了一个数据项目。

localStorage.setItem('myCat', 'Tom');
该语法用于读取 localStorage 项，如下:

let cat = localStorage.getItem('myCat');
该语法用于移除 localStorage 项，如下:

localStorage.removeItem('myCat');
该语法用于移除所有的 localStorage 项，如下:

// 移除所有
localStorage.clear();

三、如何防止基于DOM的HTML5存储操作漏洞

避免将任何来自不受信任来源的数据放入HTML5存储中。