摘要：本地安全問題在之前引入了本地這個東西，但是后面被廢除了，他的安全點和后臺數(shù)據(jù)庫的關(guān)注點差不多，就是要防止在數(shù)據(jù)中混入查詢指令。僵尸網(wǎng)絡(luò)風(fēng)險中解決了單線程問題，提出了機制，它為提供多線程支持，但是多線程帶來了一個非?？膳碌奈ｋU僵尸網(wǎng)絡(luò)。

標簽： html html5 web安全

w3school:html5相關(guān)基礎(chǔ)知識（w3school.com.cn）

51CTO的HTML5安全專題

FREEBUFF上有關(guān)HTML5的安全文章（FREEBUFF搜索關(guān)鍵詞：html5）

相關(guān)技術(shù)博客和雜文（百度搜索關(guān)鍵詞：html5 安全）

html5相關(guān)新技術(shù)

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

本地數(shù)據(jù)庫注入（Web Sql Injection）

本地存儲風(fēng)險（Local Storage and Session Storage）

js多線程（Web Worker）風(fēng)險

Web Socket帶來的嗅探風(fēng)險

新標簽風(fēng)險

新API風(fēng)險

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

只能支持文本數(shù)據(jù)傳送，其他數(shù)據(jù)不可

沒有即時進度信息，只有完成與否的狀態(tài)

不能跨域傳輸，只能同域內(nèi)進行傳輸

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

具體細節(jié)請參考：阮一峰的博客

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

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

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

操作方式詳見此處

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

操作方式詳見此處

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

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

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

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

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

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

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

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

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

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

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

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

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

51CTO h5安全專題
51CTO 文章

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

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

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

js獲取，因為是只能通過js設(shè)置和獲取，導(dǎo)致的結(jié)果是不能像cookie一樣設(shè)置httponly。所以可以配合CORS來獲取網(wǎng)站的localstorage的信息。所以localstorage中不能存放敏感信息。

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

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

不要存放敏感信息。

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

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

配合CORS或者XSS獲取本地存儲中的數(shù)據(jù)。

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

H5中“解決”了js單線程問題，提出了web worker機制，它為js提供多線程支持，但是多線程帶來了一個非?？膳碌奈ｋU-僵尸網(wǎng)絡(luò)。

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

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

不要訪問不安全的站點

用戶注意觀察客戶端資源占用情況，發(fā)現(xiàn)某個頁面資源占用反常就關(guān)掉。

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

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

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

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

新的方式如下：

待補充#todo

新方式如下：

X
X

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

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

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

利用方式：

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

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

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

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

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

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

但是這么寫的話：

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

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