摘要：本地安全問題在之前引入了本地這個東西，但是后面被廢除了，他的安全點和后臺數據庫的關注點差不多，就是要防止在數據中混入查詢指令。僵尸網絡風險中解決了單線程問題，提出了機制，它為提供多線程支持，但是多線程帶來了一個非常可怕的危險僵尸網絡。

標簽： html html5 web安全

w3school:html5相關基礎知識（w3school.com.cn）

51CTO的HTML5安全專題

FREEBUFF上有關HTML5的安全文章（FREEBUFF搜索關鍵詞：html5）

相關技術博客和雜文（百度搜索關鍵詞：html5 安全）

html5相關新技術

跨域資源共享（CORS）安全問題

本地數據庫注入（Web Sql Injection）

本地存儲風險（Local Storage and Session Storage）

js多線程（Web Worker）風險

Web Socket帶來的嗅探風險

新標簽風險

新API風險

XMLHttpRequest主要提供了js直接發送請求的接口，在老版本中有以下缺點：

只能支持文本數據傳送，其他數據不可

沒有即時進度信息，只有完成與否的狀態

不能跨域傳輸，只能同域內進行傳輸

在新版本的XMLHttpRequest中（level 2），以上都得到了實現，其中最關鍵的是可以在服務器和瀏覽器本身的支持下進行跨域傳輸。

具體細節請參考：阮一峰的博客

在html5之前，本地存儲只有cookie（flash cookie）這么一種選擇，但是cookie的容量很小，并且安全性上得不到保障。
在html5中，新增了兩種存儲方式：local storage和session storage，local storage是永久性的存儲，大小大概是5MB, session storage時臨時的，瀏覽器關閉即刻清空。其實這兩個東西是一個東西，放在內存中是session storage，在文件系統中是local storage。

具體使用方法請見：w3school.com.cn

同時，html5提供了本地數據庫支持，默認是sqlite這一輕量級的數據庫，可以存儲一些臨時資料或者緩存。

操作方式詳見此處

由于js時單線程執行的，所以在h5之前，執行js是會阻塞UI的，h5實現了web worker這一機制，從而使得js也可以使用子線程去執行任務從而不阻塞主UI線程了。

操作方式詳見此處

由于http時無狀態單連接的協議，所以在過去，只能是客戶端發送request，服務器響應response，現在h5實現了websocket這一機制，從而可以保持長鏈接，服務器可以主動推送信息到客戶端了。當然需要服務器支持websocket機制。
具體使用方式

h5新實現了一些比較便捷的標簽和api，使得用戶對第三方插件的依賴能過有所減少，從而減少不可控安全問題。
比如,,等等。
同時實現了比較多的新的api，比如地理位置api，putstate等等。
具體請查看：w3school.com.cn

ajax在之前是要嚴格遵守同源策略的，但是在h5中為了提供更好的使用性，誕生了ajax跨域的方式-CORS。跨域資源共享是為了解決跨域請求的問題的。

除了CORS這個方案，還有另外兩種跨域請求的方法，一個是使用jsonp的方式，一個是使用flash的跨域方案，通過服務器上的crossdomain.xml來控制跨域。

CORS的跨域方式是通過：Access–Control-Allow-Origin這個頭以及其他的頭來實現的，客戶端跨域訪問一個服務器，服務器會確定這個這個域名是否有權限來獲取資源，若有則返回一個帶有Access–Control-Allow-Origin頭的response以及資源。若無則返回一個權限錯誤：XMLHttpRequest cant load .....

（1）. 對Access–Control-Allow-Origin設置為*,并且沒有攜帶會話認證，這樣子意味著信息被公開在全網。
（2）. http頭可以偽造。http可以偽造意味著http頭中的域名(origin)可以是假的，所以跨域是要配合身份驗證進行的，所以跨域的時候記得帶上session id。
（3）. 就算是使用了session id，但是第三方有可能也會被入侵，從而導致源站信息泄露，所以CORS是一個非常危險的東西。
（4）. 內部信息泄露，內部成員打開一個evil website，導致個人會話信息泄露，那么內部網站的數據將會泄露
（5）. 另外，不是設置了Access–Control-Allow-Origin，并且對請求站點做了權限控制，就可以防止信息泄露，在返回權限錯誤的時候，請求的信息其實已經到了客戶端。
（6）. CORS默認不能攜帶會話信息，但是如果將withCredentials設置為true，則可以攜帶，所以這個屬性最好設置為false。萬一需要設置為true，請在Access–Control-Allow-Origin上設置具體的域名，不要使用 *。這是CORS的最后一層遮羞褲了，設置不好就裸奔了。

不要對Access–Control-Allow-Origin使用 *

要對跨域請求驗證session信息。

嚴格審查請求信息，比如請求參數，還有http頭信息。

CORS主要是提供了一種隱形的跨域數據傳輸方式，偷取信息用戶是不能感受到的，主要是兩種利用方式。

第一個是需要將跨域js植入到被攻擊的頁面，這樣子可以劫持到對方的cookie等認證信息。這種方式就是通過一個xss或者sqli，將js植入目標服務器，這樣子就可以將認證信息偷過來了，如果是存儲型就就更贊了，可以實時更新認證信息。

第二個是將跨域放在自己控制的網站上，通過用戶點擊來攻擊指定由CORS漏洞的服務器。這個要求目標服務器對CORS沒有設置好，有CORS配置漏洞。

另外ajax跨域不存在問題了，那么是不是CSRF也可以更隱蔽的進行了呢

51CTO h5安全專題
51CTO 文章

這里的本地存儲主要指的是localstorage和sessionstorage。其他的比如windows.history，png cache等等不做討論。

就如余弦說的，localstorage是大勢所趨，因為隨著網站的復雜性升級，cookie最多只能有4k，每個網站只能存放30或者50個cookie，這樣大大制約了web的發展。所以localstorage和sessionstorage出現了（后面將不分開討論）。

localstorage使用只能通過js去進行寫入或者讀取，存放格式為key-value格式，比如localStorage.set("key","value").這個意味著他沒有cookie那么安全。

js獲取，因為是只能通過js設置和獲取，導致的結果是不能像cookie一樣設置httponly。所以可以配合CORS來獲取網站的localstorage的信息。所以localstorage中不能存放敏感信息。

因為在各大主流的瀏覽器中，除了opera采用base64加密，其他都是采用明文存儲的，所以在存儲的時候最好在服務器端進行加密。

還有一個，可能會被植入廣告追蹤標志。

不要存放敏感信息。

選擇合適的域存放合適的信息，比如一次過期的信息就放在sessionstorage中。

對存放在其中的信息最好能夠在服務端進行加密。

配合CORS或者XSS獲取本地存儲中的數據。

H5在之前引入了本地SQL這個東西，但是后面被廢除了，他的安全點和后臺數據庫的關注點差不多，就是要防止在數據中混入sql查詢指令。這里不再展開。

H5中“解決”了js單線程問題，提出了web worker機制，它為js提供多線程支持，但是多線程帶來了一個非常可怕的危險-僵尸網絡。

var worker = new Worker("worker.js");
worker.postMessage("hello world");
worker.onmessage = function(){}

風險點只有一個，那就是在用戶不知情的情況下，使用pc端的資源往外發送大量的請求，如果受控的客戶端（僵尸）夠多，并且針對某一個目標發送，可以造成應用層的DDOS。（雖然是異域，但是不需要CORS配合，因為CORS只是限制客戶端是否能夠拿到服務器的數據，而不會限制發送這個事情）
其實這里還有一個postMessage的問題，放到API風險那個小結。

不要訪問不安全的站點

用戶注意觀察客戶端資源占用情況，發現某個頁面資源占用反常就關掉。

非常清晰，寫一個webworker，然后注入到一些頁面中去，只要訪問這個頁面，web worker就開始工作。

H5的web socket 顛覆了傳統的http通信方式（request-response），他通過建立一個長鏈接，讓服務器可以隨時推送消息給客戶端，而不是采用輪詢的方式去做這個事情。

他是通過開啟另外一個非80的端口去做這件事情。從而導致嗅探的可能性。

H5引進了很多新的標簽，比如等等，具體的可以去w3school查看。
新標簽意味著之前指定的xss過濾或者轉義規則可能會不適用。

新的方式如下：

待補充#todo

新方式如下：

X
X

待補充#todo
更多可查看：HTML5 標簽安全

postMessage是web worker中的一個函數，它的作用是主線程給新線程post數據用的，但是有一個問題就是postMessage是不通過服務器的，那么很有可能造成DOM-based XSS。

防御方式
但是postMessage的防御點不在本身，而在onmessage上，onmessage中不能直接使用innerHTML類似的語句添加或者修改網頁。

利用方式：

postMessage("");
worker.onmessage = function(e) {
    document.getElementById("test").innerHTML = e.data;
}

H5在History API新增了兩個API：pushState()和replaceState(),這兩個方法可以在不刷新頁面的情況下添加或者修改歷史條目

pushState(data,title [, url])
他的作用是在瀏覽器歷史列表的站定添加一條記錄，一個是狀態，一個是標題，一個是URL（可選，同域）

replaceState(data,tile [,url])
參數和上一個相同，它的作用是更改當前頁面的歷史紀錄。

利用方式：
可以利用他來偽裝GET方法下的反射型xss。
比如，存在一個有漏洞的鏈接 http://www.foo.com/?a=1，可以進行XSS注入，如：http://www.foo.com/?a=

但是如果這么直接寫在頁面上讓用戶點擊，一般都會發現有問題，所以可以采用短鏈接的方式，假設上述鏈接轉換為：http://www.foo.com/TqsjW，用戶應該會點過去了，但是點過去之后，URL欄中還是原來的長鏈接，同樣會被發現。

但是這么寫的話：

http://www.foo.com/?a=

將他轉換成短鏈接，點擊之后，會轉換到http://www.foo.com/這個上面，所以就完美的隱藏了。