新手開車——HTML5安全

1、HTML5新標籤

　　html5定義了不少新標籤、新事件，這有可能帶來新的xss攻擊。

　　一、<video>

　　好比HTML5中新增的<video>標籤，這個標籤能夠在網頁中遠程加載一段視頻。與之相似的還有<audio>標籤。

　　<video src="http://tinyvid.tv/file/232332.ogg" onloadedtadata="alert(document.cookie);" ondurationchanged="alert("/xss2/");" ontimedate="alert(/xss1/);" tabindex="0">

　　</video>

　　二、iframe的sandbox

　　在HTML5中，專門爲iframe定義了一個新的屬性，叫作sandbox。

　　使用sandbox這個屬性後，<iframe>標籤加載後的內容將被視爲一個獨立的「源」，其中的腳本將被禁止執行，表單將被禁止提交，插件被禁止加載，指向其餘瀏覽器對象的鏈接也會被禁止。

　　sandbox屬性能夠經過參數來支持更精確的控制。有如下幾個值能夠選擇：

　　　　（1）allow-same-origin:容許同源訪問

　　　　（2）allow-top-navigation:容許訪問頂層窗口

　　　　（3）allow-forms:容許提交表單

　　　　（4）allow-scripts:容許執行腳本

　　實例：

　　　　<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://maps.example.com/embeded.html">

　　　　</iframe>

　　三、Link Type :noreferrer

　　　在HTML5中爲<a>標籤和<area>標籤訂義了一個新的Link Type :noreferrer ，指定noreferrer後，瀏覽器在請求該標籤指定的地址時將再也不發送referer。

　　　<a href="xxx" rel="noreferrer"> teat </a>

　　　這種設計是出於保護敏感信息和隱私的考慮。由於referer，可能會泄露一些敏感的信息。

　　　這個標籤須要開發者手動添加到頁面的標籤中，對於有需求的標籤能夠選擇使用noreferrer。

　　四、Canvas的妙用

　　　　這個標籤能夠說是HTML5中最大的創新之一。<img>標籤只能是遠程加載一張圖片，而<canvas> 標籤讓Javascript能夠在頁面中直接操做圖片對象，也能夠直接操做像素，構造出圖片區域。

　　　　canvas的出現極大的挑戰了傳統富客戶端插件的地位，開發者甚至能夠用canvas在瀏覽器上寫一個小遊戲。

　　　　<canvas id="mycanvas" width="200" heigth="100" style="border:1px solid #c3c3c3">

　　　　　　you browser does not support the canvas element;

　　　　</canvas>

　　　　<script>

　　　　　　var c= document.getElementById("mycanvas");

　　　　　　var cxt=c.getContext("2d");

　　　　　　cxt.fileStyle="#FF0000";

　　　　　　cxt.filleRect(0,0,175,75);

　　　　</script>

　　canvas提供的強大的功能，甚至能夠用來破解驗證碼。Shaun Friedle寫了一個腳本，經過JS操做Canvas中的每一個像素點，成功的自動化識別了驗證碼。

2、其餘安全問題

　一、Cross-Origin Resource Sharing

　　W3C委員會決定製定一個新的標準來解決日益迫切的跨域訪問問題。這個新的標準敘述以下：

　　假設從http://www.a.com/test.html發起一個跨域的XMLHttpRequest請求，請求的地址爲：http://www.b.com/test.php 。

　　　　<script>

　　　　　　var client = new XMLHttpRequest();

　　　　　　client.open("GET","http://www.b.com/test.php");

　　　　　　client.onreadystatechang=function()  { }

　　　　　　client.send(null);

　　　　</script>

　　若是是在IE8中，則須要使用XDomainRequest來跨域請求。

　　　　var request = new XDomainRequest();

　　　　request.open("GET",xdomainurl);

　　　　request.send();

　　若是服務器www.b.com返回一個HTTP Header:

　　　　Access-Control-Allow-Origin:http://www.a.com

　　代碼以下：

　　　　<?php

　　　　　　header("Access-Control-Allow-Origin: * ");

　　　　?>

　　　　Cross Domain Request Test !!

　　那麼這個來自http://www.a.com/test.html 的跨域請求就會被經過。

　　在這個過程當中，http://www.a.com/test.html 發起的請求還必需帶上一個Origin Header:

　　　　Origin :http://www.a.com

 

　　在火狐瀏覽器中抓包分析(重點部分)：

　　請求頭：

　　　　GET  http://www.b.com/test.php   HTTP/1.1

　　　　host:  www.b.com

　　　　referer:  http://www.a.com/test.html

　　　　origin:   http://www.a.com

　　響應頭：

　　　　http/1.1   200   ok

　　　　Access-Control-Allow-Origin:  *

　　　

　　Origin Header 用於標記HTTP發起的 「源」，服務器端經過識別瀏覽器自動帶上的這個Origin Header,來判斷瀏覽器的請求是否來自一個合法的  「源」。Origin  Header能夠用於防範CSRF,

　　它不像Referer那麼容易被僞造或清空。

　　上面的例子中，服務器返回：

　　　　Access-Control-Allow-Origin:  *

　　從而容許客戶端的跨域請求經過。在這裏使用了通配符  「*」 ，這是極其危險的，他將容許來自任意域的開宇請求訪問成功。

　二、postMessage——跨窗口傳遞消息

　　postMessage容許沒一個window(包括當前窗口、彈出窗口、iframe等)對象網向其餘的窗口發送文本消息，從而實心跨窗口的消息傳遞。這個功能是不受同源策略限制的。

　　演示一個postMessage的用法：

　　發送窗口：

　　　　<iframe src="http://www.dev.jquery.com/message"  id="iframe"> </iframe>

　　　　<form id="form">

　　　　　　<input type="text"  id="msg" value="message to send"   />

　　　　　　<input type="submit"  />

　　　　</form>

　　　　<script>

　　　　　　window.onload=function() {

　　　　　　　　var   win  =document.getElementById("iframe").contentWindow;

　　　　　　　　document.getElementById("form").onsubmit=function(e)  {

　　　　　　　　　　win.postMessge(document.getElementById("msg").value);

　　　　　　　　　　e.preventDefault();

　　　　　　　　};

　　　　　　};

　　　　</script>

　　接受窗口：

　　　　<b>This iframe is located on dev.jquery.com  </b>

　　　　<div  id= "test" >send me a message ! </div>

　　　　<script>

　　　　　　document.addEventListener ("message",function(e) {document.getElementById("test").textContent=e.domain + " said: " +e.data;} ,false);

　　　　</script>

　　在這個例子中，發送窗口負責發送消息；而在接受窗口中，須要綁定一個message事件，監聽其餘窗口發送來的消息。這是兩個窗口之間的一個  "約定" ,若是沒有監聽這個事件，則沒法接受到消息。

　　在使用postMessage（）時，有兩個安全問題須要注意。

　　（1）、在必要時，能夠在接收窗口驗證Domain,甚至驗證URL，以防止來自非法頁面的消息。這實際是在代碼中實現一次同源策略的驗證過程。

　　（2）、在本例中，接受的消息寫入textContent,但在實際應用中，若是將消息寫入innerHTML,甚至直接寫入script中，則可能會致使DOM based XSS的產生。根據 「 secure by default」原則，

在接收窗口不該該信任接收到的消息，而須要對消息進行安全檢查。

　　在使用postMessage，也會使XSS payload 變得更加靈活。

三、Web  Storage

　　在過去的瀏覽器中可以存儲信息的方法有如下幾種：　　

　　　　cookie       　　　　　　　　主要用於保存登陸信息和少許信息。

　　　　Flash Shared Object　　　　後面這兩個則是Adobe與微軟本身的功能，並未成爲一個通用化的標準。

　　　　IE UserData

　　所以出現 Web  Storage  能在客戶端有一個較爲強大和方便的本地存儲功能.

　　Web  Storage分爲Session Storage 和 Local Storage。前者關閉瀏覽器就會消失，後者則會一直存在。Web  Storage就像一個非關係型數據庫，由key-value對組成，能夠經過JS對其進行操做。

　　使用方法以下：

　　　　（1）設置一個值：window.sessionStorage.setItem(key,value);

　　　　（2）讀取一個值：window.sessionStorage.getItem(key);

　　Web  Storage也受到同源策略的約束，每一個域所擁有的信息只會保存在本身的域下，以下例子：

　　　　<script>

　　　　　　if( document.domain == "www.a.com")

　　　　　　{

　　　　　　　　window.localStorage.setItem("test",123);

　　　　　　}

　　　　　　alert(window.localStorage.getItem("test"));

　　　　</script>

　　當訪問  http://www.a.com/test.html  就會彈出  123

　　當訪問  http://www.b.com/test.html  彈出null 。

　　Web  Storage 的強大功能也爲XSS Payload打開方便之門。攻擊者有可能將惡意代碼保存在  Web  Storage 中，從而實現跨頁面攻擊。

　　當Web  Storage中保存有敏感信息時，也可能會成爲攻擊的目標，xss攻擊徹底能夠完成這一過程。