http://fex.baidu.com/articles/page2/

Web 前端攻防（2014版）

zjcqoo | 20 Jun 2014

禁止一切外鏈資源

外鏈會產(chǎn)生站外請求，因此可以被利用實施 CSRF 攻擊。

目前國內(nèi)有大量路由器存在 CSRF 漏洞，其中相當(dāng)部分用戶使用默認的管理賬號。通過外鏈圖片，即可發(fā)起對路由器 DNS 配置的修改，這將成為國內(nèi)互聯(lián)網(wǎng)最大的安全隱患。

案例演示

百度旅游在富文本過濾時，未考慮標簽的 style 屬性，導(dǎo)致允許用戶自定義的 CSS。因此可以插入站外資源：

所有瀏覽該頁面的用戶，都能發(fā)起任意 URL 的請求：

由于站外服務(wù)器完全不受控制，攻擊者可以控制返回內(nèi)容：

• 如果檢測到是管理員，或者外鏈檢查服務(wù)器，可以返回正常圖片；

• 如果是普通用戶，可以返回 302 重定向到其他 URL，發(fā)起 CSRF 攻擊。例如修改路由器 DNS：

http://admin:admin@192.168.1.1/userRpm/PPPoECfgAdvRpm.htm?wan=0&lcpMru=1480&ServiceName=&AcName=&EchoReq=0&manual=2&dnsserver=黑客服務(wù)器&dnsserver2=4.4.4.4&downBandwidth=0&upBandwidth=0&Save=%B1%A3+%B4%E6&Advanced=Advanced

演示中，隨機測試了幾個帖子，在兩天時間里收到圖片請求 500 多次，已有近 10 個不同的 IP 開始向我們發(fā)起 DNS 查詢。

通過中間人代理，用戶的所有隱私都能被捕捉到。還有更嚴重的后果，查考流量劫持危害探討

要是在熱帖里『火前留名』，那么數(shù)量遠不止這些。

如果使用發(fā)帖腳本批量回復(fù)，將有數(shù)以萬計的用戶網(wǎng)絡(luò)被劫持。

防范措施

杜絕用戶的一切外鏈資源。需要站外圖片，可以抓回后保存在站內(nèi)服務(wù)器里。

對于富文本內(nèi)容，使用白名單策略，只允許特定的 CSS 屬性。

盡可能開啟 Content Security Policy 配置，讓瀏覽器底層來實現(xiàn)站外資源的攔截。

富文本前端掃描

富文本是 XSS 的重災(zāi)區(qū)。

富文本的實質(zhì)是一段 HTML 字符。由于歷史原因，HTML 兼容眾多不規(guī)范的用法，導(dǎo)致過濾起來較復(fù)雜。幾乎所有使用富文本的產(chǎn)品，都曾出現(xiàn)過 XSS 注入。

案例演示

旅游發(fā)帖支持富文本，我們繼續(xù)剛才的演示。

由于之前已修復(fù)過幾次，目前只能注入 embed 標簽和 src 屬性。

但即使這樣，仍然可以嵌入一個框架頁面：

因為是非同源執(zhí)行的 XSS，所以無法獲取主頁面的信息。但是可以修改 top.location，將頁面跳轉(zhuǎn)到第三方站點。

將原頁面嵌入到全屏的 iframe 里，偽造出相同的界面。然后通過浮層登錄框，進行釣魚。

總之，富文本中出現(xiàn)可執(zhí)行的元素，頁面安全性就大打折扣了。

防范措施

這里不考慮后端的過濾方法，講解使用前端預(yù)防方案：

無論攻擊者使用各種取巧的手段，繞過后端過濾，但這些 HTML 字符最終都要在前端構(gòu)造成元素，并渲染出來。

因此可以在 DOM 構(gòu)造之后、渲染之前，對離屏的元素進行風(fēng)險掃描。將可執(zhí)行的元素（script，iframe，frame，object，embed，applet）從緩存中移除。

或者給存在風(fēng)險的元素，加上沙箱隔離屬性。

• 例如 iframe 加上?sandbox?屬性，即可只顯示框架內(nèi)容而不運行腳本

• 例如 Flash 加上?allowScriptAccess?及?allowNetworking，也能起到一定的隔離作用。

DOM 僅僅被構(gòu)造是不會執(zhí)行的，只有添加到主節(jié)點被渲染時才會執(zhí)行。所以這個過程中間，可以實施安全掃描。

實現(xiàn)細節(jié)可以參考：http://www.etherdream.com/FunnyScript/richtextsaferender.html

如果富文本是直接輸入到靜態(tài)頁面里的，可以考慮使用 MutationEvent 進行防御。詳細參考：http://fex.baidu.com/blog/2014/06/xss-frontend-firewall-2/

但推薦使用動態(tài)方式進行渲染，可擴展性更強，并且性能消耗最小。

跳轉(zhuǎn) opener 釣魚

瀏覽器提供了一個 opener 屬性，供彈出的窗口訪問來源頁。但該規(guī)范設(shè)計的并不合理，導(dǎo)致通過超鏈接打開的頁面，也能使用 opener。

因此，用戶點了網(wǎng)站里的超鏈接，導(dǎo)致原頁面被打開的第三方頁面控制。

雖然兩者受到同源策略的限制，第三方無法訪問原頁面內(nèi)容，但可以跳轉(zhuǎn)原頁面。

由于用戶的焦點在新打開的頁面上，所以原頁面被悄悄跳轉(zhuǎn)，用戶難以覺察到。當(dāng)用戶切回原頁面時，其實已經(jīng)在另一個釣魚網(wǎng)站上了。

案例演示

百度貼吧目前使用的超鏈接，就是在新窗口中彈出，因此同樣存在該缺陷。

攻擊者發(fā)一個吸引用戶的帖子。當(dāng)用戶進來時，引誘他們點擊超鏈接。

通常故意放少部分的圖片，或者是不會動的動畫，先讓用戶預(yù)覽一下。要是用戶想看完整的，就得點下面的超鏈接：

由于擴展名是 gif 等圖片格式，大多用戶就毫無顧慮的點了。

事實上，真正的類型是由服務(wù)器返回的 MIME 決定的。所以這個站外資源完全有可能是一個網(wǎng)頁：

當(dāng)用戶停留在新頁面里看動畫時，隱匿其中的腳本已悄悄跳轉(zhuǎn)原頁面了。

用戶切回原頁面時，其實已在一個釣魚網(wǎng)站上：

在此之上，加些浮層登錄框等特效，很有可能釣到用戶的一些賬號信息。

防范措施

該缺陷是因為 opener 這個屬性引起的，所以得屏蔽掉新頁面的這個屬性。

但通過超鏈接打開的網(wǎng)頁，無法被腳本訪問到。只有通過 window.open 彈出的窗口，才能獲得其對象。

所以，對頁面中的用戶發(fā)布的超鏈接，監(jiān)聽其點擊事件，阻止默認的彈窗行為，而是用 window.open 代替，并將返回窗體的 opener 設(shè)置為 null，即可避免第三方頁面篡改了。

詳細實現(xiàn)參考：http://www.etherdream.com/FunnyScript/opener_protect.html

當(dāng)然，實現(xiàn)中無需上述 Demo 那樣復(fù)雜。根據(jù)實際產(chǎn)品線，只要監(jiān)聽用戶區(qū)域的超鏈接就可以。

用戶內(nèi)容權(quán)限

支持自定義裝扮的場合，往往是釣魚的高發(fā)區(qū)。

一些別有用心者，利用裝扮來模仿系統(tǒng)界面，引誘用戶上鉤。

案例演示 - 空間越界

百度空間允許用戶撰寫自定格式的內(nèi)容。

其本質(zhì)是一個富文本編輯器，這里不演示 XSS 漏洞，而是利用樣式裝扮，偽裝一個釣魚界面。

百度空間富文本過濾元素、部分屬性及 CSS 樣式，但未對 class 屬性啟用白名單，因此可以將頁面上所有的 CSS 類樣式，應(yīng)用到自己的內(nèi)容上來。

防范措施

規(guī)定用戶內(nèi)容尺寸限制，可以在提交時由用戶自己確定。

不應(yīng)該為用戶的內(nèi)容分配無限的尺寸空間，以免惡意用戶設(shè)置超大字體，破壞整個頁面的瀏覽。

最好將用戶自定義的內(nèi)容嵌套在 iframe 里，以免影響到頁面其他部位。

如果必須在同頁面，應(yīng)將用戶內(nèi)容所在的容器，設(shè)置超過部分不可見。以免因不可預(yù)測的 BUG，導(dǎo)致用戶能將內(nèi)容越界到產(chǎn)品界面上。

案例演示 - 功能越界

自定義裝扮通常支持站外超鏈接。

相比貼吧這類簡單純文字，富文本可以將超鏈接設(shè)置在其他元素上，例如圖片。

因此這類鏈接非常具有迷惑性，用戶不經(jīng)意間就點擊到。很容易觸發(fā)之前提到的修改 opener 釣魚。

如果在圖片內(nèi)容上進行偽裝，更容易讓用戶觸發(fā)一些危險操作。

要是和之前的區(qū)域越界配合使用，迷惑性則更強：

防范措施

和之前一樣，對于用戶提供的超鏈接，在點擊時進行掃描。如果是站外地址，則通過后臺跳轉(zhuǎn)進入，以便后端對 URL 進行安全性掃描。

如果服務(wù)器檢測到是一個惡意網(wǎng)站，或者目標資源是可執(zhí)行文件，應(yīng)給予用戶強烈的警告，告知其風(fēng)險。

點擊劫持檢測

點擊劫持算是比較老的攻擊方式了，基本原理大家也都聽說過。就是在用戶不知情的前提下，點擊隱藏框架頁面里的按鈕，觸發(fā)一些重要操作。

但目前在點擊劫持上做防御的并不多，包括百度絕大多數(shù)產(chǎn)品線目前都未考慮。

案例演示

能直接通過點擊完成的操作，比較有意義的就是關(guān)注某用戶。例如百度貼吧加關(guān)注的按鈕：

攻擊者事先算出目標按鈕的尺寸和坐標，將頁面嵌套在自己框架里，并設(shè)置框架的偏移，最終只顯示按鈕：

接著通過 CSS 樣式，將目標按鈕放大，占據(jù)整個頁面空間，并設(shè)置全透明。

這時雖看不到按鈕，但點擊頁面任意位置，都能觸發(fā)框架頁中加關(guān)注按鈕的點擊：

防范措施

事實上，點擊劫持是很好防御的。

因為自身頁面被嵌套在第三方頁面里，只需判斷 self == top 即可獲知是否被嵌套。

對一些重要的操作，例如加關(guān)注、刪帖等，應(yīng)先驗證是否被嵌套。如果處于第三方頁面的框架里，應(yīng)彈出確認框提醒用戶。

確認框的坐標位置最好有一定的隨機偏移，從而使攻擊者構(gòu)造的點擊區(qū)域失效。

作者：zjcqoo (http://cnblogs.com/index-html)?-?Hello

總結(jié)

以上是生活随笔為你收集整理的Web 前端攻防（2014版）-baidu ux前端研发部的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。