SVG in Mattrbld

Scalable vector graphics, or SVG for short, are an ideal format for any type of image that needs to be shown at extreme sizes, while always looking sharp, such as logos, icons and more. Since SVG are XML files, they are among the few types of media files that are stored as text instead of a binary format.

As opposed to some other content management systems, Mattrbld supports SVG out of the box, so you can upload them to the Media Library as soon as it’s configured. However, there are some security concerns to take into consideration, which will be pointed out in this article.

Security Risks

SVG files can contain embedded JavaScript code that runs when the SVG is opened in a browser or is inlined in content. This opens up an application or website to XSS and other types of attacks.

SVG Files are not Modified

Mattrbld does not modify or sanitise uploaded SVG files in any shape or form before loading and displaying then, for example as a preview image or within the real-time content preview, if enabled.

This can be considered a security issue under some circumstances if the file contains malicious code. However, within Mattrbld itself the SVG images get loaded as an ObjectURL within an <img> tag as opposed to inlining them in the content, which disables the execution of JavaScript contained within the SVG, eliminating the risks. The live preview, however, is in the hands of the developer implementing it in the project, so special care should be taken there to avoid any risks.

Users Might not be Aware of Compromised SVG

Since SVG files are just like any other image to many non-technichal users, they may not be aware of the security concerns surrounding them and as such may upload SVG files from untrusted sources into Mattrbld.

As outlined before, this shouldn't cause any issues within Mattrbld, but it may cause issues if the SVG files are inlined in the presentation layer of the project, e.g. a website.

To counteract this possibility, you can control which user roles are allowed to upload new media files using Permissions.

Best Practices

By following the best practices listed below, you should be able to minimise any potential issues arising from the use of SVG, while at the same time being able to reap all the format’s benefits:

• Only upload SVG files that you created yourself or received from trusted sources

• Restrict who can upload media files

• Inform those allowed to upload media files about the security issues concerning SVG files from untrusted sources

• Take care when implementing the live content preview and ensure that you properly handle and sanitize the raw SVG data passed from Mattrbld to your application

This article concludes the series on special considerations around media files in Mattrbld. In the next one, we will take a look at the Advanced Media Library feature, which you can use to manage metadata of media files in a central location.