2

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.

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132

1 Answers1

4

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

Boschman
  • 825
  • 1
  • 10
  • 17
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • Thank you! I natually expected the cross-origin logic to work everywhere. Sad that it doesn't yet and that browsers don't provide clear hints about this circumstance. I dug a bit more into this now and saw that there's [an open issue for that on the SVG spec.](https://github.com/w3c/svgwg/issues/707) and [one for adding a `crossorigin` modifier, among others, to CSS](https://github.com/w3c/csswg-drafts/issues/1603). – Sebastian Zartner Jan 21 '21 at 19:54
  • Read about a possible workaround - [Ajaxing for your SVG Sprite](https://css-tricks.com/ajaxing-svg-sprite/). – Ferdinand Prantl Jun 18 '22 at 11:05