Web前端攻防

0x00 禁止一切外鏈資源

---

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

目前國內有大量路由器存在 CSRF 漏洞，其中相當部分使用者使用預設的管理賬號。透過外鏈圖片，即可發起對路由器 DNS 配置的修改，這將成為國內網際網路最大的安全隱患。

案例演示

百度旅遊在富文字過濾時，未考慮標籤的 style 屬性，導致允許使用者自定義的 CSS。因此可以插入站外資源：

所有瀏覽該頁面的使用者，都能發起任意 URL 的請求：

由於站外伺服器完全不受控制，攻擊者可以控制返回內容： 如果檢測到是管理員，或者外鏈檢查伺服器，可以返回正常圖片； 如果是普通使用者，可以返回 302 重定向到其他 URL，發起 CSRF 攻擊。例如修改路由器 DNS：

http://admin:[email protected]/userRpm/PPPoECfgAdvRpm.htm?wan=0&lcpMru=1480&ServiceName=&AcName=&EchoReq=0&manual=2&dnsserver=駭客伺服器&dnsserver2=4.4.4.4&downBandwidth=0&upBandwidth=0&Save=%B1%A3+%B4%E6&Advanced=Advanced

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

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

要是在熱帖裡『火前留名』，那麼數量遠不止這些。

如果使用發帖指令碼批次回復，將有數以萬計的使用者網路被劫持。

防範措施

杜絕使用者的一切外鏈資源。需要站外圖片，可以抓回後儲存在站內伺服器裡。 對於富文字內容，使用白名單策略，只允許特定的 CSS 屬性。 儘可能開啟 Content Security Policy 配置，讓瀏覽器底層來實現站外資源的攔截。

0x01 富文字前端掃描

---

富文字是 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/

但推薦使用動態方式進行渲染，可擴充套件性更強，並且效能消耗最小。

0x02 跳轉 opener 釣魚

---

瀏覽器提供了一個 opener 屬性，供彈出的視窗訪問來源頁。但該規範設計的並不合理，導致透過超連結開啟的頁面，也能使用 opener。

因此，使用者點了網站裡的超連結，導致原頁面被開啟的第三方頁面控制。

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

由於使用者的焦點在新開啟的頁面上，所以原頁面被悄悄跳轉，使用者難以覺察到。當使用者切回原頁面時，其實已經在另一個釣魚網站上了。

案例演示

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

攻擊者發一個吸引使用者的帖子。當使用者進來時，引誘他們點選超連結。

通常故意放少部分的圖片，或者是不會動的動畫，先讓使用者預覽一下。要是使用者想看完整的，就得點下面的超連結：

由於副檔名是 gif 等圖片格式，大多使用者就毫無顧慮的點了。

事實上，真正的型別是由伺服器返回的 MIME 決定的。所以這個站外資源完全有可能是一個網頁：

當使用者停留在新頁面裡看動畫時，隱匿其中的指令碼已悄悄跳轉原頁面了。

使用者切回原頁面時，其實已在一個釣魚網站上：

在此之上，加些浮層登入框等特效，很有可能釣到使用者的一些賬號資訊。

防範措施

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

但透過超連結開啟的網頁，無法被指令碼訪問到。只有透過 window.open 彈出的視窗，才能獲得其物件。

所以，對頁面中的使用者釋出的超連結，監聽其點選事件，阻止預設的彈窗行為，而是用 window.open 代替，並將返回窗體的 opener 設定為 null，即可避免第三方頁面篡改了。

詳細實現參考：http://www.etherdream.com/FunnyScript/opener_protect.html

當然，實現中無需上述 Demo 那樣複雜。根據實際產品線，只要監聽使用者區域的超連結就可以。

0x03 使用者內容許可權

---

支援自定義裝扮的場合，往往是釣魚的高發區。

一些別有用心者，利用裝扮來模仿系統介面，引誘使用者上鉤。

案例演示 - 空間越界

百度空間允許使用者撰寫自定格式的內容。

其本質是一個富文字編輯器，這裡不演示 XSS 漏洞，而是利用樣式裝扮，偽裝一個釣魚介面。

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

防範措施

規定使用者內容尺寸限制，可以在提交時由使用者自己確定。

不應該為使用者的內容分配無限的尺寸空間，以免惡意使用者設定超大字型，破壞整個頁面的瀏覽。

最好將使用者自定義的內容巢狀在 iframe 裡，以免影響到頁面其他部位。

如果必須在同頁面，應將使用者內容所在的容器，設定超過部分不可見。以免因不可預測的 BUG，導致使用者能將內容越界到產品介面上。

案例演示 - 功能越界

自定義裝扮通常支援站外超連結。

相比貼吧這類簡單純文字，富文字可以將超連結設定在其他元素上，例如圖片。

因此這類連結非常具有迷惑性，使用者不經意間就點選到。很容易觸發之前提到的修改 opener 釣魚。

如果在圖片內容上進行偽裝，更容易讓使用者觸發一些危險操作。

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

防範措施

和之前一樣，對於使用者提供的超連結，在點選時進行掃描。如果是站外地址，則透過後臺跳轉進入，以便後端對 URL 進行安全性掃描。

如果伺服器檢測到是一個惡意網站，或者目標資源是可執行檔案，應給予使用者強烈的警告，告知其風險。

0x04 點選劫持檢測

---

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

但目前在點選劫持上做防禦的並不多，包括百度絕大多數產品線目前都未考慮。

案例演示

能直接透過點選完成的操作，比較有意義的就是關注某使用者。例如百度貼吧加關注的按鈕：

攻擊者事先算出目標按鈕的尺寸和座標，將頁面巢狀在自己框架裡，並設定框架的偏移，最終只顯示按鈕：

接著透過 CSS 樣式，將目標按鈕放大，佔據整個頁面空間，並設定全透明。

這時雖看不到按鈕，但點選頁面任意位置，都能觸發框架頁中加關注按鈕的點選：

防範措施

事實上，點選劫持是很好防禦的。

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

對一些重要的操作，例如加關注、刪帖等，應先驗證是否被巢狀。如果處於第三方頁面的框架裡，應彈出確認框提醒使用者。

確認框的座標位置最好有一定的隨機偏移，從而使攻擊者構造的點選區域失效。