CSS边信道攻击：利用mix-blend-mode获取用户隐私

1. 攻击概述

这种攻击利用CSS3的mix-blend-mode特性，通过精心构造的网页可以窃取用户在iframe中加载的其他网站（如Facebook）的隐私信息，包括：

• Facebook用户名
• 用户头像（低分辨率版本）
• 用户对特定页面的"喜欢"状态

2. 技术背景

2.1 mix-blend-mode特性

mix-blend-mode是CSS3引入的一个特性，允许开发者控制元素重叠时的混合效果，类似于Photoshop中的混合模式。该特性支持16种混合模式，包括：

• 叠加 (overlay)
• 变暗 (darken)
• 变亮 (lighten)
• 颜色减淡 (color-dodge)
• 正片叠底 (multiply)
• 反转 (invert) 等

2.2 浏览器支持情况

• Chrome：v49+ 全面支持
• Firefox：v59+ 全面支持
• Safari：macOS v11+/iOS 10.3+ 部分支持

3. 攻击原理

3.1 基本思路

攻击者构造一个恶意网页，其中：

1. 嵌入目标网站（如Facebook）的iframe
2. 在iframe上方叠加大量DIV层
3. 每个DIV层使用不同的mix-blend-mode
4. 通过测量渲染时间推断iframe中的像素颜色

3.2 具体实现

1. DIV堆叠技术：

   • 每个DIV是1x1像素的"扫描"层
   • 覆盖iframe的特定像素位置
   • 使用不同的混合模式组合

2. 颜色推断：

   • 不同颜色在不同混合模式下渲染时间不同
   • 通过测量渲染时间可以推断底层像素颜色
   • 逐步"扫描"整个iframe区域重建内容

4. 攻击步骤详解

1. 诱导用户访问恶意网站

   • 通过社交工程或其他方式诱使用户访问攻击者控制的页面

2. 加载目标iframe

   <iframe src="https://www.facebook.com/user_profile"></iframe>
   

3. 构造DIV扫描层

   .scan-layer {
     position: absolute;
     width: 1px;
     height: 1px;
     mix-blend-mode: overlay; /* 或其他混合模式 */
     background-color: #ff0000; /* 测试颜色 */
   }
   

4. 测量渲染时间

   // 伪代码
   function measureRenderingTime(div) {
     const start = performance.now();
     document.body.appendChild(div);
     const end = performance.now();
     return end - start;
   }
   

5. 逐步重建图像

   • 通过移动扫描位置，逐步获取iframe中每个像素的颜色信息
   • 组合所有扫描结果重建完整图像或文本

5. 攻击效果

1. 获取用户名：约20秒
2. 检查喜欢状态：每个页面约500毫秒
3. 获取头像：约20分钟

6. 隐蔽性技术

攻击可以通过以下方式隐藏：

• 将iframe移出可视区域
• 隐藏在其它元素下方
• 伪装成正常内容（如猫图片）
• 结合长阅读或测试延长用户停留时间

7. 防御措施

7.1 浏览器修复

• Chrome 63+ 和 Firefox 60+ 已修复
• 修复方法：将混合模式计算向量化
• Safari不受影响（因其实现已向量化）

7.2 网站防护

1. X-Frame-Options：

   X-Frame-Options: DENY
   

   或

   X-Frame-Options: SAMEORIGIN
   

2. Content Security Policy：

   Content-Security-Policy: frame-ancestors 'none'
   

3. 防止iframe嵌入：

   if (window.top !== window.self) {
     window.top.location = window.self.location;
   }
   

8. 影响范围

所有允许通过iframe嵌入内容的网站都可能受影响，包括但不限于：

• 社交媒体（Facebook、Twitter等）
• 电子邮件服务
• 任何包含用户敏感信息的网站

9. 实际演示

研究人员提供了两个演示示例（已修复）：

1. 获取Facebook用户名和头像
2. 检查用户对特定页面的"喜欢"状态

10. 总结

这种CSS边信道攻击展示了：

• CSS新特性可能带来的安全风险
• 浏览器实现细节对安全的影响
• 跨域信息泄露的新途径
• 现代Web攻击的复杂性和隐蔽性

网站开发者和浏览器厂商都需要关注这类新型攻击，及时采取防护措施。