Autoriser le SVG dans WordPress, sans se faire avoir

WordPress accepte .jpg, .png, .gif, .webp et quelques autres. Il bloque le SVG. La plupart des tutoriels en ligne y voient un oubli et vous tendent un extrait de code pour contourner. C’est une erreur. WordPress bloque le SVG pour une vraie raison de sécurité, et il vaut mieux la connaître avant de l’activer.

Pourquoi WordPress bloque le SVG

Un SVG, c’est du XML, pas des pixels. Un fichier SVG peut contenir des balises <script>, des attributs onload="...", des liens vers des ressources externes. Affichez un SVG malveillant dans un navigateur et vous avez une faille XSS stockée, installée dans votre médiathèque. C’est pour ça que le cœur dit non.

L’extrait d’une ligne (avec précaution)

Si seuls des gens de confiance téléversent des fichiers sur votre site (vous et votre équipe), l’extrait ci-dessous suffit. Placez-le dans le functions.php du thème ou dans une extension propre au site :

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

C’est tout, les SVG passent. Attention au type MIME : image/svg+xml, et non image/svg comme le disent certains vieux tutoriels.

Si des utilisateurs non fiables peuvent téléverser

Auteurs, contributeurs, clients, quiconque dont vous ne répondriez pas personnellement : l’extrait ci-dessus n’est pas sûr. Il faut un nettoyage au téléversement. Deux options propres :

• Safe SVG, de Daryll Doyle. Gratuite, bien maintenue, elle retire le contenu dangereux des SVG à l’envoi. Installez-la, et le SVG fonctionne pour les rôles que vous autorisez.
• Le faire vous-même. Un hook sur wp_handle_upload_prefilter qui passe le fichier dans enshrined/svg-sanitizer. Seulement si Safe SVG ne convient pas à votre configuration.

Pourquoi s’embêter avec le SVG

Un SVG est minuscule (souvent moins de 5 Ko pour un logo complexe), s’agrandit à n’importe quelle taille sans perte, et reste net sur les écrans Retina. Pour les logos, les icônes et toute illustration à plat, le SVG est le choix évident ; PNG et WebP sont un compromis. Le coût en sécurité est réel, la solution est à une extension près. Ça vaut le coup.

Et si votre médiathèque traîne de vieux logos et des images que plus rien n’utilise, Media Cleaner les retrouve.