# Scalable Vector Graphics and XSS

If your web application displays image files submitted by an external party, you
should take special care about how you handle "image/svg+xml". <abbr
title="Scalable Vector Graphics">SVG</abbr> image files can contain <abbr
title="Cascadable Style Sheets">CSS</abbr> and more importantly, JavaScript. I
didn't realise this until very recently when I
[read](https://www.tapper-ware.net/blog/?p=184) about an SVG vulnerability in
[GMail](https://gmail.com/) (now fixed). The fact that you can execute
JavaScript from inside an image file presents an unexpected vector for <abbr
title="Cross Site Scripting">XSS</abbr> attacks.

An SVG file is basically a chunk of text in <abbr title="Extensible Markup
Language">XML</abbr> format which describes an image. Here is a simple example
of a 50x50 pixel green triangle:

```xml
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
   <polygon id="triangle" points="0,0 0,50 50,0" fill="#009900" stroke="#004400"/>
</svg>
```

If you're using a browser which supports SVG, ie pretty much any recent version
of a modern browser other than <abbr title="Internet Explorer">IE</abbr>, here
is what the above XML looks like when the browser renders it:

<object data="/blog/triangle.svg" type="image/svg+xml" width="50" height="50"><embed src="/blog/triangle.svg" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" width="50" height="50"></object>

Inside the above XML, you could use script tags in exactly the same way you
would with <abbr title="Hyper Text Markup Language">HTML</abbr>. Eg:

```xml
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
  <polygon id="triangle" points="0,0 0,50 50,0" fill="#009900" stroke="#004400"/>
  <script type="text/javascript">
    alert('This app is probably vulnerable to XSS attacks!');
  </script>
</svg>
```

Fortunately, it is not possible to display an SVG by using a simple <img> HTML
tag. You have to use an iframe, or the embed or object tags.

Workarounds?

1. Don't allow SVG

2. Allow SVG submissions but don't display them, just allow them to be downloaded

3. Strip out dangerous stuff from the SVG before displaying. (Be careful to catch everything)

4. Convert to a different image format before displaying, eg <abbr title="Portable Network Graphics">PNG</abbr> or <abbr title="Joint Photographic Experts Group">JPEG</abbr>.

I have updated the [Email Privacy Tester](https://www.emailprivacytester.com/)
with my new found SVG knowledge. Basically, an SVG file is attached to the email
and displayed inline in the email (if supported). It contains some CSS and
JavaScript which is intended to trigger network traffic and pop up an alert. I'm
guessing there is at least one webmail implementation out there which is
susceptible.