Comment lutter contre le hotlinking, vol de ressources web ?

Aujourd'hui, je vous propose un guide pour comprendre ce qu'est le hotlinking, un vol de ressources appartenant à votre site web... et comment faire face à cette situation.

Qu'est-ce que le hotlinking ?

Le hotlinking est une pratique néfaste qui consiste à établir des liens directs vers des ressources d'un site tiers qui ne sont pas des pages web ou des PDF (images, vidéos, autres fichiers multimédia, etc), et ce sans autorisation.

La différence avec un lien direct "classique" est d'ailleurs assez subtile : sur un site, on crée en permanence des liens vers d'autres ressources. Par exemple, on va suggérer à ses visiteurs d'aller consulter telle page web ou tel PDF... et le lien fournit un moyen d'accéder à la ressource en question de manière directe et facile. Pas besoin de demander l'autorisation du propriétaire du contenu pour faire un lien vers ce dernier. Au contraire, le lien lui est bénéfique : il renforce sa notoriété et son autorité dans son domaine.

Dans le cas du hotlinking, on fait plutôt des liens vers des fichiers média (images, vidéos, audio) pour les intégrer sur son propre site. Souvent, l'objectif n'est pas de faciliter l'accès à ces contenus mais plutôt de se les approprier.

Prenons l'exemple d'une image. José-Robert a posté sur son site un cliché inédit, dont il est l'auteur.

• Dans le cas d'un simple lien direct, un site tiers pourrait dire "José-Robert a réalisé une magnifique photo, vous pouvez la consulter ici", avec un lien.
• Dans le cas du hotlinking, le site tiers décide tout simplement de réutiliser l'image sans autorisation et, au lieu de s'embêter à la télécharger et à la remettre en ligne de son côté, il se contente de copier-coller le lien de l'image pour l'afficher sur ses propres pages. Pour l'internaute, la pratique est transparente : il va bien voir l'image s'afficher... mais en arrière-plan, elle provient du site de José-Robert et non du site "voleur".

Dans cette situation, le site tiers pille donc à la fois le fichier multimédia lui-même (autorisation non utilisée de la photo)... et les ressources du serveur, puisqu'il charge la photo depuis l'hébergement web de José-Robert.

Quel est l'intérêt du hotlinking pour le site voleur ?

Parfois, le hotlinking résulte simplement d'une erreur de débutant. Une personne, peu familière avec le sujet du droit d'auteur, pioche par exemple des images qui lui plaisent et les utilise sans les remettre en ligne. Dans ce cas, cela reste en général limité à une poignée de liens.

Dans d'autres situations, la pratique est totalement volontaire. Un site s'approprie le travail d'un autre, profite de sa notoriété voire, à grande échelle, tente par ce biais d'affecter les performances web du site pillé pour lui nuire. Le hotlinking a notamment été utilisé par certains comme stratégie SEO black hat (autrement dit, une stratégie qui s'affranchit des "bonnes pratiques" classiques du référencement naturel).

En quoi le hotlinking peut-il poser problème au site victime ?

Le non-respect des droits d'auteur

Le hotlinking va souvent de pair avec un non-respect des droits d'auteur : en effet, le site coupable utilise des fichiers qui ne lui appartiennent pas et, bien souvent le fait sans autorisation, sans rémunération et sans crédit de l'auteur initial.

Il peut donc y avoir à la fois un vol de l'oeuvre elle-même mais aussi un problème d'attribution, le site tiers laissant parfois entendre qu'il en est l'auteur.

Le vol de bande passante

C'est aussi une pratique qui implique un vol de bande passante. La bande passante, c'est le volume de données que votre site peut transférer à ses visiteurs en un laps de temps donné. A chaque fois qu'un visiteur (humain ou robot) charge une page, des images, des feuilles de style, des polices d'écriture, cela consomme de la bande passante.

Par exemple et pour schématiser, si votre page d'accueil pèse 5 Mo (comprenant le code HTML, les feuilles de style, les scripts, images, polices d'écriture, etc.) et qu'elle reçoit 1000 visites par jour, ce sont 5 Go de bande passante qui sont consommés pour l'afficher.

Cela fait partie des données que surveille votre hébergeur. Certains contrats offrent une "bande passante illimitée", ce qui signifie souvent que l'on ne vous imposera pas de limite tant que l'usage reste raisonnable, d'autres contrats spécifient une bande passante précise, notamment quand le site est hébergé sur un serveur dédié.

Si le hotlinking prend des proportions importantes (beaucoup de ressources volées, sur des sites à fort trafic), cela peut entraîner une surconsommation de bande passante donc un surcoût dans certains cas.

La perte de trafic et de revenus

Dès lors que votre contenu est volé par un site tiers, cela signifie que le trafic qui en découle ne passe pas par vos propres pages web. C'est une perte de visibilité qui peut impliquer une perte de revenus.

Par ailleurs, cela signifie aussi que le contenu en question ne génère aucun engagement puisque les internautes n'accèdent pas à votre site : pas de partage des contenus, pas de consultation d'autres pages, pas de commentaires...

Une perte de maîtrise de l'utilisation des fichiers

Si vos fichiers multimédia sont repris sans votre autorisation, cela signifie par essence que vous ne maîtrisez plus le contexte dans lequel ils sont employés : vous sont-ils attribués ? Y a-t-il une mise en contexte, des explications ? L'utilisation qui en est faite est-elle en accord avec vos principes ?

Des liens sans valeur sur le plan SEO

On entend souvent dire que "les liens sont bénéfiques pour le référencement naturel", on pourrait alors croire que le hotlinking comporte malgré tout un bénéfice pour le site pillé.

Ce n'est généralement pas le cas car les liens ne sont pas des liens hypertexte mais plus souvent des liens vers des fichiers multimédia (liens "img src" par exemple et non "a href" en HTML). Ils ont donc peu d'impact sur la recherche web classique. Ils peuvent potentiellement - cela reste à démontrer - apporter un bénéfice sur Google Images s'il y a quelques éléments permettant par ailleurs d'interpréter l'image, comme un attribut "alt" bien renseigné.

Comment détecter le hotlinking ?

On peut détecter le hotlinking en étudiant les logs serveur du site pour identifier des requêtes sur des fichiers multimédia qui viennent d'un référent externe. Les logs sont d'énormes fichiers qui consignent toutes les actions effectuées sur un site par les visiteurs, qu'il s'agisse d'humains ou de robots. Il est donc préférable de les étudier avec un logiciel dédié plutôt qu'à la main, ce qui représenterait un vrai travail de fourmi.

Vous pouvez aussi prendre appui sur des outils dédiés, comme Pixsy qui monitore toutes les utilisations de vos photos réalisées en ligne et permet de réclamer un dédommagement en cas d'utilisation frauduleuse. C'est la solution la plus adaptée à un usage professionnel sur un grand nombre d'images.

Pour un usage ponctuel, vous pouvez vous tourner vers une extension Firefox comme "Who Stole My Pictures", qui permet de rechercher à quel endroit une image précise est utilisée sur le web. Plus généralement, toute solution de recherche d'image inversée (comme TinEye ou le très performant Google Lens, accessible via Google Images) permet de détecter des sites qui utilisent vos photos.

Quelles solutions pour lutter contre le hotlinking

Utiliser le fichier .htaccess sur Apache

C'est l'une des solutions les plus répandues si votre site est hébergé sur un serveur Apache : prévoir certaines règles dans le fichier de configuration .htaccess afin d'empêcher le hotlinking.

Commencez par localiser le fichier en question sur votre serveur en utilisant un client FTP comme FileZilla. Le .htaccess doit se trouver à la racine du site. Si vous y apportez des modifications, pensez à conserver une sauvegarde du fichier d'origine : en effet, en cas d'erreur, votre site peut devenir inaccessible donc la sauvegarde vous permettra de retrouver rapidement un site fonctionnel.

Vous pouvez ajouter le code relatif au hotlinking à la fin, notamment ces lignes :

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?votresite.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

Quelques explications :

• Dans la seconde ligne, on s'assure que la requête provient bien d'un site ou d'une page référente. Cela évite que des utilisateurs lambda accédant directement au site soient affectés par les règles pour lutter contre le hotlinking.
• Dans la troisième ligne, vous devez remplacer "votresite.com" par l'URL de votre propre site : on vérifie cette fois-ci que l'URL référente ne commence pas par "http://votresite.com", "https://votresite.com", "http://www.votresite.com", ou "https://www.votresite.com", que ce soit écrit en minuscules ou en majuscules ([NC] signifie "no case", on ne tient pas compte de la casse).
• Dans la quatrième ligne, on définit un certain nombre de types de fichiers (vous pouvez en ajouter) auxquels les règles s'appliqueront... et on établit les règles comme suit : si les conditions des lignes précédentes sont remplies (autrement dit, une requête est émise par un site clairement identifié qui n'est pas le vôtre), alors on bloque l'accès en renvoyant un code 403 (la lettre F signifie "Forbidden").

C'est un code basique que vous devez personnaliser. En effet, en l'état, tous les sites en-dehors du vôtre auront l'interdiction d'afficher vos images. Or, vous souhaitez sans doute qu'elles puissent apparaître sur les réseaux sociaux et dans certains contextes. Dans ce cas, il faut ajouter des lignes supplémentaires au code, par exemple :

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?votresite.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?facebook.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

Vous pouvez également choisir un autre comportement si quelqu'un tente de faire du hotlinking sur vos fichiers : remplacer l'image hotlinkée par une autre. Quand j'étais jeune et la (pas très) innocente propriétaire d'une galerie de photos en ligne sans cesse pillée, j'affichais une image pour adultes à chaque fois que quelqu'un faisait du hotlinking. Autrement dit, la personne pensait afficher l'une de mes photos... et le lien était automatiquement remplacé par un contenu bien moins catholique, hum.

De manière plus professionnelle, vous pouvez afficher une publicité pour votre propre site afin que les situations de hotlinking vous soient profitables. Comment ? A la place de la ligne RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L], utilisez cette ligne :

RewriteRule \.(jpg|jpeg|png|gif)$ https://www.votresite.com/imagederemplacement.jpg [R,L]

En remplaçant bien sûr l'URL par celle de l'image que vous souhaitez afficher. A chaque fois qu'un site autre que le vôtre et non autorisé par vos conditions à afficher les images fera du hotlinking, c'est cette image qui apparaîtra.

Pensez à bien tester vos règles .htaccess (il existe par exemple ce testeur htaccess en ligne).

Utiliser les valid_referers sur Nginx

Sur les serveurs Nginx, il existe le module ngx_http_referer_module qui permet notamment de définir une directive valid_referers, comme ceci par exemple :

location ~ \.(jpe?g|png|gif)$ {
    valid_referers none blocked votresite.com *.votresite.com;
    if ($invalid_referer) {
        return 403;
    }
}

Le principe est le même que sur Apache : si l'on tente d'accéder à une ressource parmi celles listées (ici, jpg, jpeg, png et gif) et que le site référent ne fait pas partie de ceux listés (ici none = référent vide ; blocked = référent présent mais supprimé par un pare-feu ou un proxy ; votre propre site), alors on renvoie une erreur 403.

Utiliser un CDN

Certains sites utilisent un CDN (content delivery network = réseau de diffusion de contenu), qui permet de créer des "copies" d'un site à différents endroits du globe, de manière à fournir aux visiteurs le contenu le plus proche géographiquement possible de chez eux, ce qui réduit le temps de chargement.

Des CDN comme Cloudflare ou KeyCDN offrent des options contre le hotlinking qui peuvent être activées facilement (via le Dashboard, section "Cloudflare Scrape Shield" sur Cloudflare par exemple).

Soumettre une requête DMCA à Google

Si le hotlinking nuit à vos droits d'auteur (utilisation de vos contenus sans autorisation, à des fins commerciales par exemple), vous pouvez couper l'herbe sous le pied du voleur en envoyant à Google une requête DMCA. Cela équivaut à signaler une infraction au droit d'auteur, qui va pousser Google à désindexer la page litigieuse où ce dernier apparaît. Ainsi, le site coupable n'en retirera pas de visibilité organique.

Vous pouvez passer par la rubrique Demandes légales du moteur de recherche et vous laisser guider. Le contrevenant disposera d'un délai pour répondre. En l'absence de réaction de sa part, la page restera désindexée.

Décourager le hotlinking par l'ajout d'un filigrane

Le principe du filigrane (ou watermark en anglais) consiste à marquer une photo à l'aide d'un logo ou autre information permettant d'identifier l'auteur (URL du site, nom du photographe, etc). L'idée étant de décourager les usages non autorisés en rendant l'auteur plus identifiable.

C'est une méthode qui a ses limites car pour fonctionner, une watermark doit être difficile à retirer donc couvrir des portions importantes du contenu, elle va donc gêner le regard y compris pour les utilisateurs légitimes qui consulteront la photo sur votre propre site. Par ailleurs, il existe aujourd'hui des intelligences artificielles capables de retirer les filigranes, même complexes, sans qu'il soit nécessaire de recourir à Photoshop.

Les filigranes placés dans un coin de l'image sont plus user-friendly mais les personnes mal intentionnées ne se gênent pas pour les couper en recadrant simplement la photo. Ceci dit, cela prouve l'intentionnalité du vol de contenu, un argument qui peut peser si vous envoyez une facture dans la foulée pour exiger un dédommagement !

On peut apposer un filigrane à l'aide de logiciels de retouche d'images comme Photoshop, de logiciels spécialisés comme Watermark.ws mais aussi de manière dynamique (dynamic watermarking) via des plugins WordPress comme Easy Watermark ou Image Watermark.

La fausse bonne idée : l'interdiction du clic droit

Pour copier-coller le lien d'un fichier et l'utiliser, le clic droit est la solution la plus simple... donc on pourrait partir du principe que l'interdire décourage le hotlinking.

Cependant, c'est une méthode que je désapprouve fortement pour différentes raisons :

• Désactiver le clic droit a un vrai impact négatif sur l'expérience utilisateur, car on se sert de cette fonctionnalité pour bien des raisons tout à fait légitimes : utiliser certaines extensions du navigateur, ouvrir des liens dans un nouvel onglet, copier-coller des informations pour un usage privé, etc.
• Cela n'empêche pas la copie si quelqu'un veut vraiment copier : il existe une foule de manières de récupérer le lien d'une image en affichant le code source de la page, en désactivant JavaScript, etc.
• Ca n'affecte pas les mobiles, hormis si vous ajoutez un blocage de la pression longue mais là encore, c'est néfaste pour l'expérience utilisateur.

Si vous y tenez malgré tout, vous pouvez placer ce type de script sur vos pages :

<script>document.addEventListener('contextmenu', function(e) { e.preventDefault();alert('Le clic droit est désactivé');}, false);</script>

Il existe aujourd'hui beaucoup de ressources gratuites ou à petit prix pour bénéficier d'images sans recourir au hotlinking, beaucoup de vidéos publiques sur des plateformes comme YouTube pouvant être intégrées sur un site via une iframe, sans parler de la possibilité de rémunérer un créateur si vous souhaitez vraiment utiliser son contenu et ne trouvez aucune alternative disponible. Un pas de plus vers une approche plus éthique de l'utilisation de contenus !