HotLink : Protéger vos images sous Wordpress.

Dans ce tutoriel, nous verrons comment lutter contre le hotlink de vos images sous wordpress. Mais avant de commencer une petite définition s’impose :
Le hotlink est une pratique de plus en plus répandu, et pourtant illégale.
On la retrouve notamment dans les forums.

Mais qu’est ce que c’est ?

Tout d’abord expliquons que chaque site a un espace où il stocke ses images. Chaque fois qu’une de ses images est affichée quelque part cela a une incidence sur ce qu’on appelle sa bande passante.
Le hotlink est l’affichage d’une image en la prenant directement à la source du site qui la propose.
Au lieu d’enregistrer l’image sur son ordinateur  la personne se servira de l’url de cette image afin de l’afficher sur son forum, blog.

Quelles sont les incidences de cette pratique ?

Tout d’abord cela ralentit le site hotlinké ensuite pour les nombreux sites payant leur bande passante cela a un coût financier puisqu’à chaque fois que l’image va s’afficher sur un site ou sur une communauté ou sur un autre site, cela sera financièrement comptabilisé chez le site qui stocke cette image, cela a d’ailleurs déjà entrainé de nombreuses fermetures de sites ne pouvant plus assurer financièrement, merci aux hotlinkeurs !

Comment se rendre compte qu’une image est hotlinkée ?

Simplement en se plaçant dessus, en faisant un clic droit avec sa souris, puis propriétés, là s’affiche l’url de l’image, si l’url correspond au site sur lequel vous êtes il n’y a pas de problème, si l’url indique un autre site cette image est hotlinkée.

Pourquoi les gens utilisent le hotlink ?

Pour les communautés cela leur permet d’économiser leur espace de stockage réduit et donc de ne pas payer pour en avoir plus.
Pour les forums cela permet d’afficher des images, puisque seules les images provenant du net, donc ayant un url peuvent s’afficher.

Quelles solutions ?

Nous allons voir une solution à l’aide du fichier .htaccess et le module Mod_rewrite ou la réécriture des URL « à la volée » d’apache.

Voici un exemple de mon fichier .htaccess : (les instructions en gras concerne la mise en place de notre système de protection contre les hotlink).

Pour ce faire, j’ai mis en place une règle Apache pour changer à la volée mes images utilisées sur des sites non autorisés. Dans le fichier .htaccess de mon blog, j’ai ajouté des conditions pour pouvoir utiliser mes images:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://quick-tutoriel.com/.*$   [NC]
RewriteCond %{HTTP_REFERER} !^http://quick-tutoriel.com$   [NC]
RewriteRule .*\.(jpg|jpeg|gif|png|bmp)$ http://quick-tutoriel.com/images/image_unauthorized_access.png [R,NC]

Toutes les images utilisées en dehors du domaine quick-tutoriel.com et de ses sous domaines sont remplacées par une image explicite:

Pour ne pas bloquer les lectures depuis les lecteurs RSS courants comme FeedBurner, Google Reader, Netvibes et Wikio, j’ai ensuite ajouté de nouvelles conditions :

RewriteCond %{HTTP_REFERER} !^http://feeds2.feedburner.com/Quick-tutoriel/.*$   [NC]
RewriteCond %{HTTP_REFERER} !^http://feeds2.feedburner.com/Quick-tutoriel$   [NC]
RewriteCond %{HTTP_REFERER} !^http://www.google.com/reader/.*$   [NC]
RewriteCond %{HTTP_REFERER} !^http://www.google.com/reader$   [NC]
RewriteCond %{HTTP_REFERER} !^http://www.netvibes.com/.*$   [NC]
RewriteCond %{HTTP_REFERER} !^http://www.netvibes.com$   [NC]
RewriteCond %{HTTP_REFERER} !^http://images.google.fr/.*$   [NC]
RewriteCond %{HTTP_REFERER} !^http://images.google.fr$   [NC]
RewriteCond %{HTTP_REFERER} !^http://images.google.com/.*$   [NC]
RewriteCond %{HTTP_REFERER} !^http://images.google.com$   [NC]

Si vous ne rajouter pas ces conditions voici ce qui peut se passer lorsqu’un internaute consulte ses flux RSS depuis google reader par exemple :

Voila, si vous êtes confronté au même problème, il vous suffit de changer quick-tutoriel.com par votre nom de domaine et de coller le tout dans le fichier .htaccess à la racine de votre site.

Attention en fonction des hébergeurs des règles spécifiques peuvent apparaître dans la gestion du fichier .htaccess ou des chemins relatifs ou absolu, …..

Il est utile de préciser que certains hébergeurs n’ont pas activé le module de réécriture (mod_rewrite). Dans ce cas, vous n’avez malheureusement aucune possibilité de l’utiliser, à moins de casser le petit cochon en porcelaine qui traîne chez vous et changer d’hébergeur.

Maintenant, essayons d’expliquer ce que sont les réécritures conditionnelles :

Nous allons ici détailler la réécriture sous conditions à travers quelques exemples concrets.

• Une page d’accueil différente selon le navigateur

RewriteCond  %{HTTP_USER_AGENT}  ^Mozilla.*
RewriteRule  ^/$    /complexe.html  [L]
RewriteCond  %{HTTP_USER_AGENT}  ^Lynx.*
RewriteRule  ^/$    /simple.html  [L]
RewriteRule  ^/$    /standard.html  [L]

Un nouveau mot-clé fait son apparition ici : « RewriteCond » ou « condition de réécriture ».

La syntaxe est simple et de la forme : RewriteCond variable_testée valeur_de_comparaison

Dans l’exemple, testons si l’identifiant du navigateur (%{HTTP_USER_AGENT}) commence par Mozilla (^Mozilla) et est suivi par une chaîne quelconque. (.*)

Si cette règle est vraie, nous réécrivons le répertoire racine du site(^/$ signifie « début de ligne/fin de ligne » ou simplement / seul sur la ligne)) en page « complexe.html » et arrêtons nos réécritures [L] .
Procédons de même pour Lynx, qui se satisfera d’une page simple vu ses fonctionnalités réduites et enfin, si aucune des 2 règles précédentes ne s’applique, soit pour tous les autres navigateurs, redirigeons les vers notre page « standard.html ».

• Protégeons nos fichiers images

Évitons maintenant que d’autres sites ne fassent un lien direct vers nos images, en nous détournant de la bande passante:

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://www.votredomaine.net/.*$ [NC]
RewriteRule .*\.(jpg|jpeg|gif|png|bmp)$ http://www.votredomaine.net/image_unauthorized_access.png [R,NC]

En mettant plusieurs conditions à la suite, un ET logique est effectué entre elles. Pour que la règle de réécriture soit effectuée, il faut donc que toutes les conditions soient vraies prises isolément. A la première condition FAUSSE, le moteur de réécriture branche directement après la règle et ne teste pas les conditions suivantes. Si un OU logique est nécessaire, on rajoute le drapeau [OR] en fin de ligne, en le combinant aux autres le cas échéant [NC,OR]

Dans notre exemple, on compare la variable HTTP_REFERER au domaine du site.

Les conditions s’énonceraient en clair « Si la variable HTTP_REFERER n’est pas vide et n’est pas égale au nom de domaine http://www.votredomaine.net/ suivi de n’importe quelle chaîne de caractères (même vide) en faisant abstraction de la casse [NC], alors… »

Notez que le point d’exclamation (!), inverse le test et signifie donc «n’est pas». Changez aussi le nom de domaine pour qu’il corresponde au vôtre.

La dernière règle donne comme instruction de remplacer les images jpg, jpeg, gif, … par une image unique, généralement un message d’avertissement.

Un commentaire toutefois : Certains navigateurs permettent de masquer le HTTP_REFERER, et certains proxy ou firewall ne transmettent pas cette référence.
C’est la raison pour laquelle nous avons la première condition testant si HTTP_REFERER n’est pas vide(RewriteCond %{HTTP_REFERER} !^$). Sans cette règle, les visiteurs derrière certains firewall ou proxy ne verraient pas vos images.

Cette dernière limitation démontre bien qu’il n’est pas possible d’éliminer 100% des liens sauvages vers vos images puisqu’il suffit de masquer le HTTP_REFERER pour éviter l’interdiction. Une élimination de 95-98% des liens représente déjà une économie substantielle de bande passante.

Si vous souhaitez autoriser certains domaines amis à faire des liens directs, il suffit d’ajouter pour chacun d’eux une condition supplémentaire :

RewriteCond %{HTTP_REFERER} !^http://votredomaine.net/.*$ [NC]

Cet exemple permet d’accéder aux images dans le cas où votre domaine serait invoqué sans le sous-domaine « www ».

• Quelques expressions régulières à connaître :

. n’importe quel caractère

[abcd] n’importe lequel de cette liste de caractères

[^abcd] tout caractère non compris dans la liste (autre que a, b, c ou d)

blanc|noir alternative, soit « blanc », soit « noir »

+ Une ou N occurrence(s) de l’expression qui précède (N > 1)

* Zéro ou N occurrence(s) de l’expression qui précède (N>0)

(texte) Groupement permettant l’utilisation des références inverses ($1,… $n) Est aussi utilisé pour délimiter une alternative comme dans (blanc|noir)  et ancre de début de ligne

$ ancre de fin de ligne

\ permet d’échapper tout caractère qui suit et lui ôter sa signification par exemple \.

• Quelques drapeaux (ou flags) utiles.

Voici quelques drapeaux utiles pour faciliter la maintenance d’un site :

[L] Lorsque le module de réécriture est actif, les règles sont lues séquentiellement et l’URL est comparée ligne à ligne avec le premier argument de celles-ci jusqu’à la dernière.
Si une réécriture est effectuée, c’est la forme réécrite qui sera utilisée en entrée pour les règles suivantes.
Le flag [L] permet de sortir prématurément de la boucle.
Un autre exemple serait, en début d’une liste de règles :
RewriteRule ^.*\.gif$  -  [L]
RewriteRule ^.*\.jpg$  -  [L]

Nous introduisons ici un nouveau concept, à savoir un second argument vide (ou presque, car il consiste en un seul caractère « - » ) . Cette règle particulière implique qu’il n’y a pas de réécriture, l’URL étant passée sans modification aucune. Elle signale au serveur Apache de passer toutes les URL d’images gif ou jpg sans réécriture, ni traitement successif.

[R]

[R=code]

Dans ces deux formes une redirection est effectuée.
Si l’argument code n’est pas précisé, une redirection 302 (déplacé temporairement) est effectuée. Si vous souhaitez faire savoir au navigateur/robot qu’une page a été remplacée définitivement, utiliser le code 301 comme dans :
RewriteRule ^ancien\.html$ http://domaine.tld/nouveau.html [R=301,L]
Dans ce cas précis, une réécriture « externe » s’impose (utilisation de http://…)

Vous voyez ci-dessus que nous avons combiné deux flags en les séparant par une virgule.

[F] Forbidden – interdit. Retourne un code 403, par exemple :
RewriteRule ^secret.html$ – [F]
( pas de réécriture vu le deuxième argument – )

[NC] NoCase, ou « insensible à la casse ». La règle suivante :
RewriteRule  ^script\.php$  programme.php  [NC,L]
S’appliquera aussi bien à script .php, SCRIPT.PHP ou ScRiPt .PhP

[G] Gone. Cette page n’existe plus et retourne une entête http 410

[N] Force l’analyse et l’exécution de toutes les règles en repartant du début de la liste. Ici encore, comme expliqué plus haut ([L]), c’est l’URL modifiée après exécution de la dernière règle qui est utilisée en entrée, et non l’URL originelle. Attention aux boucles infinies !!

[C] Chain, chaînage avec la ou les règles suivantes jusqu’à la première règle ne se terminant pas par [C]
Apache interprète ce flag comme suit : s’il y a réécriture (la règle est vérifiée), la règle suivante est exécutée avec la chaîne réécrite en entrée.
Si la règle ne se vérifie pas, toutes les règles qui suivent jusqu’à la première ne comportant pas le flag [C] ne sont pas appliquées.

[QSA] Query String Append. Rajoute le QUERY_STRING à la fin de l’expression, après la réécriture. A réserver pour la dernière règle de réécriture. Utilisée le plus souvent avec le flag [L], comme dans [QSA,L]

Cette liste n’est pas exhaustive, car il existe d’autres flags supportés. La liste complète est décrite dans la documentation du module mod_rewrite sur le site d’Apache.

Enfin si vous voulez savoir si votre protection hotlink fonctionne, vous pouvez aller sur ces sites ( ici ou ici ) et mettre le chemin de votre image et voir le résultat. Exemple avec le site http://www.htaccesstools.com/

Après avoir mis le chemin de votre image, cliquer sur Test Hotlink Protection

Si vous avez ce résultat, votre protection marche, sinon l’image apparaitra.

Beaucoup d’hébergeur digne de ce nom vous propose une interface graphique pour éviter de mettre les mains dans le cambouis, si vous n’êtes  pas très à l’aise dans ces manipulations je ne peux que vous le conseiller.

Mon hébergeur utilise Cpanel pour la gestion de mon hébergement, pour clore ce dossier je vais vous montrez comment paramétrer la protection contre le hotlink depuis Cpanel.

Connectez-vous sur votre console d’administration.

Vous devez arriver sur une page similaire, ensuite déplacez-vous à la section Sécurité

Ensuite cliquer sur Protection des liens actifs.

1 : Cliquer sur le bouton  pour activer / désactiver la fonction de protection
2 : Saisir les URL des sites qui droit d’accéder à vos images
3: Saisir les extensions de vos images à surveiller
4: Saisir l’url de redirection vers une image de rappel à l’ordre puis cliquer sur le bouton soumettre pour enregistrer les modifications

Si vous rencontrez des problèmes avec votre lecteur, faites le moi savoir par le formulaire de contact ici, pour que je corrige le problème.

That’s All.

Difficulté :
Modification : -
Crédits : Merci au site webmaster-hub, pour son explication sur les réécritures conditionnelles.

Note: There is a print link embedded within this post, please visit this post to print it.