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

標(biāo)簽： html html5 web安全

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

51CTO的HTML5安全專題

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

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

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

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

本地?cái)?shù)據(jù)庫注入（Web Sql Injection）

本地存儲(chǔ)風(fēng)險(xiǎn)（Local Storage and Session Storage）

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

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

新標(biāo)簽風(fēng)險(xiǎn)

新API風(fēng)險(xiǎn)

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

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

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

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

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

具體細(xì)節(jié)請(qǐng)參考：阮一峰的博客

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

具體使用方法請(qǐng)見：w3school.com.cn

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

操作方式詳見此處

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

操作方式詳見此處

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

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

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

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

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

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

不要對(duì)Access–Control-Allow-Origin使用 *

要對(duì)跨域請(qǐng)求驗(yàn)證session信息。

嚴(yán)格審查請(qǐng)求信息，比如請(qǐng)求參數(shù)，還有http頭信息。

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

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

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

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

51CTO h5安全專題
51CTO 文章

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

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

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

js獲取，因?yàn)槭侵荒芡ㄟ^js設(shè)置和獲取，導(dǎo)致的結(jié)果是不能像cookie一樣設(shè)置httponly。所以可以配合CORS來獲取網(wǎng)站的localstorage的信息。所以localstorage中不能存放敏感信息。

因?yàn)樵诟鞔笾髁鞯臑g覽器中，除了opera采用base64加密，其他都是采用明文存儲(chǔ)的，所以在存儲(chǔ)的時(shí)候最好在服務(wù)器端進(jìn)行加密。

還有一個(gè)，可能會(huì)被植入廣告追蹤標(biāo)志。

不要存放敏感信息。

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

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

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

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

H5中“解決”了js單線程問題，提出了web worker機(jī)制，它為js提供多線程支持，但是多線程帶來了一個(gè)非常可怕的危險(xiǎn)-僵尸網(wǎng)絡(luò)。

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

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

不要訪問不安全的站點(diǎn)

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

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

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

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

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

新的方式如下：

待補(bǔ)充#todo

新方式如下：

X
X

待補(bǔ)充#todo
更多可查看：HTML5 標(biāo)簽安全

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

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

利用方式：

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

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

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

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

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

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

但是這么寫的話：

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

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