Search code examples
htmlimagesvgcontent-security-policy

How to allow external images referenced within embedded SVG?


On https://www.gamepro.de there's an SVG embedded in the HTML code which references an image from another domain via a <use> element like this:

<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>

Though this causes a security error. In Firefox it says

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

In Chrome the message is

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.

Unfortunately, both messages are not very informative. I assume a Content-Security-Policy header needs to be set to allow embedding the image that way, though the CSP specification isn't clear on which directive covers that.

Trying around by setting it to object-src www.gamepro.de or object-src 'unsafe-eval' as suggested in https://stackoverflow.com/a/46414538/432681 don't seem to work.


Solution

  • If I recall correctly you can't do cross-origin requests from a <use> element. The <use> would need to add support for a crossorigin attribute. In SVG2 that has been added for <image> elements, but not yet the <use> element.

    More useful information here