别再只盯着HTML了：聊聊SVG标签里那些意想不到的XSS攻击姿势
SVG标签中的XSS攻击：被忽视的Web安全盲区
当开发者们谈论XSS攻击时，HTML标签总是首当其冲成为讨论焦点。然而，在Web安全的战场上，SVG这个看似无害的矢量图形格式，却悄然成为了攻击者的新宠。与HTML标签不同，SVG的复杂性和灵活性为XSS攻击提供了独特的切入点，而许多现有的防御机制尚未充分覆盖这一领域。
1. SVG为何成为XSS攻击的理想载体
SVG（可缩放矢量图形）作为一种基于XML的图像格式，在现代Web开发中应用广泛。它能够通过标签直接嵌入HTML文档，也可以作为独立文件引用。正是这种多用途特性，使得SVG成为了XSS攻击的理想载体。
SVG与HTML在XSS攻击面上的关键差异：
- 更宽松的解析规则：浏览器对SVG内容的解析往往比HTML更宽容，特别是在处理脚本和事件属性时
- 多场景嵌入能力：SVG可以通过
<img>、<object>、CSS背景等多种方式引入，每种方式都可能带来不同的安全考量 - 复杂的命名空间：SVG的XML命名空间特性使得某些过滤规则可能失效
提示：许多XSS过滤器主要针对HTML标签设计，对SVG特有的结构和属性缺乏足够防护
下面是一个典型的SVG XSS攻击示例，展示了如何通过<img>标签的src属性触发：
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' onload='alert(1)'/>">2. SVG XSS的四种典型攻击路径
2.1 内联SVG中的事件处理
内联SVG直接嵌入HTML文档，可以像普通HTML元素一样添加事件处理器。由于SVG支持丰富的DOM事件，这为攻击者提供了多种触发点。
常见的内联SVG XSS向量：
<svg xmlns="http://www.w3.org/2000/svg"> <script>alert(document.cookie)</script> </svg> <svg xmlns="http://www.w3.org/2000/svg" onload="alert('XSS')"> <!-- 看似无害的SVG内容 --> </svg>2.2 通过data URI引入的SVG
Data URI方案允许将SVG代码直接编码在URL中，这种方式可以绕过许多基于文件上传的过滤机制。
| 攻击方式 | 示例 | 风险等级 |
|---|---|---|
| 直接嵌入 | <img src="data:image/svg+xml,..."> | 高 |
| CSS引用 | background: url("data:image/svg+xml,...") | 中 |
| iframe加载 | <iframe src="data:image/svg+xml,..."> | 高 |
2.3 SVG文件中的脚本执行
独立的SVG文件同样可以包含恶意脚本，当被浏览器加载时，这些脚本会在当前页面上下文中执行。
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <script type="text/javascript"> alert('恶意脚本已执行'); </script> <!-- 正常SVG内容 --> </svg>2.4 SVG中的XLink和外部资源
SVG支持通过XLink引用外部资源，这种机制也可能被滥用。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="javascript:alert('XSS')"> <text x="20" y="20">点击我</text> </a> </svg>3. 现代防御机制中的SVG盲区
3.1 内容安全策略(CSP)的局限性
虽然CSP是防御XSS的有效手段，但在SVG场景下可能存在盲区：
script-src指令可能不适用于SVG内联脚本- 对data URI的限制可能不够严格
- SVG特定的事件处理器可能被忽略
推荐的CSP配置增强：
Content-Security-Policy: default-src 'none'; script-src 'self'; img-src 'self' data:; style-src 'self'; font-src 'self'; connect-src 'self'; object-src 'none'; # 关键：禁止加载外部插件内容3.2 输入过滤的常见误区
许多输入过滤库对SVG的处理不够完善：
- 可能只检查了
<script>标签而忽略了SVG特有的事件属性 - 对XML命名空间的处理不充分
- 对data URI的解析不完整
以下是一个容易被漏掉的SVG XSS示例：
<svg xmlns="http://www.w3.org/2000/svg"> <a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="javascript:alert(1)"> <circle cx="50" cy="50" r="45" fill="red"/> </a> </svg>4. 全面防御SVG XSS的实践方案
4.1 服务器端防护措施
严格的SVG内容验证应包括：
- 解析并验证SVG的XML结构
- 移除所有脚本相关元素和属性
- 禁用危险的特性和命名空间
- 对data URI进行严格限制
Python示例：使用lxml库清理SVG
from lxml import etree from defusedxml.lxml import fromstring def sanitize_svg(content): parser = etree.XMLParser(resolve_entities=False) tree = fromstring(content, parser=parser) # 移除脚本元素 for element in tree.xpath('//svg:script', namespaces={'svg': 'http://www.w3.org/2000/svg'}): element.getparent().remove(element) # 移除事件属性 for element in tree.iter(): for attr in element.attrib: if attr.startswith('on') and attr[2:].islower(): del element.attrib[attr] return etree.tostring(tree)4.2 客户端加固策略
在浏览器端，可以采取以下额外措施：
- 使用
<iframe sandbox>隔离第三方SVG内容 - 实现严格的CSP策略
- 考虑使用专门的SVG安全库
JavaScript示例：安全加载SVG内容
function safelyLoadSVG(url, container) { return fetch(url) .then(response => response.text()) .then(svgText => { const parser = new DOMParser(); const doc = parser.parseFromString(svgText, 'image/svg+xml'); // 移除所有脚本和事件处理器 doc.querySelectorAll('script').forEach(script => script.remove()); doc.querySelectorAll('*').forEach(el => { Array.from(el.attributes).forEach(attr => { if (attr.name.startsWith('on')) { el.removeAttribute(attr.name); } }); }); container.appendChild(doc.documentElement); }); }4.3 开发者自查清单
为确保应用充分防护SVG XSS，开发者应检查：
- [ ] 所有用户上传的SVG文件是否经过严格净化
- [ ] CSP策略是否覆盖了SVG相关风险
- [ ] 输入过滤是否处理了SVG特有攻击向量
- [ ] 是否限制了data URI的使用场景
- [ ] 是否对SVG中的XLink和外部引用进行了控制
5. 真实案例分析：SVG XSS的演变
近年来，SVG XSS攻击手法不断演变，从最初的简单脚本注入发展到更隐蔽的技术：
- SVG滤镜中的XSS：利用SVG滤镜特性隐藏恶意代码
- SVG字体中的代码执行：通过自定义字体触发脚本
- SVG动画定时攻击：利用SMIL动画延迟触发恶意行为
一个典型的进化案例是滥用SVG的<foreignObject>元素，它允许在SVG中嵌入HTML内容：
<svg xmlns="http://www.w3.org/2000/svg"> <foreignObject width="100" height="100"> <body xmlns="http://www.w3.org/1999/xhtml"> <script>alert('XSS via foreignObject')</script> </body> </foreignObject> </svg>这种技术可以绕过许多仅针对纯SVG的过滤机制，因为恶意代码实际上隐藏在HTML上下文中。