Comment se protéger des hotlinks ?

À l’heure où de plus en plus de photographes ont leur espace web pour diffuser leurs images, il n’est pas rare de devoir « faire la police » avec les indésirables pompeurs et recopieurs de tous poils. L’une des pratiques les plus en vogue est le hotlink : elle consiste à afficher l’image sur un autre site, depuis votre site, directement !

Celles et ceux qui me suivent sur Facebook ont certainement pris connaissance de mes dernières sautes d’humeur sur cette pratique du hotlink… et les conséquences pour les pompeurs en herbe !

Voici quelques trucs et astuces pour s’en prémunir 🙂

Comment fonctionne le hotlinking ?

Il faut remonter au code HTML  pour comprendre d’abord comment sont affichées les images sur les pages web. Sans entrer dans les détails, le HTML est un langage simple structuré par balisage : des balises (en l’occurrence 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 de l’image, ou le texte alternatif permettant sa description, par exemple).

L’affichage classique d’une image se réalise grâce à la balise img avec ici une balise alt pour son descriptif, dans le code d’une page située sur le site www.aube-nature.com :

… <img src="/lieu/image.jpg" alt="Description" />; … Langage du code : HTML, XML (xml)

Un site effectuant un hotlink procède donc simplement, en utilisant dans l’attribut src (qui signifie « source ») de ses balises image, l’adresse directe de votre photographie. C’est d’ailleurs ce que nous faisons usuellement, par exemple, lorsque nous affichons nos images depuis nos propres sites sur les forums photo 😉

… <img src="http://www.aube-nature.com/lieu/image.jpg" alt="" />; … Langage du code : HTML, XML (xml)

Plus schématiquement, cela donne ceci :

Au final, vous vous retrouvez avec l’une de vos photos affichées sur un site qui n’est pas le votre, sans autorisation de votre part, et la cerise sur le gâteau : l’auteur de ce méfait vous pique votre bande passante !

En effet, le fichier étant « téléchargé » depuis votre serveur, c’est ce dernier qui fournira les ressources nécessaires pour délivrer l’image à l’internaute ! Imaginez l’impact que peut avoir ce genre de comportement si plusieurs de vos images sont affichées sur des forums à très fort trafic !…

Détecter les hotlinks

La première chose avant d’envisager une contre mesure, consiste simplement à retrouver les images qui sont « hotlinkées » depuis votre serveur web. Pour ce faire, deux méthodes existent :

• Utiliser les moteurs de recherche (Google notamment)
• Utiliser un script spécifique pour « tracker » les hotlinks

Méthode 1 : Utiliser Google Images

Il existe une méthode relativement fiable destinée à retrouver à minima les images hébergées sur votre serveur, mais pas affichées sur votre site, grâce aux options de recherche de Google. Toutefois, cette méthode a une limite de taille : elle ne fonctionne que pour les images indexées par le moteur de recherche !

Il suffit de se rendre dans Google Images, puis d’utiliser la syntaxe suivante :

-site:aube-nature.com inurl:aube-nature.com Langage du code : Texte brut (plaintext)

L’attribut « site: » permet de limiter les recherches à un site (ou un domaine) donné ; en utilisant le signe « -«  devant, on demande à Google d’éliminer ce critère des résultats de recherche, au lieu de l’utiliser.

L’attribut « inurl: » permet lui, de rechercher l’expression-clé qui lui est accolée, dans toutes les URL de la page.

En clair, on demande donc à Google d’afficher toutes les images non affichées sur les pages des sites « aube-nature.com », mais dont les URL dans le code, comportent la mention « aube-nature.com ».

Méthode 2 : utiliser un script

Je ne vais pas entrer dans les détails car la méthode sera abordée ci-après, mais elle consiste en gros à détecter à la volée les demandes d’images sur votre serveur, grâce à un fichier .htaccess dûment paramétré pour ce faire, et à renvoyer une image (pas forcément l’originale !) mais en passant systématiquement par un petit script php qui va préalablement noter quelque part, dans un fichier texte ou une base de donnée, les « coordonnées » du site demandeur.

C’est notamment cette méthode qui est utilisée par les outils spécifiques, que nous verrons en fin d’article ! On peut aller beaucoup plus loin avec cette méthode – on le verra plus tard – car il est également possible de fournir l’image initialement demandée, mais dans une version « édulcorée » (gros watermark par exemple)

Contres-mesures applicables aux hotlinkeurs

Il existe plusieurs mesures possibles pour « contrer » les voleurs d’images et de bande passante :

• ne rien renvoyer (l’image ne s’affichera simplement pas) : une solution radicale et efficace, demandant un minimum de ressources de votre côté
• renvoyer une image « bidon » dûment signée avec l’adresse de votre site : toujours intéressant pour rappeler à l’ordre les voleurs, et inviter indirectement ses visiteurs à venir sur votre site 🙂
• renvoyer l’image demandée, mais signée à la volée via un script
• l’une des trois solutions précédentes, gérée selon le site demandeur : un choix luxueux que permettent certains outils 😉
• renvoyer une erreur (!) sur le site du voleur : très pénible pour ses visiteurs 😉

Tous les choix sont discutables, pour ma part j’ai opté (pour ce blog par exemple) pour la solution de luxe : une gestion quasi quotidienne, mais qui permet de contrôler où et comment mon contenu est utilisé (car il n’est pas rare que le texte suive les images !!!)

Gérer le hotlink au niveau technique

Ce paragraphe va être un peu technique, aussi je préviens à l’avance que je n’assurerai aucun support technique à son propos  ; nous allons donc voir comment mettre en oeuvre simplement, sur un serveur web de type Apache (soit 99% des hébergements actuels), les scripts de détection et de gestion des hotlinks sur vos images.

Étape n°1 : détection des demandes et traitement au niveau du serveur

La base de toute gestion de hotlinking passe obligatoirement par un fichier appelé .htaccess, situé généralement à la racine de votre site web. C’est dans ce fichier que l’on procède usuellement aux optimisations techniques, à la mise en place de la réécriture d’URL, et de toutes les joyeusetés du genre : il permet, pour résumer, d’indiquer au serveur comment se comporter lorsqu’il reçoit des demandes de ressources fichier !

Notre détection de hotlink va donc utiliser un module spécifique des serveurs Apache, appelé « mod_rewrite ». Il permet notamment d’analyser les adresses de pages ou de ressources fichier demandées au serveur, et d’en transformer le cas échéant la destination.
Notre fichier .htaccess va donc se voir ajouté les lignes suivantes :

Options -Indexes <IfModule mod_rewrite.c>     RewriteEngine On    RewriteBase / </IfModule> Langage du code : Apache (apache)

Tout ce qui nous intéressera sera donc placé entre les balises <IfModule …>, ce qui permettra, si votre serveur ne gère pas la réécriture d’URL (c’est le cas chez Free me semble-t-il), de passer outre leur contenu sans générer d’erreurs.

On se contente donc d’activer la réécriture d’URL (RewriteEngine On), puis de préciser où se situe la racine du site pour ce faire (RewriteBase /) : du classique.

Le principe des règles de réécriture dans un fichier .htaccess consiste à établir des règles de sélection, appelées « conditions », puis d’appliquer une règle de réécriture en conséquence. Voici notre règle (explications ensuite !)

Options -Indexes <IfModule mod_rewrite.c>     RewriteEngine On     RewriteBase /     RewriteCond %{REQUEST_FILENAME} .*jpg$|.*jpeg$|.*gif$|.*png$ [NC]     RewriteCond %{HTTP_REFERER} !^$     RewriteCond %{HTTP_REFERER} !aube-nature\.com [NC]     RewriteCond %{HTTP_REFERER} !beneluxnaturephoto\.net [NC]     RewriteCond %{HTTP_REFERER} !chassimages\.com [NC]     RewriteCond %{HTTP_REFERER} !google\. [NC]     RewriteCond %{HTTP_REFERER} !search\?q=cache [NC]     RewriteRule (.*) http://monsite.free.fr/mon-image-bidon.jpg </IfModule> Langage du code : Apache (apache)

Nous avons donc fait le choix de cibler toutes les demandes faites au serveur, dont les noms de fichiers (REQUEST_FILENAME) contiennent .jpg, .jpeg, .gif ou .png de manière à cibler uniquement les images (ligne 7). La clause [NC] qui signifie « no case » en fin de ligne permet de s’affranchir des problèmes de majuscules/minuscules…

C’est grâce au referer (site de provenance de la demande) que nous allons établir si le demandeur est autorisé ou non à bénéficier de notre image : dans l’exemple ci-dessus, on exclut tout le monde sauf mes propres sites aube-nature.com, mais également deux célèbres forums, ainsi que les sites Google, et le cache Google.

Ces règles étant faites par exclusion, si le demandeur ne fait pas parti de ces sites, ALORS la règle ligne 14 va s’appliquer ! Ici, on a choisi de renvoyer systématiquement une image bidon, située sur un serveur Free (nb : factice dans mon exemple, ne recopiez pas bêtement !)
Il est possible de ne rien renvoyer du tout (l’image ne s’affichera simplement pas sur les sites des voleurs) grâce à la syntaxe suivante (remplace la dernière ligne du code précédent) :

RewriteRule (.*) – Langage du code : Apache (apache)

Mais il est également possible de retourner un script php, qui lui va « traiter » à la volée les paramètres qu’on lui aura passé : le fichier demandé, mais également les informations liées au demandeur !

RewriteRule (.*) /hotlink.php?img=%{SCRIPT_FILENAME}&ref=%{HTTP_REFERER} Langage du code : Apache (apache)

Les deux premières options permettent de s’arrêter là, puisqu’elles fonctionnent sans nécessité de recourir au php pour gérer le devenir des demandes. Si vous voulez cependant aller plus loin, voir l’étape suivante !

Étape n°2 : gérer les images via un script php, pour les sites non autorisés

L’optique de ce blog n’étant pas la programmation mais la photographie, je ne vais pas vous faire un cours de php. Aussi j’irai droit au but 😉 avec ce script, à disposer à la racine de votre site (au même niveau que le fichier .htaccess) :

<?php 	if ( !array_key_exists(‘img’, $_GET) ) 		exit(); 	$image = nom_de_fichier($_GET[‘img’]); 	if ( !is_image($image) ) 		exit(); 	 	// ICI LE CODE À EXÉCUTER ! 	// On peut imaginer soit un script retournant l’image mais 	// annotée de l’adresse de votre site, soit simplement l’image 	// originale, mais en inscrivant le demandeur dans un fichier 	// ou une base de données 	// Fonction retournant le nom du fichier 	function nom_de_fichier($filename) { 		$pos = strrpos(‘/’.$filename, ‘/’); 		if($pos===false) { 		return false; 		} else { 		return substr($filename, $pos); 		} 	} 	// Fonction retournant vrai si le fichier demandé est bien une image 	function is_image($file) { 		if ( !file_exists($file) || !@getImageSize($file) ) 		return false; 		return true; 	} ?> Langage du code : PHP (php)

Au niveau du code applicable, tout est possible : marquage de l’image, inscription du referer (site du voleur) dans un fichier ou une base de données, etc. ; voici un exemple de script à télécharger, que j’avais conçu il y a quelque temps déjà, et qui permet de marquer automatiquement les images avec un filigrane, à la volée.

Étape n°2 (variante) : renvoyer un message d’erreur

Méthode beaucoup plus « expéditive » : renvoyer un message d’erreur (boîte de dialogue) avec un code HTTP 401 (« accès non autorisé ») qui va s’afficher systématiquement sur le site du contrevenant ! Voici le script à inscrire dans le fichier hotlink.php :

header(‘WWW-Authenticate: Basic realm="Photographies affichées " .     "sans autorisation. Visitez https://blog.aube-nature.com pour voir " .     "les photos originales dans leur vrai contexte !"’); header(‘HTTP/1.0 401 Unauthorized’); Langage du code : PHP (php)

Inutile de vous dire que de manière générale, il n’y a pas besoin de communiquer avec le webmaster, qui retirera de lui-même les images après un bon gros stress !

Des outils pour WordPress ?

D’aucun se demanderont comment j’ai fait, depuis mes différents sites sous WordPress, pour retrouver si facilement les derniers voleurs d’image… J’ai longtemps utilisé un plugin qui n’est malheureusement plus maintenu et donc plus disponible, dont le nom très évocateur se suffit à lui-même : PictPocket !
Produit par Semageek, ce petit plugin bien pratique permettait en effet de gérer directement via le back-office de WordPress, la liste des images s’affichant sur les différents sites qui linkaient vos fichiers… Un simple clic permettait d’autoriser ou pas, et le cas échéant de classifier chaque site : super pratique, instantané et sans efforts !

Cela m’a également permis de trouver (via les images) « quelques » sites qui non seulement affichaient les photos… mais reprenaient mes articles, bien entendu sans autorisation.

Il n’existe plus aujourd’hui ; cependant on trouve quelques petits plugins qui permettent d’éviter ce genre de chose, mais ils n’ont pas de fonctionnalités aussi avancées que ce que proposait PictPocket, et c’est bien dommage !

Conclusion

Le hotlinking est une pratique de plus en plus courante, et j’ai été – même si j’étais conscient de ce phénomène depuis des années – le premier surpris quand j’ai vu combien de sites m’empruntaient mes images !

Les outils comme Google Images n’en sont pas étranger, dans le sens où ils permettent nativement l’accès direct aux fichiers image (ndlr : il existe une astuce pour éviter ça, basée sur un petit code javascript pour interdire les frames, mais elle fausse alors les statistiques de visites relevées sur votre site…) : cela incite donc quelque part les internautes à « prendre » les images là où ils les trouvent !

J’ai toujours trouvé cela un peu dommage car Google Images est une source de trafic énorme pour les professionnels de la photographie (chez moi il a représenté jusqu’à 70% de mon trafic total) : se protéger des hotlinks (à défaut de pouvoir se protéger des voleurs tout court) est donc quelque chose d’indispensable !