SVG点击劫持攻击深度解析：利用滤镜技术窃取数据与交互控制

点击劫持（Clickjacking）是一种经典的网络攻击手法，攻击者通过将恶意网站的透明层覆盖在目标网页的交互元素之上，诱骗用户在不知意的情况下进行操作。传统点击劫持在实现复杂多步交互时存在明显局限。

一种被称为“SVG点击劫持”的新技术，能够突破这些限制。它利用SVG滤镜的强大功能，不仅可以创建复杂的交互式攻击界面，还能实现多种形式的数据泄露，将点击劫持攻击提升到了一个新的维度。

液态SVG带来的灵感

在苹果发布“液态玻璃”设计后，我尝试仅用CSS和SVG滤镜在网页上复现其折射效果。令人惊讶的是，这一套依赖feColorMatrix和feDisplacementMap的复杂效果，竟然能作用于跨域的iframe之上。

这一发现引出了关键问题：是否所有SVG滤镜元素都能在iframe上生效？答案是肯定的。这意味着我们可以将一整套图形处理工具应用于目标页面，并以此为基础构建攻击。

攻击的基础构建模块

SVG滤镜接收输入图像，经过一系列<fe*>元素处理，输出新图像。通过串联这些元素，我们可以组合出强大的图形“原语”。以下是一些核心滤镜元素：

• <feImage>：加载图像。
• <feFlood>：绘制纯色矩形。
• <feOffset>：移动图像。
• <feDisplacementMap>：根据映射图移动像素（实现扭曲效果）。
• <feGaussianBlur>：模糊图像。
• <feTile>：平铺或裁剪图像。
• <feMorphology>：扩张或腐蚀图像区域。
• <feBlend>：按模式混合两个输入。
• <feComposite>：合成工具，可用于Alpha遮罩或像素级数学计算。
• <feColorMatrix>：应用颜色矩阵，可进行通道交换或亮度调整。

示例1：伪造验证码界面

我们可以利用feDisplacementMap对iframe内的文本（如敏感代码）进行扭曲，使其看起来像一个需要用户输入的验证码，从而诱使用户泄露信息。

<iframe src="..." style="filter:url(#captchaFilter)"></iframe>
<svg>
  <filter id="captchaFilter">
    <feTurbulence type="turbulence" baseFrequency="0.03" numOctaves="4" result="turbulence" />
    <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="6" xChannelSelector="R" yChannelSelector="G" />
  </filter>
</svg>

示例2：隐藏界面提示文字

当需要诱导用户与输入框交互时，可以隐藏灰色的占位符文本和错误提示。核心步骤是使用feComposite的算术模式增强亮度，并结合feTile、feMorphology和feBlend创建遮罩，最终只保留用户输入的黑字。

一个完整的滤镜链可以将目标输入框“重塑”成攻击者设计的样式，同时保持其完全可交互。

像素读取与条件逻辑

最强大的攻击手段之一是读取iframe中的像素颜色，并基于此执行逻辑。虽然数据无法直接导出到JavaScript，但在滤镜内部，我们可以实现条件判断。

例如，检测用户是否点击了某个颜色区域，并据此切换模糊效果：

1. 使用feTile裁剪并平铺目标像素，使整个画面变为该颜色。
2. 利用feComposite的算术模式将颜色转换为纯黑或纯白的二值图像。
3. 将此二值图像转换为Alpha遮罩，控制feGaussianBlur等效果的启用与禁用。

通过结合feBlend的difference模式，我们可以比较颜色，实现对任意颜色或纹理的像素状态检测。

实现逻辑门与复杂攻击流程

通过组合上述像素读取和混合技术，我们可以在SVG滤镜中重建AND、OR、NOT、XOR等所有基本逻辑门。这意味着我们能在滤镜内部“编程”，实现复杂的决策树。

攻击场景举例：诱导用户完成“标记自己已被黑客攻击”的多步操作。

1. 点击按钮打开对话框。
2. 等待对话框加载完毕。
3. 勾选对话框内的复选框。
4. 点击确认按钮。
5. 检查是否出现红色成功文字。

我们可以定义输入信号：D（对话框可见）、L（对话框加载完成）、C（复选框选中）、R（红色文字出现）。攻击逻辑用逻辑门表示为：

(¬D) ∧ (¬R) => 显示伪造的初始按钮
D ∧ (¬L) => 显示伪造的加载界面
D ∧ L ∧ (¬C) => 显示伪造的复选框界面
D ∧ L ∧ C => 显示伪造的确认按钮
(¬D) ∧ R => 显示攻击结束画面

通过SVG滤镜实现上述逻辑，攻击者可以实时监测目标iframe的状态，并动态覆盖上相应的欺骗性界面，引导用户完成整个攻击链。这种响应式的、多步骤的攻击在传统点击劫持下几乎不可能实现。

实战：Google Docs漏洞利用

我将此技术应用于Google Docs，成功构造了一个复杂的攻击链：诱导用户点击“生成文档”，检测弹窗出现后显示伪造的验证码输入框，处理焦点状态、隐藏占位符、检测推荐文档项的出现，并最终引导用户点击提交。

整个流程涉及多个状态检测与界面切换，完全由SVG滤镜逻辑驱动。Google为此漏洞支付了$3133.70的奖金。这证明了该技术在真实世界网络安全威胁中的有效性。

生成动态二维码泄露数据

更进一步，我们甚至可以在SVG滤镜中生成包含窃取数据的动态二维码。攻击流程如下：

1. 从跨域iframe中读取像素并提取数据（例如用户输入的验证码）。
2. 在滤镜内部将数据编码为URL（如 https://attacker.com/?data=...）。
3. 利用feDisplacementMap等滤镜，在滤镜内部渲染出该URL对应的二维码。
4. 诱骗用户扫描此二维码（例如，谎称为反机器人验证）。
5. 用户扫码访问链接后，攻击者服务器即从URL参数中获取到数据。

总结

SVG点击劫持是一种全新的攻击范式，它利用浏览器中强大的SVG滤镜功能，突破了传统点击劫持在交互复杂性和数据泄露方面的限制。攻击者可以：

• 对目标界面进行视觉重塑，隐藏关键信息。
• 读取像素状态并实现复杂的条件逻辑。
• 构建多步骤、响应式的交互攻击流程。
• 甚至生成二维码等方式外泄数据。

这对于前端安全防御提出了新的挑战，开发者需要重新评估iframe嵌入策略及filter样式属性的安全影响。