Why it's not a good idea to use SVG vectors in WordPress

Why can not SVG files be uploaded in WordPress?

If you have ever tried upload a file in SVG vectors in WordPress you will have taken the surprise that does not allow it in spite of how popular these types of files are becoming in their use for icons and logos, mainly.

the same WordPress tells you, as you can see in this screenshot …

 svg files upload in WordPress

The security problem with SVG vector files

 logo svg

SVG files are extremely insecure.

The reason, as the error message says, is for security and it will be very clear if you try to open a file with extension .svg on your computer , because if you have installed some code editor, some IDE, it will open to show rte the harsh reality this:

 svg file svg code

Indeed, an SVG file is an XML code document not an image file like the Most people believe and, like every document, is susceptible to code injections, easily .

An example

For example, SVG files allow to embed JavaScript and SVG readers, and your browser is, can run it . Do you want to see it?

Open your favorite code editor and paste this code:

The file is basically to show a red circle, but it has prize included.

Now save it with the name you want, for example its sto.svg . Next open it with your browser and … surprise!

 javascript in svg file in WordPress

Your browser will execute JavaScript before even showing the red circle of yore.

In this case the script is harmless only shows a popup window to accept before being able to see the red circle but could carry any other command not so sympathetic and that's the problem.

This vulnerability inherent in all SVG files could be exploited to, for example, inject code into an XSS attack.

Why are they so popular SVG files?

 flat icons

They are not something new, not by far, but lately they have become popular again for several reasons:

  • The use of SVG vector icons, between they the famous and already tired flat icons po A multitude of advanced themes for sales and conversion websites.
  • The small size of SVG files compared to PNG and other formats that support transparent backgrounds.
  • The enormous scalability of SVG files without loss of quality on large screens. or high quality, retina for example.
  • Fever for charge optimization or WPO which encourages us to use graphical resources as small as possible, and SVG files weigh little and give a lot of quality

 scalability differences between svg and other files

Why are SVG files so insecure?

 svg file icon [19659014] There are experts who have come to determine the following:

Literally, by their own design, SVG files are designed to be insecure .

There is nothing. [19659014] In fact, if WordPress perm itiese SVG files the sanitized library would not only have to work well, it would also have to be revised in depth, especially in large-scale production environments.

And, let's not forget that WordPress is behind of almost 30% of the web with which the potential for insecurity is immense .

The insecurity of the SVG files is not an unknown or new fault . There are many, and well known, vulnerabilities with SVG files.

As SVG is based on XML, it opens a huge overabundance of problems such as XXE vulnerabilities ( XML External Entity ) , XSS attacks ( Cross Site Scripting ) and many more.

It is not a theory, or something hidden or unknown . There are over 8,000 well-known vulnerabilities related to all kinds of security vulnerabilities of all kinds with the SVG files .

Another example that you will remember

 infected files wannacry virus

Do you remember the famous virus / ransomware WannaCry ?

Well the SVG files were in the list of documents that injected and encrypted malicious code with which infected millions of computers around the world.

Is it really that bad? If only I have some small icons and sooo monosss!

Let's see, it's not a puppy.

What you really have are not some pretty little ones, how many? 6 icons? In reality, what you have there, on the cover of your website, are 6 precious vulnerable XML documents, without any code or sanitation that prevents you from having 6 potential bombs ready to explode with the right "stimulus". ,

Ok, all very interesting but I want to use SVG files

Well, you yourself, but remember the enormous vulnerability you're assuming . And having said that, since the information does not hurt anyone, here is how to allow the upload of SVG files to WordPress.

Just add the following code to your customizations plugin or to file functions.php of active topic:

You can also add the following in the file ] .htaccess :

Or, if you like it more, you can do it by installing the plugin ] SVG Support .

Can I use SVG vector files in WordPress safely?

Best question. If you think you need to use SVG files then you can install the plugin Safe SVG which, once installed, will allow you to upload files with .svg extension in WordPress, but before applying a minimum measure of security: do not allow SVG file upload without sanitizing .

It is based on DOMPurify to properly sanitize SVG files.

Actively preview SVG files in the media library.

Am I totally safe using this?

No. Re-read the article from the beginning to burn it it's not safe to use SVG files in WordPress or in any other system by the way.

Loading …

You might as well help: