Comment empêcher le hotlinking d'image dans WordPress ?

"Dois-je conserver ou supprimer des liens d'image dans WordPress ?" C'est une question qui peut être longuement débattue.

Même si après avoir choisi l'hébergement WordPress infogéré, vous avez peut-être conservé les paramètres par défaut. Mais imaginez, lorsque vous téléchargez et insérez une image dans un article ou une page, un lien est automatiquement ajouté à l'image elle-même.

Et si vos visiteurs cliquent sur cette image dans un article, ils seront déplacés vers un autre site Web ou une page qui n'affiche que l'image dans sa taille d'origine. Alors qu'en général, les images sont mises à l'échelle pour s'adapter parfaitement à vos articles. Ce phénomène est appelé hotlinking ou inline linking.

Qu'est-ce que le Hotlinking d'images ?

Le hotlinking, également appelé « vol de bande passante », est une pratique abusive mise en œuvre par des individus qui créent des liens directs vers des contenus (images, vidéos) hébergés sur d'autres serveurs afin d'utiliser leurs ressources de calcul et de bande passante.

Un exemple classique consiste en des liens directs vers des contenus multimédias sur un serveur A qui sont insérés dans des pages web servies par le serveur B ; le navigateur du visiteur qui accède à la page Web sur le serveur B fera des requêtes HTTP au serveur A pour récupérer des ressources multimédias, ce qui entraînera un gaspillage de CPU et de bande passante, et finalement de l'argent.

Comment fonctionne le hotlink ?

Il faut revenir au code HTML pour comprendre d'abord comment les images sont affichées sur les pages web.

Sans entrer dans les détails, le HTML est un langage simple structuré par du balisage : des balises (en l'occurrence des balises HTML) délimitent chaque élément de la page de manière hiérarchique, encadrant les valeurs et apportant des attributs à leur contenu (la largeur ou la hauteur du image, ou le texte alternatif permettant sa description, par exemple).

L'affichage classique d'une image est réalisé avec une balise img pour l'image et une balise alt pour la description dans le code d'une page située sur un site web. Par exemple, veuillez considérer les scénarios suivants.

Code HTML du serveur Un site Web :

<img src="/image.jpg" alt="description" />

Un site réalisant un hotlink procède donc simplement, en utilisant dans l'attribut src (qui signifie source) des balises d'images, l'adresse directe de vos images.

C'est ce que nous faisons habituellement, par exemple, lorsque nous affichons nos images à partir de nos propres sites Web.

Code HTML du site Web du serveur B :

<img src=”http://www.votredomaine.com/image.jpg” alt=”description” />

Au final, vous vous retrouvez avec une de vos images postée sur un site qui n'est pas le vôtre, sans autorisation de votre part, et cerise sur le gâteau : l'auteur de ce méfait pique votre bande passante !

Comment détecter les liens dynamiques ?

Ce n'est pas évident!

Vous pouvez toujours utiliser des outils tels que TinEye. Il s'agit d'une extension de site Web et de navigateur, qui pourra rechercher des images similaires à celle que vous indiquez. Cela fonctionne très bien, dans la limite des sites que TinEye indexe, et nécessite de vérifier toutes vos images à la main !

L'autre solution consiste à automatiser la détection des images chargées depuis un autre site que le vôtre. C'est techniquement plus complexe mais ça marche très bien.

En principe, le fichier .htaccess du serveur Apache se charge d'intercepter les images avant leur affichage.

Comment empêcher le hotlinking dans WordPress en utilisant .htaccess

Voyons comment vous pouvez empêcher le hotlinking dans votre WordPress en insérant quelques lignes dans le fichier .htaccess dans le dossier racine du document.

Connectez-vous à votre plateforme d'hébergement , utilisez vos identifiants de connexion dans n'importe quel logiciel FTP (j'utilise Filezilla), allez sur /public_html/ → et accédez à votre fichier .htaccess .

Imaginez l'impact que ce genre de comportement peut avoir si plusieurs de vos images sont affichées sur des forums à très fort trafic ?

Tout d'abord, vous devez afficher/modifier (ou créer) le fichier .htaccess dans le répertoire racine de votre site Web.

Une fois le fichier ouvert, collez les lignes suivantes à la fin et enregistrez le fichier :

RewriteEngine sur
RewriteCond "%{HTTP_REFERER}" "!^$"
RewriteCond "%{HTTP_REFERER}" "!www.votredomaine.com" [NC]
RewriteRule "\.(jpg|jpeg|png|gif|svg)$" "-" [F,NC]

Remarque : n'oubliez pas de remplacer votredomaine.com par le nom et l'extension de votre site Web.

• La première ligne sert à activer mod_rewrite .
• La deuxième ligne autorise les référents vides. Vous devez l'activer car certains visiteurs peuvent utiliser un pare-feu personnel ou un programme antivirus qui supprime les informations de référence de page envoyées par le navigateur Web.
• La troisième ligne, en revanche, est celle qui empêche le téléchargement et le hotlinking du contenu, lorsque le HTTP_REFERER n'est pas explicitement défini sur yourdomain.com , qui est censé être celui à protéger. Dans ce cas, il faut remplacer votredomaine.com par le nom de domaine que vous souhaitez protéger.
• La quatrième ligne précise les extensions interdites, celles qui sont inhibées par le hotlinking.

Dans ce cas, vous pouvez spécifier n'importe quel nombre d'extensions séparées par le « | " personnage. De plus, dans ce cas, la comparaison est insensible à la casse et en cas de correspondance positive, la requête est réécrite sur un fichier nul, provoquant une erreur 403 .

Depuis le navigateur, à l'instar des serveurs A et B au début, la page Web chargée par le serveur B semblerait n'avoir aucun contenu chargé par A . L'utilisation de la bande passante et du CPU du serveur A devient ainsi négligeable et limitée au seul traitement de la requête par le moteur de réécriture.

Utiliser le plugin pour éviter les hotlinks

Comme vous le savez probablement, un plug-in peut étendre les fonctionnalités de votre site Web et ainsi empêcher le hotlinking sur votre site Web. Voici 2 des plugins les plus populaires dans ce domaine :

1. Sécurité iThèmes

iThemes Security corrige les vulnérabilités courantes, arrête les attaques automatisées et sécurise les informations d'identification. Le plugin dispose d'un système d'analyse des logiciels malveillants, ainsi que de la possibilité de suivre les utilisateurs qui modifient le contenu, ainsi que les connexions et les déconnexions. De nombreuses autres fonctionnalités vous aident à sécuriser votre site Web.

Emballer!

Pour voir si vous avez bloqué le lien via .htaccess ou plugin, testez votre site Web sur altlab.com, où vous devrez entrer l'adresse de l'image. S'il ne s'affiche pas ou si l'image que vous choisissez s'affiche, l'anti-hotlink sera actif.

Connaissez-vous d'autres moyens de supprimer des liens des images WordPress ? Si oui, partagez votre façon de procéder dans les commentaires ci-dessous.

* Ceci est un article invité de Saud Razzak de Cloudways.