使用 img 标签加载不受信任的 SVG 时出现 XSS

Question

使用

img

标签加载不受信任的 SVG 文件时是否存在 XSS 威胁？

如：

<img src="untrusted.svg"/>

我读到大多数浏览器都禁用通过

img

标签加载的 svg 文件中的脚本。

Answer 1

这曾经在某些浏览器中有效，但现在不再有效。然而有一个相关的问题。如果我作为一个不知情的用户，右键单击并下载图像，然后在本地打开它，它可能会在浏览器中打开并且脚本将运行。考虑到它是一张图像，这有点奇怪。我想如果您右键单击并选择“查看图像”，也可能导致脚本运行，因为您直接打开它。

Answer 2

是的，使用 SVG 时确实存在 XSS 威胁，大多数浏览器不允许脚本运行，但如果通过电子邮件发送，则它可能会运行。

问题的一些链接：

可扩展矢量图形和 XSS

为什么这个 XSS 矢量在 svg 中有效，但在 HTML 中无效？

SVG Fun Time - Firefox SVG Vector + 绕过 Chrome XSS Auditor

关于危险 SVG 的 PDF

Answer 3

不，

<img>

标签中不存在 XSS 风险。

但是如果图像可以加载到

<img>

标签中，那么用户也可以直接加载图像。在这种情况下，将执行脚本。

例如，

<img src='/uploads/4bafa902.svg'>

不会执行脚本，但是如果有人单击指向

https://example.com/uploads/4bafa902.svg

的链接，则 SVG 内的任何脚本都将在 https://example.com/

（称为 

origin）的上下文中执行。即使使用

HttpOnly

会话 ID cookie，脚本也可以对您的应用程序（在该源）执行任何调用，并执行不需要的操作或将获得的数据泄露给攻击者。

如果您将 SVG 托管在 origin 上，其中运行的应用程序使用任何类型的 cookie，或者请求无需用户交互即可执行操作（例如 CSRF，除非它源自您自己的来源），或者任何人放置的来源进入他们的 CORS 允许标头（导致相同的类似 CSRF 的风险），那么您需要：

• 在 SVG 图像上设置

  Content-Security-Policy

  (CSP) 响应标头，拒绝运行这些脚本。这是我使用的：

  Content-Security-Policy: script-src 'none'; object-src 'none'; report-uri /cspreport
  

• 在托管不受信任的 SVG 之前或向用户提供内容之前，从不受信任的 SVG 中删除/清理可执行内容。

这两个选项都有警告：

CSP 标头通常在 Web 服务器上进行全局配置。如果您为 SVG 内容响应设置自定义响应，则该响应可能会被 Web 服务器覆盖（要么被替换，要么以随机顺序设置两个并导致意外结果）。

清洁/消毒很容易被忽视，而且您还需要跟上新的（可能是晦涩的）浏览器功能，类似于 2013 年才为触摸屏设备定义

ontouchstart

，距

onclick

近二十年了被定义了（也许 VR/AR 耳机将获得自己的事件来“查看”元素，或者我们今天还没有的其他事件）。因此，我不会尝试构建自己的项目，而是信任专注于针对 XSS 清理 SVG 的项目，例如 DOMPurifier。 同时拥有这两种防御措施可能会让您两全其美：如果过滤器被绕过，CSP 仍应启动，反之亦然。