Among the trillions of images floating on the web, the amount of SVG images is quite rare. Most of the images you see everywhere are either in JPEG, PNG, GIF, or WebM formats. It’s a shame since SVG has so much potential.
What is SVG?
SVG stands for Scalable Vector Graphics. While many people think it’s an image format, it’s actually a document format. It’s an application of the eXtenstible Markup Language (XML). To view an SVG file you can use any application that can read XML. Since an XML is just a text file, you can use any text editor to open it and view the markup language.
What do you use SVG for?
A vector graphic is a series of commands or statements that put shapes and lines in a two-dimensional space. It’s different from raster images where an image is represented in pixels.
Developers use an SVG image when they need an image that is responsive and aware of its own width. Such an image can adjust how it’s displayed accordingly whenever the user resizes the browser window.
It doesn’t matter if the user is viewing the image on a cell phone or a large screen monitor. An SVG image will look smooth and not jagged as with the case with raster images.
Where is the danger in SVG files?
The danger of an SVG file comes from the fact that it’s an XML that can have embedded CSS and JavaScript. The web browser will automatically run any JavaScript embedded in an SVG file. Therefore, if the script contains malicious code, it will place the user’s computer at risk.
Has there been any case of such attacks?
Yes. To date, there are over 8,000 recorded cases related to the security vulnerabilities of SVG files.
How do you secure a website from the risk of SVG files?
Sanitizing the SVG files from any JavaScript is one way to tackle the risk of attacks, but it’s easier said than done.
One well-known XSS sanitizer for SVG, HTML, and MathML is DOMPurify. However, it’s a client-side app. To make the world save from SVG exploits, one must find a way to put that in computers all around the world.
All things said, the surefire way is to not using SVG at all. If you run a website that allows users to contribute content, you should disallow SVG content completely. WordPress knows just how unsecure SVG files are so uploading SVG files is disabled by default.
If you insist on allowing users to upload the actual SVG, you install a plugin to sanitize all SVG during upload. Even then, you must only allow trusted users to do it. Users who know what SVG is and what kind of damages it can bring.
“Is there any other way?”
Yes, you can convert the SVG into JPG first. You’ll lose the responsiveness of the SVG but it will be safe as the JavaScripts and CSS in it won’t get translated into the new JPG image.
Want to get in touch with us? Hit us up on our social media channels!
Follow us