How to Identify and Prevent XSS Attacks through SVG File Uploads?

While reviewing A Image Upload Code with a Peer we identified that we can upload a lot of file types through the Code including text and SVG files and we were generally discussing what file types should be allowed for Profile Pic and their size limit etc.

We knew that as Feedback we should stop all nonimage formats but we still did a little reading around it and found that file uploads that allow SVG Files can be a reason for introducing/opening an XSS attack security problem.

What is SVG?

Scalable Vector Graphics (SVG) is a web-friendly vector file format. As opposed to pixel-based raster files like JPEGs, vector files store images via mathematical formulas based on points and lines on a grid. Below is an SVG code for drawing a circle.

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  Sorry, your browser does not support inline SVG.  
</svg> 
 

So basically when you upload an SVG file you are uploading a Code Like above.

How can SVG be used for Attack?

Now assume the same code above we also have a chance of putting a script tag in there

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  Sorry, your browser does not support inline SVG.  
  <script type="text/javascript">
    alert("XSS Example");
  </script>
</svg> 

if this image is uploaded then the script will be embedded in the Content and will show an alert message.

The ability to embed scripts through SVG can allow Hackers to put a lot of content into the Site which can harm in several different ways like Click Jacking or Geolocation Stealing etc. The SVG reference from an Image file is not going to cause the problem since inside the image tag if you are referencing an SVG it is not going to execute the JS So it’s not always that an SVG uploaded would be dangerous let review in the paragraph below when an SVG file can be dangerous by executing embedded JS.

When can a malicious Code in SVG execute?

• SVG Reference by Image Tag – If the SVG is referenced via an Image tag it will not Execute.
• SVG image accessed directly by clicking on the image etc will open it in a new Browser Tab and will execute.
• SVG image with content-disposition: attachment the file will be downloaded but not open in the browser but yes if you open the downloaded file in the browser the script will be executed.
• The SVG direct access through a Content Security Policy to disallow Javascript from executing the Script.
• There might be other cases that I have not tested but as a ground rule always make sure that if you have an SVG upload allowed you have to be careful.

How to Sanitize the SVG Content?

There are a lot of Language Specific Sanitizers clean the Code by removing the malicious code from your SVG. Take advantage of applying Content Security Policy which will help stop execution from non compliant Sites.