别再只盯着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 srcdata:image/svgxml,svg xmlnshttp://www.w3.org/2000/svg onloadalert(1)/2. SVG XSS的四种典型攻击路径2.1 内联SVG中的事件处理内联SVG直接嵌入HTML文档可以像普通HTML元素一样添加事件处理器。由于SVG支持丰富的DOM事件这为攻击者提供了多种触发点。常见的内联SVG XSS向量svg xmlnshttp://www.w3.org/2000/svg scriptalert(document.cookie)/script /svg svg xmlnshttp://www.w3.org/2000/svg onloadalert(XSS) !-- 看似无害的SVG内容 -- /svg2.2 通过data URI引入的SVGData URI方案允许将SVG代码直接编码在URL中这种方式可以绕过许多基于文件上传的过滤机制。攻击方式示例风险等级直接嵌入img srcdata:image/svgxml,...高CSS引用background: url(data:image/svgxml,...)中iframe加载iframe srcdata:image/svgxml,...高2.3 SVG文件中的脚本执行独立的SVG文件同样可以包含恶意脚本当被浏览器加载时这些脚本会在当前页面上下文中执行。?xml version1.0 standaloneno? !DOCTYPE svg PUBLIC -//W3C//DTD SVG 1.1//EN http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd svg version1.1 xmlnshttp://www.w3.org/2000/svg script typetext/javascript alert(恶意脚本已执行); /script !-- 正常SVG内容 -- /svg2.4 SVG中的XLink和外部资源SVG支持通过XLink引用外部资源这种机制也可能被滥用。svg xmlnshttp://www.w3.org/2000/svg xmlns:xlinkhttp://www.w3.org/1999/xlink a xlink:hrefjavascript:alert(XSS) text x20 y20点击我/text /a /svg3. 现代防御机制中的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 xmlnshttp://www.w3.org/2000/svg a xmlns:xlinkhttp://www.w3.org/1999/xlink xlink:hrefjavascript:alert(1) circle cx50 cy50 r45 fillred/ /a /svg4. 全面防御SVG XSS的实践方案4.1 服务器端防护措施严格的SVG内容验证应包括解析并验证SVG的XML结构移除所有脚本相关元素和属性禁用危险的特性和命名空间对data URI进行严格限制Python示例使用lxml库清理SVGfrom lxml import etree from defusedxml.lxml import fromstring def sanitize_svg(content): parser etree.XMLParser(resolve_entitiesFalse) tree fromstring(content, parserparser) # 移除脚本元素 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/svgxml); // 移除所有脚本和事件处理器 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 xmlnshttp://www.w3.org/2000/svg foreignObject width100 height100 body xmlnshttp://www.w3.org/1999/xhtml scriptalert(XSS via foreignObject)/script /body /foreignObject /svg这种技术可以绕过许多仅针对纯SVG的过滤机制因为恶意代码实际上隐藏在HTML上下文中。