DEV Community

Cover image for XSS: Problem with letting users upload SVG
TusharShahi
TusharShahi

Posted on

XSS: Problem with letting users upload SVG

Allowing user to upload stuff is cool. One customer facing app I was working on, allowed users to upload files.

These are some of the file extensions we allowed:

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



We later found how that could be a problem with regards to security for our users.

This is how a simple svg file looks like:

![A black circle](https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg)

I just got it online after a simple google search. Here is the [link](https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg).

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



Enter fullscreen mode Exit fullscreen mode

<?xml version="1.0" encoding="UTF-8" standalone="no"?>





This looks like XML code. SVGs can have animations and for that they allow [scripting](https://www.w3.org/TR/SVG11/script.html). So the above file could be easily changed to something like:



Enter fullscreen mode Exit fullscreen mode

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

//Harmful JS here




Here is a simple [demo](https://82cj6t.csb.app/). Try to open the image in new tab and you will see javascript running.

Imagine the possibilities of allowing hackers to run any script on another user's device. 

This is an [XSS attack](https://owasp.org/www-community/attacks/xss/), 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.

That is why it is always recommended to to only allow `svg`s from trusted sources. 
Enter fullscreen mode Exit fullscreen mode

Top comments (0)