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:
<?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:
<?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.
Top comments (0)