Pourquoi les svg peuvent être dangereux ?

Vous connaissez forcément le svg, ce format d'image vectorielle destiné à afficher des images qui ne seront jamais pixelisées car dessinées grâce à du code (souvent générées depuis un logiciel comme Adobe Illustrator).

Ce format est désormais très courant, supporté partout et pourtant il peut représenter une faille de sécurité importante sur vos sites et applications web.

Mais alors quelle est cette faille ?

Le problème du svg est que dans l'inconscient collectif il est désormais considéré comme une simple image, même sans être un tableau de pixels. Pourtant il faut toujours garder en tête qu'un fichier svg ne contient rien d'autre que du code XML !

Et quel est le langage compatible avec l'XML qui est interprété par votre navigateur ? Le HTML ! Et je ne vais pas vous faire l'affront de vous rappeler que quand on peut écrire du HTML, on peut aussi y écrire du Javascript !

Bingo, grâce à notre simple fichier svg on a tout ce qu'il nous faut pour créer une faille XSS !

Comment exploiter cette faille ?

L'une des particularité du svg est son type MIME qui correspond à celui d'une image classique soit : image/svg+xml

Le type MIME est un standard qui permet d'indiquer la nature et le format d'un document, c'est ce qu'utilise le navigateur pour savoir comment afficher une ressource, et non pas simplement l'extension du fichier.

Imaginons un site web qui permettrait à ses utilisateurs d'uploader une image en tant que photo de profil, c'est plutôt courant. Si le serveur se cantonne simplement à vérifier si le type MIME du document envoyé correspond à "image/*", alors il laissera passer le fichier SVG sans problème.

Le serveur sera donc en mesure de fournir un code non-désiré à tous ses utilisateurs !

Heureusement, les attributs src et background-image n'exécutent pas le code injecté dans un svg, mais il reste une solution pour qu'un utilisateur exécute le code caché dans l'image.

Il suffit d'insérer le lien de sa photo de profil ailleurs sur le site, et si un utilisateur clique dessus, l'image s'ouvrira directement dans le navigateur.

Et que se passe-t'il ?

Lorsqu'une image svg est ouverte directement par le navigateur, tout le code contenu à l'intérieur est exécuté !

En voilà un exemple, avec cette image hébergé sur mon blog et un lien pour l'ouvrir, ne vous inquiétez pas, vous ne risquez rien, vous voyez, c'est un simple fichier image ;)

https://cellar-c2.services.clever-cloud.com/content/2020/08/geek-8.svg

Mais quel est le danger si le code est exécuté sur une autre page ?

Le problème réside dans le fait que le code frauduleux s'exécute dans une autre page certes, mais quand même sous votre nom de domaine !

Et qu'est-ce qui est accessible uniquement depuis le domaine du site ? Les cookies et le local storage bien sûr !

Donc si j'ai un utilisateur connecté et que je clone son token de connexion pour l'envoyer à mon serveur grâce au bout de code contenu dans mon image, je pourrai me connecter à sa place !

Comment s'en prémunir ?

Évidemment le meilleur moyen est d'empêcher les utilisateurs de mettre en ligne des fichiers svg sur votre plateforme tout simplement, mais aussi de ne pas ajouter soi-même des images svg venant de sources non-fiables.

Si c'est une fonctionnalité indispensable pour votre site, il faudra nettoyer le code du fichier svg pour enlever tout le code html et javascript avant de l'enregistrer sur le serveur !