簡介

當涉及應用程序的用戶界面（UI）時，人們關心的往往是美觀、設計的一致性、簡單性和清晰性。然而，像瀏覽器這樣的應用程序，不僅需要加載、解析不受信任的內容，而且還需要提供相應的API來調用各種UI，這時，該類應用程序就會面臨一個新的關注點：設計安全的UI。

多年來，瀏覽器的用戶界面已經在網絡釣魚活動和技術支持詐騙等攻擊活動中被濫用。通常來說，這些攻擊的目標并不是在受害者的機器上執行代碼，而是獲得受害者的信任并引誘（或恐嚇）他們撥打一個號碼。這類技術通常被稱為社會工程攻擊，它們很難被完全緩解，因為任何不受信任的頁面都可以隨意顯示任何圖像。即使如此，確保瀏覽器的用戶界面不為此類攻擊提供便利也是很重要的。正如我們將看到的，不安全的用戶界面設計甚至會導致用戶私人信息泄露，例如信用卡、密碼和地址。除了這些邏輯上的安全問題之外，我們還將看到，像任何大型的C++項目一樣，即使在用戶界面代碼中也可能存在內存安全漏洞。

在這篇文章中，我們首先為讀者介紹如何發現UI中的安全漏洞，然后討論一些已發現的UI安全漏洞。

UI安全檢查表

在評估一個給定的用戶界面是否安全時，要問自己以下一組問題。通常需要通過以下多項檢查，才能確定一個可濫用的用戶界面安全漏洞。

是否覆蓋可見視區（又稱死亡線）？

a. 瀏覽器提示（想想警報框、權限提示等）應該總是允許跨過死亡線，以表明它們是合法的，并且來自于瀏覽器。這是為了確保用戶界面無法被網頁元素所冒充，因為網頁無法（或不應該）使用JS/HTML/CSS越過死亡線。


b. 另一方面，網頁的用戶界面（例如自動填充項、下拉選擇器、顏色選擇器等）不應該跨越死亡線。相反，我們應該確保它們只出現在可見視區內。這是為了確保網頁不能覆蓋重要的瀏覽器UI（omnibox、shyUI和權限提示）或使網頁能夠冒充瀏覽器UI。

向下滾動一下，再次激活自動填充，我們將看到：

這種設計就不安全；正確的行為應該是這樣的：

注：另外，頁面可以向上滾動，然后顯示自動填寫的用戶界面。

是否包含不受信任的內容？

如果用戶界面中顯示的文本或圖像受到不受信任的外部來源（通常是被訪問的網頁）的影響，那么用戶界面應該清楚地表明這一區別，使得最終用戶能夠分辨出哪些內容是瀏覽器所展示的，哪些內容是網頁所展示的。

例如，讓我們來看看Javascript的提示框。它是一個瀏覽器的提示組件，呈現的是網頁提供的文本；在這里，還確保在最上面指出“example.tld says:”，從而讓用戶清楚地知道，該字符串之后的文本來自網站，而不是瀏覽器。此外，這些提示框應該禁止在跨源frame內調用，否則就有可能被用于欺騙用戶。

上圖中，所有紅色的內容都是不可信任的。下面，我們分別進行介紹：

· 標簽頁標題：從網頁中提取的不可信的文本，需要進行相應的安全檢查，如確保標題中沒有換行操作從而導致文本顯示在其預期的文本框之外。確保沒有HTML被呈現在這里。這也是渲染網站的favicon的地方，所以要確保圖像被安全地渲染和顯示，以便能夠在任何圖像處理的內存損壞的情況下，也不會影響瀏覽器的進程。

· 地址欄：任何瀏覽器的重要部分，所有用戶都依靠它來知道他們在什么網站上。由于這個URL是從一個不受信任的來源取得的，因此需要特別小心，以確保它能清楚地顯示給最終用戶。

· 警報的源：域名是不可信任的，應該進行一些安全檢查，以確保域名是無害的。

· 警報文本：這是在瀏覽器用戶界面上顯示的文字，它來自不可信任的頁面。這里應進行與（1）相同的檢查。

· 網頁內容：這是網頁的內容；這里沒有任何東西是可以信任的。

當前焦點是否位于危險的按鈕/選項上？

如果用戶界面要求用戶在不同的選項中做出選擇，那么它應該總是將焦點默認放到最不危險的選項上。或者說，根本就不應該給任何東西以默認的焦點。例如，允許網頁訪問用戶的地理位置的權限的提示將顯示兩個選項：“Allow”和“Block”。如果在提示出現后立即按回車鍵的話，那么，我們就會發現，將會選中“Block”選項。

否則，如果默認的焦點是在一個危險的選項上，攻擊者就可以利用這一點來誘騙用戶選中這一項。攻擊者通常的手法是，先讓用戶按下回車鍵，然后再顯示提示內容。

這里就是一個這種類型的安全漏洞，并且該漏洞影響多種瀏覽器。

能被多次調用嗎？

如果用戶界面可以根據網頁的需求進行顯示，那么應該確保它不能在短時間內重復顯示。這是為了防止網絡釣魚頁面重復調用UI，使其以一種會迷惑或恐嚇用戶的方式出現，在最壞的情況下，能夠讓用戶陷入惡意頁面中。

能否在沒有用戶手勢（user gesture）的情況下調用？

有時，用戶界面需要在沒有用戶手勢的情況下出現（出于人體工程學的考慮）；如果沒有這種需要的話，最好只在用戶明確發出鼠標/鍵盤/其他手勢的情況下才允許其顯示。此外，確保用戶界面的顯示基于用戶的手勢，也有助于減少任何進一步的濫用（如手勢清洗等技巧）。換句話說，每一個顯示的用戶界面都對應于一個手勢。

如果發現這樣一個易受攻擊的用戶界面，那么攻擊者可以利用它來困住用戶，阻止他們離開網站。如果再加上(4)，可能會導致整臺機器都無法正常使用。

UI安全漏洞

當涉及到未能通過(1.a)/(1.b)檢查表的漏洞時，通常是由于對可見視區的計算錯誤所致。

在下面的可見視區中，具有一個紅色邊框：
否則，如果默認的焦點是在一個危險的選項上，攻擊者就可以利用這一點來誘騙用戶選中這一項。攻擊者通常的手法是，先讓用戶按下回車鍵，然后再顯示提示內容。

這里就是一個這種類型的安全漏洞，并且該漏洞影響多種瀏覽器。

能被多次調用嗎？

如果用戶界面可以根據網頁的需求進行顯示，那么應該確保它不能在短時間內重復顯示。這是為了防止網絡釣魚頁面重復調用UI，使其以一種會迷惑或恐嚇用戶的方式出現，在最壞的情況下，能夠讓用戶陷入惡意頁面中。

能否在沒有用戶手勢（user gesture）的情況下調用？

有時，用戶界面需要在沒有用戶手勢的情況下出現（出于人體工程學的考慮）；如果沒有這種需要的話，最好只在用戶明確發出鼠標/鍵盤/其他手勢的情況下才允許其顯示。此外，確保用戶界面的顯示基于用戶的手勢，也有助于減少任何進一步的濫用（如手勢清洗等技巧）。換句話說，每一個顯示的用戶界面都對應于一個手勢。

如果發現這樣一個易受攻擊的用戶界面，那么攻擊者可以利用它來困住用戶，阻止他們離開網站。如果再加上(4)，可能會導致整臺機器都無法正常使用。

UI安全漏洞

當涉及到未能通過(1.a)/(1.b)檢查表的漏洞時，通常是由于對可見視區的計算錯誤所致。

在下面的可見視區中，具有一個紅色邊框：

向下滾動時，可見視區也是如此。文檔中不可見的部分絕對不應該被視為可見視區：

但是，我們正在處理的是具有訪問CSS以及將frame嵌入其他文檔的能力的Web內容。下面，讓我們看第一個相關的例子。

CVE-2020-15985：繞過光標劫持緩解措施

實際上，鼠標光標也是一個UI，就像其他的UI一樣，網頁可以自動用一個自定義的圖像來替換該光標。實際上，這一功能曾經被攻擊者濫用，通過冒充真實的鼠標位置來誘騙用戶。

因此，相關廠商發布了以下的更新：

“[棄用]對于尺寸大于32x32 DIP的自定義光標，由于能夠橫貫本機UI，所以將其禁用，并將于2019年6月左右，在M75中將其刪除。更多細節，請訪問https://www.chromestatus.com/features/5825971391299584”。

換句話說，如果一個網頁用大于32x32的自定義圖片代替光標，那么這個自定義圖片就不能以欺騙用戶的方式進入瀏覽器的本地用戶界面。一些像素被允許覆蓋其他像素，但這些并不足以造成任何欺騙性的攻擊。

然而，人們發現，當Chromium計算什么是本地瀏覽器用戶界面與什么是可見的網頁內容時，有可能通過讓一個iframe托管一個取代光標的頁面，然后使用CSS使該frame開始于主frame的可見視區之上來有效地繞過上面的緩解措施。

< iframe src=“large-custom-cursor.html”
style=“width:700px;height:1000px;position:absolute;top:-100px;left:-100px;” >

這個PoC使瀏覽器認為可見視區（紅色）如下所示：

進行必要的修改，以確保瀏覽器會考慮頂層的frame的可見視區。這個漏洞是之前討論的檢查表中的一個例子（1.b）。

與自動填充UI相關的安全漏洞

讀者可能已經注意到并在某些時候用過的一個功能是自動填充功能。假設你在“A”網站注冊了一個賬戶，并提供了一些基本信息，如用戶名和密碼。之后，當您去登錄B站時，從A站輸入的同樣的用戶名會作為自動填寫的建議而出現。

CVE-2021-21215：偽造瀏覽器用戶界面

自動填充建議的用戶界面不應該覆蓋瀏覽器的用戶界面，這一點在前面的檢查表（1.b）中已經講過。然而，事實證明，攻擊者的確能夠讓它顯示在瀏覽器原生UI之上，并覆蓋瀏覽器的重要部分。但僅僅這一點本身而言，并不是一個巨大的安全問題。

從攻擊者的角度來看，要想濫用自動填充用戶界面，需要解決下面幾個問題：

1.只顯示以前提交的表單中保存的條目。

2.當用戶與瀏覽器或網頁進行交互時消失。

3.只在用戶與表單/輸入元素互動時出現。

我們可以通過簡單地要求用戶點擊惡意網頁上的任何位置來解決問題（3）。另外，輸入元素可以是透明的，并覆蓋整個頁面。這樣，在頁面上的任何點擊都將激活顯示自動填充下拉UI的機制。

qf.style=“opacity:1”;
qa.style=“width:100%;height:1000px;display:block;position:absolute;”;

對于問題（1）來說，解決起來出奇的簡單：只需要借助于一個帶有假表單的iframe，讓它使用Javascript來填充自己，然后執行formElement.submit()提交到隨機的URL即可。這樣，我們就可以自如地控制下拉式自動填充建議UI中顯示的內容。

let aframe = document.createElement("iframe");aframe.src = "#faker";aframe.style = "width:2px;height:3px;opacity:0.1";aframe["data-id"] = msgs;iframes[msgs] = false;msgs += 1;document.body.appendChild(aframe);aframe.onload = (e) = > {if (e.target.contentWindow.location.search.length < = 10) {e.target.contentWindow.eval(`qb.value="pass1223"var thing="${str}";var i=0;var ger=0;ger=setInterval(g= >{qa.value+=thing[i];i++;if(thing.length==i){window.clearInterval(ger);qf.submit()}},20)`);} else {iframes[e.target["data-id"]] = true;}}; } setTimeout((g) = > {qa.type = "button"; }, 100);for (q in this) {if (q.indexOf("on") == 0) {this[q] = (e) = > {if (e.type == "keydown") {qtext.value += e.key;}qa.focus();qa.click();return false;};} }

將上面的代碼綜合起來，就得到最終的PoC，其效果如下所示：

演示視頻：https://youtu.be/GJiwBrAAuEQ

原始PoC的可以從這里找到。

在Edge瀏覽器上，這看起來不那么令人信服，因為它的自動填充UI清楚地表明了它的目的是什么（類似于警報框）。然而，這仍然是值得解決的問題。

因此，利用自動填寫功能中的一連串微小的UI錯誤，我們就能夠創自己的本地瀏覽器UI，并顯示我們指定的任意信息。這里的PoC還表明，如果用戶被騙并輸入密碼，那么，攻擊者還可以提取鍵盤數據。

但是，等等，還有更多問題!

小結

在本文中，我們將與讀者一道，深入考察瀏覽器中與UI相關的安全漏洞。由于篇幅較長，所以分為上下兩篇發表，更多精彩內容，敬請期待！

【白嫖網絡安全資料】

總結

以上是生活随笔為你收集整理的进一步考察与UI相关的安全漏洞-上的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。