如何允许在嵌入式 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 中它说

Security Error: Content at https://www.gamepro.de/ may not load data from https://static.cgames.de/gp_cb/assets/core/images/icons.svg.

在Chrome中的消息是

Unsafe attempt to load URL https://static.cgames.de/gp_cb/assets/core/images/icons.svg from frame with URL https://www.gamepro.de/. Domains, protocols and ports must match.

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

尝试按照中的建议将其设置为 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

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

How to allow external images referenced within embedded SVG?

html

svg

image

content-security-policy