Why can SVGs be dangerous?

You certainly know SVG, this vector image format designed to display images that will never be pixelated because they are drawn using code (often generated from software like Adobe Illustrator).

This format is now very common, supported everywhere, and yet it can represent a significant security flaw on your websites and web applications.

So what exactly is this flaw?

The problem with SVG is that in the collective consciousness it is now considered a simple image, even though it isn't a pixel array. However you must always keep in mind that an SVG file contains nothing other than XML code!

And what language, compatible with XML, is interpreted by your browser? HTML! And I won't insult you by reminding you that when you can write HTML, you can also write Javascript in it!

Bingo, thanks to our simple SVG file we have everything we need to create an XSS vulnerability!

How to exploit this flaw?

One of the peculiarities of SVG is its MIME type, which corresponds to that of a classic image, namely: image/svg+xml

The MIME type is a standard that indicates the nature and format of a document, it's what the browser uses to know how to display a resource, and not simply the file extension.

Imagine a website that allows its users to upload an image as a profile picture, this is quite common. If the server simply limits itself to checking whether the MIME type of the submitted document matches "image/*", then it will let the SVG file through without any problem.

The server will therefore be able to serve unwanted code to all its users!

Fortunately, the src and background-image attributes do not execute the code injected into an SVG, but there remains a way for a user to execute the hidden code in the image.

You just need to insert the link to your profile picture elsewhere on the site, and if a user clicks on it, the image will open directly in the browser.

And what happens then?

When an SVG image is opened directly by the browser, all the code contained within it is executed!

Here's an example, with this image hosted on my blog and a link to open it, don't worry, you're not at risk, you see, it's just a simple image file ;)

https://cellar-c2.services.clever-cloud.com/content/2020/08/geek-8.svg

But what's the danger if the code is executed on another page?

The problem lies in the fact that the fraudulent code executes on another page, sure, but still under your domain name!

And what is accessible only from the site's domain? Cookies and local storage, of course!

So if I have a logged-in user and I clone their login token to send it to my server thanks to the piece of code contained in my image, I could log in as them!

How to protect yourself from this?

Obviously the best way is to simply prevent users from uploading SVG files on your platform, but also to not add SVG images yourself from untrusted sources.

If this is an essential feature for your site, you will need to clean up the SVG file's code to remove all HTML and Javascript code before saving it on the server!