Web 前端攻防（2014版）-baidu ux前端研发部
http://fex.baidu.com/articles/page2/
Web 前端攻防（2014版）
zjcqoo | 20 Jun 2014禁止一切外鏈資源
外鏈會產生站外請求，因此可以被利用實施 CSRF 攻擊。
目前國內有大量路由器存在 CSRF 漏洞，其中相當部分用戶使用默認的管理賬號。通過外鏈圖片，即可發起對路由器 DNS 配置的修改，這將成為國內互聯網最大的安全隱患。
案例演示
百度旅游在富文本過濾時，未考慮標簽的 style 屬性，導致允許用戶自定義的 CSS。因此可以插入站外資源：
所有瀏覽該頁面的用戶，都能發起任意 URL 的請求：
由于站外服務器完全不受控制，攻擊者可以控制返回內容：
-
如果檢測到是管理員，或者外鏈檢查服務器，可以返回正常圖片；
-
如果是普通用戶，可以返回 302 重定向到其他 URL，發起 CSRF 攻擊。例如修改路由器 DNS：
演示中，隨機測試了幾個帖子，在兩天時間里收到圖片請求 500 多次，已有近 10 個不同的 IP 開始向我們發起 DNS 查詢。
通過中間人代理，用戶的所有隱私都能被捕捉到。還有更嚴重的后果，查考流量劫持危害探討
要是在熱帖里『火前留名』，那么數量遠不止這些。
如果使用發帖腳本批量回復，將有數以萬計的用戶網絡被劫持。
防范措施
杜絕用戶的一切外鏈資源。需要站外圖片，可以抓回后保存在站內服務器里。
對于富文本內容，使用白名單策略，只允許特定的 CSS 屬性。
盡可能開啟 Content Security Policy 配置，讓瀏覽器底層來實現站外資源的攔截。
富文本前端掃描
富文本是 XSS 的重災區。
富文本的實質是一段 HTML 字符。由于歷史原因，HTML 兼容眾多不規范的用法，導致過濾起來較復雜。幾乎所有使用富文本的產品，都曾出現過 XSS 注入。
案例演示
旅游發帖支持富文本，我們繼續剛才的演示。
由于之前已修復過幾次，目前只能注入 embed 標簽和 src 屬性。
但即使這樣，仍然可以嵌入一個框架頁面：
因為是非同源執行的 XSS，所以無法獲取主頁面的信息。但是可以修改 top.location，將頁面跳轉到第三方站點。
將原頁面嵌入到全屏的 iframe 里，偽造出相同的界面。然后通過浮層登錄框，進行釣魚。
總之，富文本中出現可執行的元素，頁面安全性就大打折扣了。
防范措施
這里不考慮后端的過濾方法，講解使用前端預防方案：
無論攻擊者使用各種取巧的手段，繞過后端過濾，但這些 HTML 字符最終都要在前端構造成元素，并渲染出來。
因此可以在 DOM 構造之后、渲染之前，對離屏的元素進行風險掃描。將可執行的元素（script，iframe，frame，object，embed，applet）從緩存中移除。
或者給存在風險的元素，加上沙箱隔離屬性。
-
例如 iframe 加上?sandbox?屬性，即可只顯示框架內容而不運行腳本
-
例如 Flash 加上?allowScriptAccess?及?allowNetworking，也能起到一定的隔離作用。
DOM 僅僅被構造是不會執行的，只有添加到主節點被渲染時才會執行。所以這個過程中間，可以實施安全掃描。
實現細節可以參考：http://www.etherdream.com/FunnyScript/richtextsaferender.html
如果富文本是直接輸入到靜態頁面里的，可以考慮使用 MutationEvent 進行防御。詳細參考：http://fex.baidu.com/blog/2014/06/xss-frontend-firewall-2/
但推薦使用動態方式進行渲染，可擴展性更強，并且性能消耗最小。
跳轉 opener 釣魚
瀏覽器提供了一個 opener 屬性，供彈出的窗口訪問來源頁。但該規范設計的并不合理，導致通過超鏈接打開的頁面，也能使用 opener。
因此，用戶點了網站里的超鏈接，導致原頁面被打開的第三方頁面控制。
雖然兩者受到同源策略的限制，第三方無法訪問原頁面內容，但可以跳轉原頁面。
由于用戶的焦點在新打開的頁面上，所以原頁面被悄悄跳轉，用戶難以覺察到。當用戶切回原頁面時，其實已經在另一個釣魚網站上了。
案例演示
百度貼吧目前使用的超鏈接，就是在新窗口中彈出，因此同樣存在該缺陷。
攻擊者發一個吸引用戶的帖子。當用戶進來時，引誘他們點擊超鏈接。
通常故意放少部分的圖片，或者是不會動的動畫，先讓用戶預覽一下。要是用戶想看完整的，就得點下面的超鏈接：
由于擴展名是 gif 等圖片格式，大多用戶就毫無顧慮的點了。
事實上，真正的類型是由服務器返回的 MIME 決定的。所以這個站外資源完全有可能是一個網頁：
當用戶停留在新頁面里看動畫時，隱匿其中的腳本已悄悄跳轉原頁面了。
用戶切回原頁面時，其實已在一個釣魚網站上：
在此之上，加些浮層登錄框等特效，很有可能釣到用戶的一些賬號信息。
防范措施
該缺陷是因為 opener 這個屬性引起的，所以得屏蔽掉新頁面的這個屬性。
但通過超鏈接打開的網頁，無法被腳本訪問到。只有通過 window.open 彈出的窗口，才能獲得其對象。
所以，對頁面中的用戶發布的超鏈接，監聽其點擊事件，阻止默認的彈窗行為，而是用 window.open 代替，并將返回窗體的 opener 設置為 null，即可避免第三方頁面篡改了。
詳細實現參考：http://www.etherdream.com/FunnyScript/opener_protect.html
當然，實現中無需上述 Demo 那樣復雜。根據實際產品線，只要監聽用戶區域的超鏈接就可以。
用戶內容權限
支持自定義裝扮的場合，往往是釣魚的高發區。
一些別有用心者，利用裝扮來模仿系統界面，引誘用戶上鉤。
案例演示 - 空間越界
百度空間允許用戶撰寫自定格式的內容。
其本質是一個富文本編輯器，這里不演示 XSS 漏洞，而是利用樣式裝扮，偽裝一個釣魚界面。
百度空間富文本過濾元素、部分屬性及 CSS 樣式，但未對 class 屬性啟用白名單，因此可以將頁面上所有的 CSS 類樣式，應用到自己的內容上來。
防范措施
規定用戶內容尺寸限制，可以在提交時由用戶自己確定。
不應該為用戶的內容分配無限的尺寸空間，以免惡意用戶設置超大字體，破壞整個頁面的瀏覽。
最好將用戶自定義的內容嵌套在 iframe 里，以免影響到頁面其他部位。
如果必須在同頁面，應將用戶內容所在的容器，設置超過部分不可見。以免因不可預測的 BUG，導致用戶能將內容越界到產品界面上。
案例演示 - 功能越界
自定義裝扮通常支持站外超鏈接。
相比貼吧這類簡單純文字，富文本可以將超鏈接設置在其他元素上，例如圖片。
因此這類鏈接非常具有迷惑性，用戶不經意間就點擊到。很容易觸發之前提到的修改 opener 釣魚。
如果在圖片內容上進行偽裝，更容易讓用戶觸發一些危險操作。
要是和之前的區域越界配合使用，迷惑性則更強：
防范措施
和之前一樣，對于用戶提供的超鏈接，在點擊時進行掃描。如果是站外地址，則通過后臺跳轉進入，以便后端對 URL 進行安全性掃描。
如果服務器檢測到是一個惡意網站，或者目標資源是可執行文件，應給予用戶強烈的警告，告知其風險。
點擊劫持檢測
點擊劫持算是比較老的攻擊方式了，基本原理大家也都聽說過。就是在用戶不知情的前提下，點擊隱藏框架頁面里的按鈕，觸發一些重要操作。
但目前在點擊劫持上做防御的并不多，包括百度絕大多數產品線目前都未考慮。
案例演示
能直接通過點擊完成的操作，比較有意義的就是關注某用戶。例如百度貼吧加關注的按鈕：
攻擊者事先算出目標按鈕的尺寸和坐標，將頁面嵌套在自己框架里，并設置框架的偏移，最終只顯示按鈕：
接著通過 CSS 樣式，將目標按鈕放大，占據整個頁面空間，并設置全透明。
這時雖看不到按鈕，但點擊頁面任意位置，都能觸發框架頁中加關注按鈕的點擊：
防范措施
事實上，點擊劫持是很好防御的。
因為自身頁面被嵌套在第三方頁面里，只需判斷 self == top 即可獲知是否被嵌套。
對一些重要的操作，例如加關注、刪帖等，應先驗證是否被嵌套。如果處于第三方頁面的框架里，應彈出確認框提醒用戶。
確認框的坐標位置最好有一定的隨機偏移，從而使攻擊者構造的點擊區域失效。
作者：zjcqoo (http://cnblogs.com/index-html)?-?Hello總結
以上是生活随笔為你收集整理的Web 前端攻防（2014版）-baidu ux前端研发部的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： VGA时序描述
- 下一篇： xilinx FPGA的远程更新（动态加