How to prevent XSS in SVG file upload?

Question

Currently assessing an application, I found out that it is possible to submit an SVG file containing JavaScript (the app is also vulnerable to XXE). I wondered if there was a method to prevent those vulnerabilities and secure the SVG submission form? How to be sure that all obfuscation methods are caught?

In first place, I developed a blacklist approach but from a security point of view, it is a very very bad approach. What do you advice me?

Unfortunately SVG is needed because the application is based on the features of svgs (xml structure). It displays and hides dynamically layers of the SVG according to the needs. However, SVGs are very rarely added and are restricted to only a few people but I can't leave this door opened. I discovered that there are tons of obfuscation methods which make the prevention complicated — Nokosi Pow, Jan 16 '17 at 12:22
As I said, i have already tried a blacklist approach containing the script tag and all the JS event handlers but there are other means possible. It is possible to place in a legitimate tag an base64 encoded payload. It will pass filters without any problem and will execute the payload. — Nokosi Pow, Jan 16 '17 at 12:25
If you know what elements you consider acceptable, a whitelist approach might work. There are a limited number of common tags, and each of those has a limited number of required attributes, so while there might the odd edge case, in combination with the limited access to the upload function, it might be acceptable. Alternatively, there are various sanitizer projects around, which might be a good starting point. — Matthew, Jan 16 '17 at 13:06
I also considered this method but I have doutes about perfermances. Indeed, an average svg contains 300 000 chars and there are about hundreds of attributes used in this SVGs. On one hand the blacklist approach might not be really secure and on the other hand the white list approach seems to be very slow because of list of possible patterns. — Nokosi Pow, Jan 16 '17 at 13:36
A totally different approach would be to convert the SVG to another format. During the conversion it is very likely that any malicious code will be "screwed up". — Jeroen, Jul 06 '18 at 06:32

score 9 · Answer 1 · edited Jun 16 '20 at 09:49

Take a look at this fantastic blog post that was recently published by security researcher Robin (@digininja) about this exact topic:

Direct view with content-disposition: attachment - not vulnerable - Headers are sent to force the file to be downloaded.

Direct view with CSP - not vulnerable - The Content Security Policy is set to disallow inline JavaScript.

Image Tags - not vulnerable - The SVG is referenced through image tags which prevent scripts.

Tags With CSP - not vulnerable - Image tags and the same CSP as above for double protection.

score 1 · Answer 2 · answered Jul 05 '19 at 19:51

While @ThorTL67 points out some completely vaild solutions, I don't feel comfortable with any of them, and they seem kinda irresponsible to me.

This is because any malicious JS within the SVG is still sent to the viewer. This means that if they happen to save the SVG file and then view it, any malicious JavaScript will still be executed on their device, since on most devices the only software that can view SVGs are browsers.

This is especially true for the first point in @ThosTL67's answer.

Here are some alternate recommendations:

You can convert the SVG to another format server-side (such as PNG) and then display the new image.
You can sanitize SVGs using libraries such as this one.

The main concern is script execution on the origin of the web app which ThorTL67's answer addresses. There are some issues related to JS in downloads, but that's often an accepted risk. Just like your web mail provider may allow you to download an HTML attachment. Sanitizing/converting the image is nice, but also adds complexity and its own set of possible security issues. — Arminius, Feb 23 '21 at 02:43

How to prevent XSS in SVG file upload?

2 Answers2