Right Where It Belongs

Voici quelques temps déjà, un petit profiteur avait sans vergogne copié l’intégralité d’un de mes sites. Ne voulant pas que cela se renouvelle trop souvent, je me suis penché sur cette problématique qu’est la protection des images sur l’Internet.
Stop !!! je vois déjà venir les critiques “si on met une image sur Internet, c’est normal qu’elle soit copiée, et de toute manière on peut mettre toutes les protections que l’on veut, une image sera toujours copiable !!!”

En fait, sur ce point je suis entièrement d’accord, tout ce qui est publié sur la toile et affiché dans un browser Web est à priori enregistrable, et donc copiable.
Conclusion, si on ne veut pas se faire spolier, et bien c’est tout simple, il ne faut pas publier.

Conquérant de l’inutile ? Yes, why not ?!!
Voici donc le dernier résultat de mes cogitations, une photo (sans intérêt, sauf pour les amoureux de Lisboa) s’affiche dans une popup.

Sur cette photo couleur, une marque de Copyright en texte pur. On précise bien que ce texte n’est aucunement inséré dans l’image, mais bien simplement affiché sur l’image.

Il s’agit donc tout simplement ici de protéger un document d’une copie trop facile, ainsi l’impression écran copiera le texte, et donc ce ne sera pas l’original qui sera copié.
Test d’image copiable ?

Quels sont les parades mises en œuvre ?

1. Javascript
   Très classique comme approche.
   On trouve quantité de scripts plus ou moins bien ficelés sur la toile.
   Ils permettent de désactiver le clic-droit, empêchant à priori l’affichage du menu contextuel.
   Les plus basiques ajoutent 1 ou 2 directives dans le BODY, qui se limitent essentiellement à :

   body  onBlur="window.close()"
   
   onClick="self.close()"
   
   onContextMenu="window.close();"

A priori disais-je ? oui en effet, rien n’empêche le visiteur d’appuyer non pas sur le clic de souris mais pour sur la touche de son clavier située à droite de la barre Espace entre la touche Windows et la touche Ctrl. Cette touche offre les mêmes possibilités que le clic droit.
D’autre part, les navigateurs modernes Firefox 2.x ou IE7 permettent d’outrepasser ces directives.
Pour les navigateurs moins “up to date”, un autre javascript exécuté dans la barre d’adresse ou placé en favori casse la protection :

javascript:alert('cracked!',

document.ondragstart=document.body.ondragstart=null,

document.oncontextmenu=document.body.oncontextmenu=null,

document.onselectstart=document.body.onselectstart=null,

document.onclick=null,document.body.onclick=null,

document.onmousedown=document.body.onmousedown=null,

document.onmouseup=document.body.onmouseup=null,

document.onbeforecopy=document.body.onbeforecopy=null,

document.onbeforecut=document.body.onbeforecut=null,

document.oncopy=document.body.oncopy=null);

(attention cette commande doit tenir en une seule ligne et ne doit pas être fractionnée)
D’autre part pour permettre ce premier semblant de protection, on doit s’assurer que JavaScript est bien activé sur le navigateur du client.

2. Popup
   Pour nous assurer que JavaScript est activé, il suffit simplement d’offrir la visualisation de l’image au travers d’une popup ouverte par un… JavaScript !!! cqfd
   Ainsi, pour visualiser l’image, en l’appelant par un JavaScript, on oblige le client à valider l’activation de son interpréteur JavaScript dans son navigateur favori.
   Le code standard inséré dans le lien permet en outre d’ajouter quelques directives “bloquantes” pour encore compliquer la tâche du vilain copieur potentiel :

   onClick="window.open(
   
   'http://[adresse_du_site]/[chemin]/[nom_du_fichier_image]',
   
   '[titre_du_popup]','width=[largeur],height=[hauteur],
   
   toolbar=0,location=0,directories=0,status=0,menubar=0,
   
   scrollbars=0,resizable=0,copyhistory=0')"

3. Cacher le répertoire de l’image
   C’est bien joli tout ça, d’appeler l’affichage de l’image dans un popup, mais ceci n’empêche nullement de visualiser dans le source de la page quel est le chemin absolu pour accéder directement à l’image.
   Donc tout ce qu’on vient de mettre en oeuvre est inutile ?
   Pas tout à fait. Commençons par ranger nos images dans un répertoire avec un nom qui ne soit pas trivial.
   Par la même occasion, donnons aussi à nos images un nom plus compliqué, mêlant caractères alphanumériques, majuscules et minuscules, et éventuellement caractères spéciaux.
   N’oublions pas au passage d’interdire le simple listage du répertoire où sont stockées les images avec un simple fichier “index.html” vide ou incluant un “refresh” vers la page d’accueil ou mieux un “index.php” avec l’unique instruction renvoyant à la racine du site:

    header("Location: http://rightwheritbelongs.free.fr/");
   
   exit();

4. Image dynamique ?
   Mais c’est bien sûr !!!
   Comme nous l’avons vu précédemment, le JavaScript c’est bien gentil, mais étant exécuté du côté du navigateur du client, rien ne garantie que tout ou partie des instructions de ce langage ne sera pas bypassé.
   Nous allons donc utiliser un langage interprété côté serveur pour blinder un peu plus notre protection.
   Pour ce faire nous allons nous appuyer sur les possibilités de traitement graphique du langage PHP associé aux librairies adéquates (à vérifier selon l’hébergeur).
   Ce n’est donc pas l’image qui s’ouvre directement avec le popup mais un script PHP qui va effectuer quelques opérations avant de retourner le véritable contenu.
   Pour commencer, nous plaçons quelques “header” indiquants la qualité du contenu et surtout que celui-ci ne doit pas être conservé en cache.
   Intégrons ensuite une fonction d’encodage et décodage quelconque (ici Base64).
   Dernier contrôle, assurons nous que l’appel de ce script n’est pas forcé en vérifiant que le “Referer” du client est présent et contient bien la chaîne de l’URL racine de notre site. Nous vérifions aussi l’existence de la variable (pic). Si l’une des conditions est évaluée fausse, une autre image est affichée.Le script PHP va ensuite appeler la fonction de décodage en passant commme paramètre la variable passée dans le JavaScript d’appel.

   La fonction “imagecreatefromjpeg()” est appelé avec le véritable nom de fichier (incluant le chemin), et le résultat est poussé vers la sortie standard comme une image JPEG ordinaire.
   (Il est bien évident que la valeur de la variable a été codée à l’aide de la même fonction “you()” et du même mot de passe)

    header("Content-type:image/jpeg");
   
   header("Cache-Control: no-cache, must-revalidate, private, pre-check=0, post-check=0, max-age=0");
   
   header("Expires: " . gmdate('D, d M Y H:i:s', time()) . " GMT");
   
   header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
   
   header("Pragma: no-cache");
   
   
   
   function you($string,$key,$a){
   
   if (empty($a)) { $string=base64_decode($string); }
   
   $salida='';
   
   for ($i=0;$i
   
   $char=substr($string,$i,1);
   
   $keychar=substr($key,($i%strlen($key))-1,1);
   
   if ($a) { $char=chr(ord($char)+ord($keychar)); }
   
   else { $char=chr(ord($char)-ord($keychar)); }
   
   $salida.=$char;
   
   } 	if ($a) { $salida=base64_encode($salida); }
   
   return $salida;
   
   }  $http_referer="http://rightwhereitbelongs.free.fr/";
   
   $origin2=substr($_SERVER['HTTP_REFERER'],0,35);
   
   if ($origin2=="http://rightwhereitbelongs.free.fr/") {
   
   $pic=$_GET['pic'];
   
   $pic=str_replace(" ","+",$pic);
   
   $pic1=you($pic,'r3dl1ght;',0);
   
   }
   
   else {
   
   $pic1="bgpict.jpeg";
   
   }
   
   $im=imagecreatefromjpeg($pic1);
   
   ImageJpeg($im);
   
   imagedestroy ($im);
   
   
   
   

   Maintenant que nous avons notre fichier image généré, nous allons l’afficher dans le popup.
   Nous créons une page, appelons la “aff_img.php”, qui est chargée de combiner l’ensemble des “protections” développées ci-dessus.

5. Récapitilons
   • Nous avons rangé notre fichier image sous un répertoire caché,
   • choisi un nom compliqué pour le fichier,
   • nous insérons un lien avec ouverture d’un popup en JavaScript,
   • nous cryptons le nom du chemin et du fichier,
   • nous créons l’image à la volée sous condition,
   • le popup appelle à l’affichage l’image,
   • sur la vraie image se superpose une image transparente “leurre”,
   • le popup se ferme dès la perte de focus ou l’action du clic droit.
6. Patatra…

Bah oui, finalement tout ça ne sert à rien pour un utilisateur un peu averti, pas même besoin d’être un informaticien chevronné !!!
Comment ? eh bien commençons par utiliser un navigateur qui devrait vous être familier, Firefox, dans lequel il est possible de spécifier que les liens ouvrant une popup ne sont pas autorisés à interdire l’affichage de la barre d’outils. Ceci fait effectuons un simple clic sur la rubrique “Outils” pour obtenir ceci comme menu, un autre clic sur “Information sur la page” et nous obtenons cette page indiscrète qui nous permet d’enregistrer tranquillement l’image…