Comment utiliser en toute sécurité des images vectorielles avec WordPress

Publié: 2019-06-12

Il existe des dizaines de types de fichiers image que vous pouvez utiliser pour vos médias. Prêt à l'emploi, WordPress prend en charge la majorité des types de fichiers image les plus courants, notamment .jpeg , .png , .gif , etc. Cependant, il n'inclut aucun support pour les images vectorielles.

Dans le passé, nous avons expliqué comment créer des graphiques vectoriels évolutifs (SVG), ainsi que leurs avantages. Pour cet article, nous allons une fois de plus passer en revue le concept des SVG, pourquoi les utiliser dans le mauvais sens peut être dangereux et comment les implémenter réellement sans compromettre votre site Web.

Mettons-nous au travail!

Abonnez-vous à notre chaîne Youtube

Une introduction aux SVG

Les SVG sont des images basées non pas sur des pixels, mais sur des vecteurs, comme vous l'avez peut-être deviné d'après le nom. Si vous essayez d'ouvrir un fichier image normal à l'aide d'un éditeur de texte, vous verrez un charabia relatif. Cependant, si vous essayez d'ouvrir un SVG à la place, vous verrez probablement un code tel que le suivant (tiré de notre premier article sur les SVG) : 

<svg viewBox='0 0 105 93' xmlns='http://www.w3.org/2000/svg'></pre>
<path d='M66,0h39v93zM38,0h-38v93zM52,35l25,58h-16l-8-18h-18z' fill='#ED1C24'/>
</svg>

Ceux-ci, en un mot, sont une série de vecteurs qui constituent une représentation du logo Adobe, avec une touche de couleur :

Le logo Adobe.

Les SVG sont uniques car ils conservent leur qualité quelle que soit leur taille (c'est-à-dire qu'ils sont évolutifs) et resteront parfaits quelles que soient les dimensions utilisées. Cela en fait un type de fichier idéal pour quelques cas d'utilisation spécifiques :

  • Des logos que vous souhaiterez souvent réutiliser sur différentes plateformes.
  • Icônes que vous voudrez mettre à l'échelle en fonction du contexte.
  • Images que vous voudrez animer à l'aide de feuilles de style en cascade (CSS).

Techniquement, il existe trois façons de créer des SVG. Vous pouvez écrire le code vous-même, ce qui n'est pas pratique à moins d'être une machine. Les autres voies seraient de dessiner un SVG à partir de zéro, ou de prendre une image existante et d'utiliser un logiciel tel qu'Illustrator ou Sketch pour l'exporter en SVG.

Malgré les points positifs, il y a deux inconvénients à utiliser des SVG. Premièrement, ils ne sont pas pratiques pour les graphiques complexes. Par exemple, une photographie normale prendrait des millions de vecteurs à composer, ce qui ferait un fichier SVG gigantesque. Le deuxième inconvénient de l'utilisation des SVG est lié à la sécurité – et nous en discuterons dans la section suivante.

Pourquoi l'utilisation de SVG peut affecter la sécurité de votre site Web

Bien que nous nous référons généralement aux fichiers SVG en tant que fichiers image, il serait plus exact de les appeler « documents ». Après tout, vous pouvez facilement ouvrir, lire et modifier un fichier SVG à l'aide d'un éditeur de texte, qui est similaire à un document ordinaire.

Le problème réside dans la possibilité d'ajouter du JavaScript à côté des informations vectorielles. Théoriquement, cela signifie que la mise en œuvre du support SVG sur votre site Web pourrait vous exposer à des attaques si quelqu'un télécharge un fichier contenant du code malveillant.

C'est une préoccupation tellement importante que le support SVG pour WordPress est en discussion depuis plus de six ans :

Un billet Trac d'il y a six ans.

Bien que vous n'ayez pas à parcourir tout le ticket, l'essentiel est qu'il existe un moyen de s'assurer que le code SVG que vous téléchargez sur WordPress est sûr, la mise en œuvre de la fonctionnalité peut causer plus de problèmes que d'avantages.

À l'heure actuelle, il existe déjà plusieurs outils que vous pouvez utiliser pour garantir la sécurité de vos SVG, appelés « désinfectants ». Cependant, il n'y a apparemment pas de bons moyens d'implémenter leurs fonctionnalités dans WordPress actuellement.

Dans l'ensemble, l'ajout du support SVG à WordPress est relativement simple dans la pratique. La vraie difficulté réside dans le fait de le faire d'une manière qui ne laisse pas votre site Web vulnérable aux attaques potentielles.

2 façons d'utiliser en toute sécurité des images vectorielles avec WordPress

Pour cette section, nous explorerons à la fois une approche manuelle et une approche basée sur des plugins pour une utilisation sûre de SVG dans WordPress. Vous serez alors en mesure de choisir la meilleure option pour vos besoins. Allons-y !

1. Ajoutez le support SVG manuellement et désinfectez votre code

Vous pouvez ajouter le support SVG à WordPress en quelques minutes avec un extrait de code. Cependant, cela vous laisserait ouvert aux problèmes de sécurité potentiels dont nous avons discuté précédemment. L'approche la plus sécurisée de l'implémentation SVG implique les étapes suivantes :

  1. Activez le support SVG en modifiant votre fichier functions.php .
  2. Limitez les rôles d'utilisateur que vous souhaitez pour pouvoir télécharger des fichiers .svg sur WordPress.
  3. Désinfectez chaque fichier SVG avant de le télécharger.

Dans l'ensemble, les étapes un et deux ne sont pas difficiles à accomplir. La première tâche consiste à accéder à votre site Web via le protocole de transfert de fichiers (FTP) et à accéder à votre dossier racine WordPress. À l'intérieur, recherchez votre fichier functions.php , ouvrez-le et ajoutez le code suivant (avec l'aimable autorisation de Chris Coyier de CodePen et CSS Tricks) : 

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }

  $filetype = wp_check_filetype( $filename, $mimes );

  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];

}, 10, 4 );

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

function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );

Cela remplit deux fonctions – il vous permet de télécharger des fichiers SVG sur WordPress et de les visualiser dans votre médiathèque. Une fois que vous avez ajouté le code, enregistrez les modifications dans votre fichier functions.php et fermez-le.

Les choses deviennent maintenant un peu plus compliquées, car nous devons empêcher les utilisateurs en qui nous n'avons pas confiance de télécharger des SVG corrompus. Par exemple, vous pouvez faire confiance à vos éditeurs et auteurs pour télécharger les bons fichiers, mais pas à vos contributeurs. Vous pouvez procéder de deux manières :

  1. Créez des rôles d'utilisateur personnalisés avec un accès limité ou inexistant à la médiathèque.
  2. Utilisez un plugin, tel que WP Upload Restriction, pour limiter les types de fichiers que chaque rôle d'utilisateur peut télécharger.

Les deux approches ont leurs défauts, ce qui est une des raisons pour la mise en œuvre manuelle SVG peut se compliquer. Cependant, une fois que vous avez choisi une méthode pour vous assurer que personne ne peut télécharger de SVG malveillant, vous devez également vous assurer de ne pas le faire par erreur.

Idéalement, vous exécuterez chaque SVG que vous téléchargez sur votre site Web via un outil de désinfection avant de le faire. Cela prendra votre fichier, assurez-vous qu'il n'inclut rien de fâcheux et le supprimera si c'est le cas. En fin de compte, cela vous laisse avec un fichier SVG propre que vous pouvez enfin télécharger sur WordPress.

2. Utilisez le plugin Safe SVG

Avec l'approche ci-dessus, nous voulions vous montrer à quel point l'implémentation SVG sûre peut être complexe. C'est pour que vous puissiez bien apprécier ce que fait le plugin Safe SVG.

Le plugin Safe SVG.

En un mot, ce plugin prend en charge tous les problèmes que nous avons énumérés précédemment, notamment :

  • Vous permettant de télécharger des SVG en premier lieu.
  • Assurez-vous que vous pouvez voir vos SVG dans la médiathèque.
  • Désinfection du code de chaque SVG que vous téléchargez pour éviter les problèmes de sécurité.

C'est à peu près un type de plugin plug-and-play et c'est certainement l'approche la plus simple pour une implémentation SVG sûre dans WordPress. Si vous avez l'intention d'utiliser des SVG, nous vous recommandons de l'essayer.

Comment animer des SVG à l'aide de CSS et de plugins

Si vous rencontrez tous les problèmes (selon la méthode } que vous utilisez) pour implémenter des SVG dans WordPress, vous voudrez probablement en avoir pour votre argent. Cela signifie utiliser CSS pour animer vos SVG si la situation l'exige. Il existe deux manières de procéder, que nous avons abordées dans le passé :

  1. Animez les SVG manuellement avec CSS comme vous le feriez avec n'importe quel autre élément.
  2. Utilisez des outils tels que SVGator pour vous aider à générer et à animer des SVG.

Si vous êtes prêt à expérimenter un peu, certaines animations ici et là peuvent vraiment améliorer l'expérience utilisateur de votre site. Plus important encore, utiliser des SVG et des CSS pour accomplir cela est bien mieux que d'ajouter des vidéos ou des GIF, en particulier pour les appareils mobiles.

Conclusion

Les SVG sont un choix fantastique pour de nombreuses situations. Pour donner un exemple, ils sont l'option parfaite pour les logos de sites Web en raison de leur évolutivité. En général, l'utilisation de SVG peut vous aider à concevoir un site Web plus réactif, ce qui est toujours une bonne chose pour vos utilisateurs.

Cependant, si vous envisagez d'ajouter le support SVG à WordPress, vous devez vous assurer d'utiliser une approche qui protège votre site. Il y a deux méthodes à recommander :

  1. Ajoutez le support SVG manuellement et désinfectez votre code.
  2. Utilisez le plugin Safe SVG.

Avez-vous des questions sur la façon d'utiliser les SVG en toute sécurité dans WordPress ? Parlons-en dans la section commentaires ci-dessous!

Image miniature de l'article : microtic / shutterstock.com