Comment utiliser les images vectorielles en toute sécurité dans WordPress

Il existe des dizaines de types de fichiers Image disponibles pour les fichiers médias. WordPress prend en charge la plupart des types de fichiers Image les plus populaires, y compris. JPEG. PNG. GIF, etc. Cependant, il n’inclut aucun support pour les images vectorielles. Dans le passé, nous avons discuté de la création de graphiques vectoriels extensibles (SVG) et de leurs avantages. Dans cet article, nous examinerons à nouveau le concept de SVG, car une utilisation incorrecte de SVG peut ne pas être sûre et comment mettre en œuvre SVG sans affecter le site Web.
Allons travailler! SVG est une image vectorielle, pas un pixel, comme vous pouvez le deviner à partir du nom. Si vous essayez d’ouvrir un fichier image normal à l’aide d’un éditeur de texte, vous verrez un fichier image relativement incompréhensible. Cependant, si vous essayez d’ouvrir SVG, vous pouvez voir ce code (extrait de notre premier article SVG):

En bref, il s’agit d’une série de vecteurs qui constituent la représentation du logo d’Adobe avec une touche de couleur insérée: Les SVG sont uniques en ce sens qu’ils conservent leur qualité dans n’importe quelle taille (c’est – à – dire qu’ils sont extensibles) et qu’ils conservent un aspect parfait, quelle que soit la taille utilisée. Cela en fait le type de fichier idéal pour certains cas d’utilisation spécifiques: les logos que vous voulez souvent réutiliser sur différentes plateformes. Icône à redimensionner en fonction du contexte. Image à animer avec une feuille de style en cascade (CSS). Techniquement, il y a trois façons de créer un SVG. Vous pouvez écrire votre propre code, ce qui n’est pas pratique à moins d’être une machine. Une autre façon est de dessiner SVG à partir de zéro, ou d’obtenir une image existante et de l’exporter vers SVG en utilisant un logiciel comme illustrator ou sketch.
Malgré les aspects positifs, l’utilisation de SVG présente deux inconvénients. En pri
Deuxièmement, ils ne s’appliquent pas aux dessins complexes. Par exemple, une photo normale nécessite des millions de vecteurs pour se composer, ce qui crée un énorme fichier SVG. Le deuxième inconvénient de l’utilisation de SVG est lié à la sécurité, dont nous discuterons dans la section suivante. Pourquoi l’utilisation de SVG affecte – t – elle la sécurité du site Web? Bien que nous appelions généralement SVG un fichier image, il est plus exact de l’appeler \
Le problème est la capacité d’ajouter des informations JavaScript et vectorielles. En théorie, cela signifie que si quelqu’un télécharge un fichier contenant du Code malveillant, la mise en œuvre du support SVG sur votre site Web peut vous exposer à une attaque. Le support de SVG pour WordPress est discuté depuis plus de six ans et c’est un sujet de préoccupation: Bien que vous n’ayez pas besoin d’exécuter l’intégralité du billet, l’essence est que la mise en œuvre de cette fonctionnalité peut causer plus de problèmes que d’avantages jusqu’à ce qu’il y ait un moyen d’assurer la sécurité du Code SVG téléchargé sur WordPress.
Plusieurs outils sont maintenant disponibles pour assurer la sécurité des SVG, appelés « désinfectants ». Cependant, il n’existe actuellement aucun moyen efficace de mettre en œuvre leurs fonctionnalités dans WordPress. Dans l’ensemble, l’ajout du support SVG à WordPress est relativement simple dans la pratique. La vraie difficulté est de le faire afin de ne pas rendre votre site vulnérable aux attaques potentielles. 2 façons d’utiliser en toute sécurité les images vectorielles WordPress dans cette section, nous explorons les méthodes manuelles et plug – in pour utiliser en toute sécurité SVG dans WordPress. Vous serez alors en mesure de choisir les meilleures options en fonction de vos besoins. Allons – y!
1. Ajout Manuel du support SVG
Vous pouvez ajouter le support SVG à WordPress en quelques minutes à travers un morceau de code. Toutefois, cela vous exposera aux problèmes de sécurité potentiels dont nous avons discuté précédemment. La façon la plus sûre de mettre en œuvre SVG comprend les étapes suivantes: activer le support SVG en éditant les fonctions de fichier. Php. Limiter le rôle de l’utilisateur pour télécharger le fichier. SVG sur WordPress. Désinfectez chaque fichier SVG avant de le télécharger. Dans l’ensemble, les étapes 1 et 2 ne sont pas difficiles à réaliser. La première tâche consiste à accéder à votre site Web via le Protocole de transfert de fichiers (FTP) et à naviguer dans le dossier principal WordPress. En interne, trouvez la fonction fichier. Php, ouvrez – le et ajoutez le code suivant (fourni par Chris coyier des conseils de codepen et CSS):
\/\/ Autoriser SVG
Add _ filter (‘WP check FileType and ext’, Function ($Data, $file, $FileName, $mimes) {
Global $wp \ u version;
Si ($wp \ u version! = ‘4.7.1’) {
Renvoie $data;
}
$FileType = WP _ check FileType ($FileName, $mimes);
Retour
\
\
\
G);
}, 10, 4);
Fonction CC _ MIME type ($mimes) {
$mimes [‘SVG’] = \
Renvoie $mimes;
}
Ajouter un filtre (‘upload _ mimes’,’ CC MIME type ‘);
Fonction Fix _ SVG () {
Echo \
– Oui. Pièce jointe – 266×266. Vignettes IMG {
Largeur: 100%! Important
Hauteur: voiture! Important
}
‘;
}
Ajouter _ action (‘admin Head’, ‘Fix SVG’);
Cela permet deux fonctions: il vous permet de télécharger des fichiers SVG sur WordPress et de les voir dans la médiathèque. Une fois le Code ajouté, enregistrez les modifications apportées à la fonction fichier. PHP et fermez – le.
Maintenant, les choses deviennent un peu compliquées parce que nous devons empêcher les utilisateurs en qui nous n’avons pas confiance de charger des SVG corrompus. Par exemple, vous pouvez faire confiance à t
Comme pour tout autre élément, utilisez SVG manuellement en utilisant CSS. Utilisez des outils comme svgator pour vous aider à générer et animer SVG. Si vous êtes prêt à faire des expériences, certaines animations ici ou là peuvent vraiment améliorer l’expérience utilisateur de votre site. Plus important encore, il est préférable d’utiliser SVG et css pour ce faire plutôt que d’ajouter une vidéo ou un GIF, en particulier pour les appareils mobiles. Conclusion SVG est un choix idéal dans de nombreux cas. Par exemple, en raison de leur extensibilité, ils sont parfaits pour les logos de site. En général, l’utilisation de SVG peut vous aider à concevoir un site Web qui répond plus rapidement, ce qui est toujours une bonne chose pour vos utilisateurs. Cependant, si vous prévoyez d’ajouter le support SVG à WordPress, vous devez vous assurer d’utiliser la méthode de protection du site. Deux méthodes sont recommandées: l’ajout Manuel du support SVG et le Code de désinfection. Utilisez le plug – in SVG sécurisé. Avez – vous des questions sur la façon d’utiliser SVG en toute sécurité dans WordPress? Discutons – en dans la section commentaires ci – dessous! Microcosme de l’article: microtic \/ shutterstock. Com