"Security restrictions" when linking to external stylesheet from SVG (when embedded as an image)

Question

According to this answer "for security reasons images must be standalone files". That is, when including a SVG file using an img tag it cannot reference any external stylesheets.

I think I've run into the same issue when trying to include SVGs as background images using CSS. The SVGs link to other SVG files and display fine when viewing them in Firefox directly, but fail to show the linked content when included as a CSS background image.

What are these 'security reasons' and where can I find out more information about them?

Answer 1

Consider a hypothetical forum that allows SVG images as avatars. If external resources were allowed a trickster/malicious user could upload an SVG file that contains <image xlink:href="http://evilhacker.com/myimage.png"> and (assuming they control evilhacker.com), they could do any & all of the following:

• receive a ping at their own domain whenever anyone views their profile (& log the ip address of the person viewing it)
• potentially serve different-looking avatar to different people based their IP address, request-headers, etc.
• potentially change the appearance of their avatar at-will (i.e. wait for forum-admins to approve it thumbs-up, and then change it to be NSFW)

See this Mozilla bug and the SVG integration specification for more details.