XSS: Problem with allowing users to upload SVG

Allowing a user to upload stuff is cool. One customer-facing app I worked on, allowed users to upload images.

These are some of the file extensions we allowed:

const acceptedFileTypes = [
  '.jpg',
  '.jpeg',
  '.png',
  '.svg'];

We later found how that could be a problem concerning security for our users.

This is how a simple svg file looks like:

I just got it online after a simple Google search. Here is the link.

This is how it looks like when you download and open the same file in VS code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<circle cx="250" cy="250" r="210" fill="#fff" stroke="#000" stroke-width="8"/>
</svg>

This looks like XML code. SVGs can have animations and for that they allow scripting. So the above file could be easily changed to something like:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<circle cx="250" cy="250" r="210" fill="#fff" stroke="#000" stroke-width="8"/>
<script type="text/javascript">
//Harmful JS here
</script>
</svg>

Imagine allowing hackers to run any script on another user's device. Here is a simple demo.

This is an XSS attack, a stored one. This did not directly affect the app we made, but definitely could affect our users. Anyone opening the image in a new link could be vulnerable. This is also the reason that Gmail and a lot of email clients do not render svgs.

That is why it is always recommended to allow svgs from trusted sources only.