一、簡介

眾所周知，HTML5是W3C制定的新一代HTML語言標準。HTML5的一些新功能，也帶來了一些安全挑戰。

接下來我們要去講解一些標簽和攻擊。

二、HTML5 新標簽

2.1 新標簽的XSS

HTML5 定義了一些新標簽，新事件，這些可能帶來新的XSS攻擊。

之前我們在講述XSS攻擊時，使用的是script標簽

<script>alert(0)</script> 

HTML5添加了音視頻的標簽，而這些標簽又有一些有趣的屬性，例如poster、autofocus、onerror、formaction、oninput，這些屬性都可以用來執行javascript。這會導致XSS攻擊。

例如：

<video src="https:xxxxxx" onloadedmetadata="alert(document.cookie)" ontimeupdate="alert('XSS攻擊')"></video>

2.2 iframe的sandbox

iframe標簽一直以來為人詬病。一些XSS、clickJacking等攻擊中都能看到它的身影。

HTML5為iframe元素增加了sandbox屬性，防止不信任的Web頁面執行某些操作，例如訪問父頁面的DOM、執行腳本、訪問本地存儲或者本地數據庫等等。

sandbox可以通過參數來支持更精準的控制。有下面的幾個值可以選擇

""：應用以下所有的限制。
allow-same-origin：允許 iframe 內容被視為與包含文檔有相同的來源。
allow-top-navigation ：允許 iframe 內容從包含文檔導航（加載）內容。
allow-forms：允許表單提交。
allow-scripts：允許腳本執行。

sandbox是專門為iframe而定制的一個屬性，現在對瀏覽器兼容來說不能完美兼容。但只是一個簡單的代碼在寫的時候建議加入’sandbox’。還是起到一定的安全作用的。

但是這個安全策略又會帶來另外的風險，例如ClickJacking攻擊里阻止Javascript腳本的運行來繞過Javascript的防御方式。

2.3 Link Types:noreferrer

在HTML5中為<a>標簽和<area>標簽定義了一個新的Link Types:noreferrer。即標簽指定noreferrer后，瀏覽器在請求該標簽指定地址時不添加Referer。通過Referer，可能會泄露一些敏感信息。

<a href="xxx" ref="noreferrer">test</a>

2.4 Canvas的使用

Canvas可以說是HTML5中最大的創新之一。Canvas標簽讓Javascript可以在頁面中直接操作圖片對象，也可以直接操作像素，構造出圖片區域。

通過Canvas自動破解驗證碼，最大的好處時可以在瀏覽器環境中實現在線破解，大大降低了攻擊的門檻。

三、其他安全問題

3.1 CORS

瀏覽器實現的同源策略限制了腳本的跨域請求。但互聯網趨勢是越來越開放的，因此跨域訪問的需求也越來越迫切。

CORS主要是通過對被請求資源站點設置 Access–Control-Allow-Origin 的響應頭來實現的，也就是比如：

a.com 需要通過ajax方式訪問b.com 的資源，那么就可以對b.com 的HTTP 響應設置

Access–Control-Allow-Origin：http://a.com 

這樣來允許a.com

帶來便捷的同時往往伴隨著安全問題。對于開發者來說，通常不喜歡通過白名單的形式去使用這些安全策略。因為意味著一旦新增一個網站又得修改策略，所以一般采用通配符，即Access–Control-Allow-Origin：*，允許所有來源的請求。這就意味著同源策略的失效，導致一些攻擊或者信息泄露。

這類問題的防御其實也相對比較簡單，比如對于跨域請求應該驗證身份，驗證數據有效性等，確實是正常用戶的跨域請求，再進行對應處理。

3.2 postMessage----跨窗口傳遞信息

我們之前提到，利用window.name來跨窗口、跨域傳遞信息。實際上，window這個對象幾乎不受同源策略的限制的，很多腳本攻擊都巧妙的利用了window對象這一特點。

postMessage允許每一個window（包括當前窗口、彈出窗口、iframe等）對象往其他的窗口發送文本信息，從而實現跨窗口的消息傳遞。這個功能是不受同源策略限制的。

在使用postMessage時，有兩個安全問題需要注意

必要時，可以接收窗口驗證Domain，甚至驗證URL,以防止來自非法頁面的消息
如果將消息寫入innerHTML,甚至直接寫入script中，則可能會導致XSS攻擊的產生。所以在接收敞口不應該信任接收到消息，而需要對消息進行安全檢查

3.4 Web Storage

開發者可以為應用創建本地存儲，存儲一些有用的信息。例如LocalStorage可以長期存儲，而且存放空間很大，一般是5M，極大的解決了之前只能用Cookie來存儲數據的容量小、存取不便、容易被清除的問題。由于是瀏覽器本地存儲，那么意味著一旦重要、敏感數據采用這種存儲方式，而其API都是通過Javascript提供的，這樣攻擊者可以通過XSS攻擊竊取信息，例如用戶token或者資料。

這里主要應該避免存儲敏感數據，還有就是把對應的數據放在不同域里，比如會話ID應該存儲在sessionStorage，相對于localStorage，sessionStorage會在瀏覽器窗口或者標簽頁關閉后刪除。