如何允许在嵌入的 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>

尽管这会导致安全错误。在火狐浏览器中它说

安全错误：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 规范并不清楚哪个指令涵盖了这一点。

object-src www.gamepro.de通过将其设置为或按照/sf/answers/3249017691/object-src 'unsafe-eval'中的建议进行尝试似乎不起作用。

Answer 1

如果我没记错的话，您不能从元素执行跨域请求<use>。需要<use>添加对crossorigin属性的支持。在 SVG2 中，已经添加了<image>elements，但还没有添加<use>element 。

更多有用信息请看这里