DEV Community

Cover image for XSS: Problem with allowing users to upload SVG
TusharShahi
TusharShahi

Posted on • Updated on

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'];
Enter fullscreen mode Exit fullscreen mode

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

This is how a simple svg file looks like:

A black circle

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)