HTML5安全分析：本地存储

在上一篇文章《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本地存储特性是如何工作的，以及同源策略限制是如何应用于数据存储的。最后我们对其中可能发生的攻击进行了解，期待下一篇文章吧。