Autoriser l’envoi de fichiers SVG sur WordPress

Le format de fichier SVG n’est pas pris en charge nativement par WordPress. Si vous tentez d’envoyer un tel fichier, WordPress affichera une erreur pour des raisons de sécurité. Voyons comment activer la prise en charge des SVG.

Mise à jour du 18 juin 2015 : comme le précise Julio, il vous faut tenir compte de certains aspects liés à la sécurité sur ce type de format de fichier SVG.

Selon Wikipédia, le Scalable Vector Graphics ou en français graphique vectoriel adaptable, est un format de données conçu pour décrire des ensembles de graphiques vectoriels et basé sur XML.

Autrement dit, vous pouvez agrandir l’élément à l’infini sans perte de qualité à la manière d’un fichier Adobe Illustrator.

Ce type de fichier sert notamment pour afficher des logos ou encore des polices. On les utilise de plus en plus pour gérer les problématiques de responsive design.

wp-svg-error

Pour empêcher l’affichage de cette erreur, il convient d’ajouter le code ci-dessous dans un mu-plugin ou dans le functions.php de votre thème :

/* Autoriser les fichiers SVG */
function wpc_mime_types($mimes) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter('upload_mimes', 'wpc_mime_types');

Le seul bémol que je note reste l’affichage des miniatures dans la bibliothèque de médias qui n’est pas pris en charge… espérons que les prochaines versions de WordPress évolueront dans ce sens.

8 commentaires

  1. Julio Potier

    Bonjour et aïe j’ai mal.
    Résumé pour ceux qui ne veulent pas lire mon pavé : ceci représente une faille de sécurité. Lisez de suite le dernier paragraphe de ce commentaire.
    Explications pour ceux que ça intéresse :
    Il faut commencer par se demander pourquoi WordPress n’autorise pas de base l’upload des .svg, ce magnifique format d’image vectorielles.
    Car si WordPress ne le gère pas, il doit y avoir une raison, non ? La réponse est dans le code que tu as donné : « xml ».
    Un SVG est un XML. Les XML sont des fichiers tout à fait lisible qu’un humain peut créer de toute pièce, il est possible de créer un SVG depuis une page blanche, bref.
    Le soucis est que le XML peut contenir beaucoup de choses qui n’ont rien à voir avec les images, mais le fichier sera tout de même lu par WordPress. un exemple de faille XML est une XXE (voir https://www.owasp.org/index.php/XML_External_Entity_(XXE)_Processing), ou une bombe d’entités imbriquées, ou corruption de la mémoire dan sle but de la faire déborder (overflow) etc ce qui est donc potentiellement possible dans un SVG, qui est un XML.
    D’autres infos ici https://www.owasp.org/images/0/03/Mario_Heiderich_OWASP_Sweden_The_image_that_called_me.pdf
    La solution est de nettoyer les XML (donc SVG) des DTD processing, XInclude, XSL, XSI et résolution.d’entités. Pour cela il existe une librairie https://github.com/alnorris/SVG-Sanitizer qui vous permet lors de l’upload de nettoyer tout ça.

    Par chance un plugin qui fait tout ça existe, il gère même la miniature : https://wordpress.org/plugins/scalable-vector-graphics-svg/
    Voilà, maintenant, vous êtes secure

    1. Aurélien Denis auteur de l’article

      Merci pour le complément sécurité ! Je t’avoue que je comprends pas grand chose aux différents termes que tu emploies… :p

      Ce qui me déplait dans tout ça c’est d’avoir besoin d’un plugin pour gérer les SVG, un jour il faudra bien que ce soit natif…

      1. Julio Potier

        Non, le SVG est un besoin particulier qui requiert une lib si on souhaite nettoyer tout ça. Ton code est « bon » mais il faut alors être le seul admin à les envoyer après être certain qu’ils soient OK.
        Si WP autorise l’upload, il nettoie ou pas ? Si « non » alors faille possible, si « oui » alors perte de données possible pour d’autres.
        Nous avons donc 3 solutions aujourd’hui :
        1- Ne pas avoir besoin d’uploader des SVG, cela n’empêche pas d’avoir un thème ou des plugins qui en utilisent, juste, je ne peut pas en uploader.
        2- Uploader tout ce qu’on veut en SVG (ton code), mais il faut être conscient du risque et/ou limiter les comptes qui ont ce droits
        3- Utiliser le plugin qui fera alors le travail de nettoyage

        Non, WP ne peut pas gérer 3 cas

  2. Pascal Lapalme

    Merci pour vos échanges de commentaires. Personnellement j’ai opté pour la solution d’Aurélein étant donné que je suis le seul admin sur ma plate-forme, mais je demeure conscient de la faille potentielle grace à Julio!

    Merci les gars!

  3. stephendltg

    Nota: une petite erreur de code dans le plugins https://wordpress.org/plugins/scalable-vector-graphics-svg/, il ne gère pas le cas d’un deuxième attributs pouvant provoqué une attaque ( ligne 48 du fichier class.svg-sanitizer.php ) et également d’une deuxième balise dangereuse consécutive ( ligne 53 du fichier class.svg-sanitizer.php ) .
    Il suffit de comparer le code du plugins avec le code de la librairie https://github.com/alnorris/SVG-Sanitizer.
    Pourquoi cette omission? Car dans le code de la librairie https://github.com/alnorris/SVG-Sanitizer celle-ci ne tient pas compte des namespaces ( attributs souvent placer par des logiciel tel que illustrator ) du coup on se retrouve avec une erreur de max execution sous php ( ex: sodipodi:version= »0.32″ ).
    Pour corrigé cela il faut ajouté après la ligne 48 du plugins: « if( $currentNode->removeAttribute($attrName) ) $x–; » et après la ligne 53 « if( $currentNode->parentNode->removeChild($currentNode) ) $i–; ».
    Et vous voilà vraiment en sécurité avec les SVG.

Laisser un commentaire

Thèmes & Plugins
Premium By WP Channel

WP Alacarte propose des produits et services de qualité
made in France pour la plateforme WordPress.

Tout est prêt pour créer votre site à la carte !

  • Thèmes et extensions premium
  • Facilité d’utilisation garantie
  • Temps de chargement optimisé
  • Personnalisation avancée
Découvrir

Rejoignez la communauté WordPress !

Faites partie de l’aventure en devenant membre d’une association WordPress. Conférences, ateliers, BarCamp, WordCamp… Venez
partager votre passion pour WordPress !

Aurélien DENIS,
président des associations WordPress Francophone et WPMX