Sanitize SVGs in WordPress

So my plugin Safe SVG has just been accepted into the WordPress plugin directory. Whilst mainly a proof of concept, I’m hoping that this plugin will help convince the core team that SVGs, with the right sanitization should become part of core.

My major argument for allowing SVGs in core with sanitization is that there are currently 128 other SVG upload plugins in the plugin directory (source), plus the likes of the posts on blogs like CSS Tricks such as this one that all show you how to allow SVG uploads in WordPress, but don’t address or sometimes even mention the massive security risks that come with allowing users to upload SVGs.

SVGs should be considered as standalone XML applications, there are a huge number of vulnerabilities that can be attacked. For example, some of the easiest to implement are XXE attacks and the Billion Laughs attack. Safe SVG nullifies these attacks by removing the DOCTYPE from the SVG file, something so simple yet overlooked by most other plugins.

Safe SVG also protects against XSS attacks embedded within the XML file by defining a strict whitelist of elements and attributes allowed within the SVG, anything not on these whitelists are removed. Whilst this may break some Javascript powered SVG animations, I feel that is a small price to pay for peace of mind when it comes to your users security.

Probably the best way to learn more about Safe SVG is to go and download it from the WordPress plugin directory and take a look through the code, alternatively you can see the library it’s built upon on Github. If you find a bypass or have any suggestions on how to improve this plugin or the underlying library, please don’t hesitate to contact me and let me know your thoughts.

Safe SVG for WordPress

After a lot of testing of svg-sanitizer I’ve finally decided to make a WordPress plugin for it. This is more of a PoC to show that it can be done.

Once installed, the plugin will hook into the uploads and automatically sanitize any SVGs that you upload.

I’ll update this post when it’s on the WordPress directory but for now, here’s the download:

Click here to download

SVG Sanitization

A couple of days ago I was browsing through the WordPress core Trac looking for something to get involved in and stumbled upon the following issue: https://core.trac.wordpress.org/ticket/24251

The lack of ability to upload SVGs into WordPress has always been a slight annoyance to me so I decided to see what I could do about it. After reading through the thread, I realised that what PHP was really missing, was a decent SVG sanitizer.

I read around a few articles and read through the source at: https://github.com/cure53/DOMPurify to get some ideas of how it’s done by the professionals. I started off by mapping out what was needed:

  • An element whitelist
  • An attribute whitelist
  • A way to remove those not in the whitelist

The two whitelists I borrowed from DOMPurify, after all it’s built by people with more knowledge than me. I then put a basic PHP library together that allowed me to pass in a dirty SVG string and receive out an SVG string with all the non-whitelisted elements and attributes removed.

The strangest thing I came across whilst building this was the fact that DOMNodeList doesn’t work like an array. If you iterate from 0 to 10 and delete node 5, everything drops down 1 place, so when you move to node 6, that’s actually node 7, odd. This can be easily fixed of course by iterating backwards from 10 to 0.

Anyway, I have a basic POC up on Github (https://github.com/darylldoyle/svg-sanitizer) that I’m hopefully going to push a bit further in the next week or so. Lets hope all goes well!