如何允许在嵌入式 SVG 中引用外部图像？

Question

在https://www.gamepro.de 上，HTML 代码中嵌入了一个 SVG，它通过 <use> 元素引用来自另一个域的图像，如下所示：

<svg id="header-ivwbrand" alt="Partner von GameStar">
  <use xlink:href="https://static.cgames.de/gp_cb/assets/core/images/icons.svg#gs_logo"></use>
</svg>

虽然这会导致安全错误。在 Firefox 中它说

安全错误：https://www.gamepro.de/ 的内容可能无法从 https://static.cgames.de/gp_cb/assets/core/images/icons.svg 加载数据。

在 Chrome 中，消息是

不安全地尝试从带有 URL https://www.gamepro.de/ 的框架加载 URL https://static.cgames.de/gp_cb/assets/core/images/icons.svg。域、协议和端口必须匹配。

不幸的是，这两条消息的信息量都不是很大。我假设需要设置 Content-Security-Policy 标头以允许以这种方式嵌入图像，尽管 CSP specification 并不清楚哪个指令涵盖了这一点。

按照https://stackoverflow.com/a/46414538/432681 中的建议将其设置为object-src www.gamepro.de 或object-src 'unsafe-eval' 进行尝试似乎不起作用。

Answer 1

IIRC 您不能从 <use> 元素执行跨域请求。 <use> 需要添加对 crossorigin 属性的支持。在 SVG2 中，has been added for <image> elements，但还不是 <use> 元素。

More useful information here