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本地存儲特性是如何工作的，以及同源策略限制是如何應用于數據存儲的。最后我們對其中可能發生的攻擊進行了解，期待下一篇文章吧。
