Comment téléverser un SVG dans WordPress ?
8 mn de lecture

Comment téléverser un SVG dans WordPress ?

Dans les multiples formats d’images existants, on trouve le SVG (Scalable Vector Graphics) , une image vectorielle basée sur le langage XML (EXtensible Markup Language) et redimensionnable à l’infini. Ce format existe depuis 1999, mais WordPress n’autorise toujours pas son téléversement dans les médias. Alors, voyons comment contourner cette interdiction pour pouvoir enfin téléverser, par exemple, un logo au format SVG dans WordPress, en toute sécurité.

Pourquoi WordPress ne permet pas d’intégrer les SVG ?

WordPress nativement ne permet pas de télécharger les SVG, principalement pour des raisons de sécurité… la preuve en image :

les fichiers SVG ne sont pas autorisés par WordPress

En effet, les fichiers SVG, même s’ils constituent visuellement une image, ne sont rien d’autres que des fichiers en langage XML, une version améliorée du langage HTML. Ils peuvent donc contenir du code CSS pour le style et/ou du JavaScript pour rendre l’image interactive.

Alors, si vous autorisez les utilisateurs à téléverser un SVG (par exemple, une banale photo de profil) ou si vous importez un SVG issu d’une source peu sûre, vous risquez d’incorporer des codes malveillants sur votre site et de subir des attaques style faille XSS.

Le problème vient essentiellement du fait que le type MIME du SVG correspond à celui d’une image classique : image/svg+xml.

Pour information, le type MIME permet d’indiquer au navigateur la façon d’afficher une ressource. Par conséquent, considérant qu’il s’agit d’une image, le navigateur affichera sans problème le SVG.

Le souci étant, que lorsque l’image s’ouvre directement dans le navigateur, le code qu’il contient est exécuté sur la page.

Donc, si “l’image” SVG est servie via les attributs src et background-image, le code éventuellement malicieux ne sera pas exécuté. Par contre, si elle est servie via un lien sur une autre page du site, il le sera, car il suffira de cliquer dessus pour que l’image s’ouvre directement dans le navigateur et qu’inévitablement le code, malicieux ou pas, s’exécute.

Autoriser le SVG dans WordPress via du code

Oui, c’est faisable.

Vous trouverez facilement sur le web le code à injecter dans le functions.php de votre thème enfant afin d’autoriser l’importation des SVG dans WordPress :

/* MAUVAISE SOLUTION */
function wpc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'wpc_mime_types');

Mais, passez votre chemin, car cette méthode est risquée.

En fait, il ne sert qu’à autoriser le type MIME image/svg+xml à permettre le téléchargement du SVG dans la bibliothèque de médias WordPress, et ce, sans aucune sécurité, ni filtrage du code contenu.

En effet, ce code permet à tous les utilisateurs de téléverser des SVG dans les médias, que ce soit les éditeurs, auteurs, contributeurs ou les administrateurs de votre site.

Il est donc évident qu’il faudrait, en sus, créer des rôles utilisateurs personnalisés afin de restreindre le type de fichiers autorisé en téléversement dans la bibliothèque des médias, par exemple, en paramétrant un plugin qui définirait les différentes autorisations en fonction des utilisateurs.

Ça devient un peu compliqué, vous ne trouvez pas ?

Permettre l’import du SVG via une extension WordPress

La meilleure solution pour permettre l’import d’un SVG est en conséquence de recourir à une extension dédiée.

Mais attention, ne prenez pas n’importe laquelle. En effet, certaines se contentent bien souvent d’ajouter le code mentionné au paragraphe précédent.

Ce qu’il vous faut, c’est une extension qui “désinfecte” votre fichier SVG, c’est-à-dire qui supprimera le code html et javascript.

En voici deux qui font le job.

Safe SVG

SAFE SVG plugin pour téléverser SVG dans WordPress

Safe SVG, aussi connu sous le nom de WP SVG existe en version gratuite et premium.

​⚠️ Comme indiqué sur WordPress.org, ce plugin n’a pas de mises à jour récentes. Il convient donc de le tester sur un site qui n’est pas en production.

La version gratuite autorise tous les utilisateurs à téléverser des SVG dans les médias de WordPress. Alors que la version premium permet d’empêcher certains utilisateurs de télécharger des SVG.

Pour ce qui nous concerne, la version gratuite est largement suffisante. En effet, même si aucune restriction concernant les rôles utilisateurs n’existe, Safe SVG vous permet d’autoriser les téléversements de SVG tout en vous assurant qu’ils soient nettoyés pour éliminer les vulnérabilités SVG / XML qui peuvent affecter votre site.

Il vous donne également la possibilité de prévisualiser dans la médiathèque de WordPress vos SVG téléversés.

Cerise sur le gâteau, après avoir installé le plugin, il suffit de l’activer. Il n’y a pas de paramètres à régler, tout se fait automatiquement.

SVG Support

SVG Support plugin désinfectant les SVG

SVG Support est un autre plugin bien côté qui fait le même travail, mais qui offre des fonctionnalités supplémentaires.

En effet, avec cette extension, il est possible de limiter les privilèges de téléversement SVG aux administrateurs. Il suffit, pour cela, d’aller dans Réglages/SVG Support et de cocher la case “Restreindre aux administrateurs”.

plugin SVG Support réglages additionnels

Vous pouvez aussi activer le mode avancé si vous souhaitez utiliser des fonctionnalités avancées telles que les animations CSS et le rendu SVG en ligne.

plugin SVG Support réglages avancés

Activer la prise en charge SVG dans Elementor

Si vous travaillez avec Elementor pour créer votre site WordPress, vous n’avez pas besoin de plugin supplémentaire pour insérer un SVG dans les pages conçues via Elementor.

Il vous suffit d’aller dans Elementor/réglages/avancés et d’activer “Permettre les téléversements de fichier non filtré”.

Vous pourrez maintenant téléverser, non seulement, des SVG, mais aussi des fichiers Json, par exemple, pour importer des animations Lottie Files… Mais, ça, c’est un autre sujet que je développerai ultérieurement.

Comment autoriser le téléversement des svg dans Elementor

Elementor se chargera de nettoyer automatiquement le fichier et supprimera tout code éventuellement malveillant. Il est à noter qu’Elementor intégrera le SVG dans la page en tant que code en ligne.

Bien entendu, vous pourrez ensuite retrouver l’image SVG dans les médias de WordPress.

SVG téléversé dans les médias de WordPress

Que faut-il retenir sur les SVG dans WordPress

Il est essentiel de retenir que, même si les fichiers SVG ont pas mal d’avantages, comme leur petite taille, leur flexibilité et leur évolutivité sans changement de qualité d’images. Ils ont aussi un inconvénient majeur : ils peuvent constituer une menace potentielle pour la sécurité de votre site.

En utilisant des extensions qui “désinfectent” le code du SVG, vous pourrez utiliser ces fichiers sur votre site à loisir. Toutefois, faites quand même extrêmement attention à ne les télécharger qu’à partir de sources connues et fiables afin de limiter les risques.

Et vous, utilisez-vous des SVG sur votre site ? Si oui, quelle extension avez-vous choisie pour le support de vos SVG dans WordPress ?

S’abonner
Notifier de
guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires