在上一篇文章《HTML5跨域消息发送安全性分析》中，我们讨论了在HTML5下的跨域消息传递。本文将带你去了解另外一个特性——本地存储。
本地存储
本地存储也是HTML5的新特性之一，最开始是在Mozilla 1.5上的，后来渐渐被HTML5规范接受。通过JavaScript的localStorage和sessionStorage对象，我们可以使用HTML5的这个新特性。基于键值值匹配，这些JavaScript对象允许我们存储，检索和删除数据。
在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage，从名字应该可以很清楚的辨认二者的区别，前者是一直存在本地的，后者只是伴随着session，窗口一旦关闭就没了，二者用法完全相同。
下面是一个HTML5应用程序示例，使用HTML5新的本地存储特性，我们可以使用 “Show Data”按钮检索存储在数据库中的数据。
我们先来看看这个站点的源，假设http://localhost:8383/为“应用程序A”，整理一下：
Name: Application A
Origin: http://localhost:8383/
单击“Show Data”按钮
预期结果：我们能够访问应用程序A存储在数据库中的数据。
现在尝试通过不同源来访问应用程序A存储在数据库中的数据。
假设这是应用程序B，下面为详情：
Name: Application B
Origin: http://localhost/
注意了，应用程序B与应用程序A端口号不同，属于不同源。
点击“Show Data”按钮。
当我点击“Show Data”按钮的时候，明显感觉到网页没有反应，这是因为应用程序不同源。
为了实验准确，我们再次进行确认。我们运行与应用程序A同源的应用程序C
Name: Application C
Origin: http://localhost:8383/
点击“Show Data”按钮，观察结果
很好，我们能够从应用程序C访问到数据，因为它与应用程序A同源。
结论，在上面的几个应用程序中都使用相同的代码，但有些不同源。将数据插入应用程序A的数据库中，由于应用程序B与应用程序A不同源，所以访问失败。而应用程序C同源，成功访问。
接下来，我们来看看HTML5本地存储可能遭受的攻击
敏感数据存储
开发者可能在其数据库中存储敏感数据，很可能被找出API KEY或者其他敏感数据。如果没有物理访问设备，我们可以使用XSS漏洞进行利用。下面这个例子描述了localStorage对象如何存储数据，我们可以使用函数添加键值对作为参数。
localStorage.setItem(“data”, “mydata”);
下图中，我们可以看到Chrome将数据存储的路径
读取数据
localStorage.getItem(“data”);
继续从SQLite数据库读取这些数据
脚本注入
没有很好过滤SQLite中的数据，可能会导致脚本攻击，下面我们来看一个简单的例子。
先存储一些数据，然后进行检索。
如果这些数据没有被很好的过滤，这可能会导致存储XSS漏洞。这一次我们在消息框中输入
- <img src=’X’ onerror=alert(1);>
点击“Show Data”按钮，看看结果
如我们所见，网页弹出警告框。
总结
本文讨论了HTML5本地存储特性是如何工作的，以及同源策略限制是如何应用于数据存储的。最后我们对其中可能发生的攻击进行了解，期待下一篇文章吧。
