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 svg
s from trusted sources only.
Top comments (0)