Protéger vos images contre le vol sur Internet

Dans ce tutoriel nous allons voir et mettre en place plusieurs techniques pour protéger vos images contre le vol sur Internet. Nous verrons les protections à mettre en place sur Wix et sur WordPress les 2 plateformes d’hébergement de blogs du moment.

Malheureusement il n’y a aucun moyen d’arrêter complètement les gens de voler vos images. Mais nous allons voir au travers de ces techniques qu’il y a beaucoup de façon de décourager et de prévenir le vol d’images sur un blog.

Utiliser WIX pour éviter de mettre les mains dans le cambouis.

Wix est une plateforme de création et d’hébergement de blogs qui permet de créer un site internet en quelques clics. C’est facile et gratuit.

Wix dispose de tous les atouts pour créer un blog, que ce soit pour des utilisateurs novices ou bien avancés.

Voici quelques options  :

  • Des centaines de modèles
  • Vous pourrez utiliser votre propre nom de domaine
  • Une version mobile est disponible pour chaque blog
  • Vous aurez accès à plusieurs app pour rajouter des fonctionnalités facilement sans mettre les mains dans le cambouis comme avec WordPress
  • Vous pourrez créer une boutique en ligne très facilement avec une gestion et un suivi des commandes, plusieurs méthodes de paiement (carte de crédit, paypal, …)

Wix innove dans plusieurs domaines afin de toujours vous facilitez l’exploitation de votre blog. Notamment avec des outils SEO et de référencement, la mise en place et la gestion d’une newsletter, la création de boites e-mail personnalisées. La partie analytique n’est pas oublié avec des rapports détaillés comme le nombre de vues par page, la localisation de vos visiteurs, ….

Dans le domaine de la sécurité, Wix vous facilite encore la vie en vous proposant une application gratuite, Right Click Protect. Cette app empêche l’utilisation du clic droit et permet aussi d’afficher un watermak personnalisable. Lorsqu’on survole l’image, sans modifier et dénaturer l’image d’origine. Il devient alors plus compliqué pour les visiteurs de piquer vos illustrations.

création d'un watermark avec Wix

La création de watermark est soumise à plusieurs règles :

  • La pose du symbole copyright (© synonyme de droits d’auteur).
  • Optimiser la lisibilité, pour éviter de détériorer le visuel. Il faut une mention lisible mais pas trop, à vous de trouver la juste mesure.
  • Attention au contraste, un watermark avec une police noire sur une image sombre ne se voit pas par exemple.
  • Trouver le bon emplacement. Un watermark en plein milieu de votre photo sera efficace mai cachera une bonne partie de votre image. Il est important de trouver l’angle mort sur l’un des coins.
  • Le texte à afficher, quoi mettre en watermark, un texte, un logo, les deux ? Attention toutefois votre tatouage numérique doit rester concis.

Désactiver le clic droit et la sélection de texte sans plugin avec WordPress.

Pour cela vous devez rajouter ce code javascript après la balise <HEAD> de votre thème.

<script language=JavaScript> var message="Cette fonctionnalité a été désactivée!"; function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") </script>

Si votre thème dispose d’un panel d’administration comme Sahifa par exemple, aller dans Theme Settings -> General Settings -> Header Code

éditer vos fichiers de configuration directement avec WordPress

Ensuite si vous allez sur votre blog essayer de faire un clic droit sur une image. Vous aurez ce message :

bloquer la fonctionnalité copier-coller dans WordPress

Désactiver le drag and drop d’image et la sélection de texte avec WordPress.

On va corser un peu les choses pour nos apprentis voleurs, nous allons maintenant interdire le drag & drop d’image sur le bureau de notre ordinateur ainsi que la sélection de texte. Oui je sais c’est dur.

Rajouter cette ligne dans le fichier header.php de votre thème WordPress :

onpaste="return false;" oncut="return false;" oncopy="return false;" onselectstart="return false;" ondragstart="return false;"

Ces instructions sont à rajouter dans la balise <body … de votre thème.

désactiver le drag and drop d'image et la sélection de texte sous WordPress

Avant :

Sélection de texte sur une page web

Après :

interdire la sélection de texte dans WordPress sans plugin

Après impossible de sélectionner quoique ce soit comme texte pour faire un copier coller. Cette technique est compatible avec tout les navigateurs.

Activer la protection contre le hotlink depuis CPanel.

Une autre technique courante du vol d’images, est de réaliser un lien pour les charger depuis leurs sources d’origines. L’image est affichée sur un serveur tiers sans votre autorisation consommant vos ressources serveurs et votre bande passante.

Vous pouvez réaliser très simplement ce blocage sans plugin en modifiant le fichier .htaccess de votre compte ou alors en utilisant Cpanel (généralement utilisé chez les hébergeurs).

Pour la modification du fichier .htaccess en mode geek, vous pouvez consulter ce tutoriel : Hotlink protéger vos images sous WordPress.

Je vais détailler un peu plus l’utilisation de Cpanel, cela vous évitera de mettre les mains dans le cambouis (et potentiellement de faire des erreurs).

activer la protection contre le hotlinking avec Cpanel

Connectez-vous sur votre interface d’administration de votre hébergement et allez dans Sécurité -> Protection contre les hotlinks.

activer la protection contre le hotlinking sur Cpanel

Cliquer sur Activer.

D’office l’adresse de votre site se trouve dans les exclusions mais il faut penser à rajouter vos sites avec lequel vous travaillez ou pour lequel vous autorisez la diffusion de vos images.

Attention!!! Par exemple, la gestion de mon flux RSS et ma newsletter sont gérés par FeedPress, il faut donc autoriser ce site à afficher mes images contenues dans le flux RSS.

configurer la protection contre les hotlinks

  • 1: Ajouter les sites à exclure de la protection contre les hotlinks.
  • 2: Saisir ici les extensions des images à bloquer.
  • 3: Cocher cette case pour afficher les images via le lien direct dans un navigateur.
  • 4: Indiquer ici une image qui sera affiché à la place de la vôtre. Si vous laisser le champ vide (ce que je ne conseille pas) vous aurez ceci :

image vide pour lutter contre le hotlinking

  • 5: Appuyer sur le bouton Soumettre pour enregistrer les modifications.

Pour tester si votre sécurité fonctionne vous pouvez utiliser deux sites :

Si vous voyez votre image de redirection ou une croix rouge ou encore un point d’interrogation, cela veut dire que votre protection est opérationnelle.

test hotlink protection

Attention!!! Il se peut que même en activant dans votre Cpanel le Hotlink, cela ne fonctionne pas. Il faut alors éditer le fichier .htaccess de votre hébergement et rajouter RewriteEngine On, oublié par CPanel.

Rajouter RewriteEngine on dans le fichier .htaccess

Utiliser un watermark pour protéger ses images.

Un watermark est une sorte d’empreinte visible que l’on appose sur la photo. Vous pouvez mettre le nom de votre site, votre logo ou ce que vous voulez. Cela permet de limiter le pillage des images.

Exemple de watermark sur un blog
Au début de la vie de mon blog, j’ai effectivement apposé un watermark avec le nom de mon blog mais au fil du temps et des commentaires j’ai abandonné l’idée, pour plus de lisibilité dans mes articles.

plugin easy watermark settings sous WordPress

Mais aujourd’hui avec le plugin EasyWatermark , la donne à changer. Vous avez la possibilité d’insérer un watermark plus discret (même sur les images existantes) et si vous en avez marre vous pouvez même annuler celui-ci (avec l’option de restauration des images d’origines).

Nous avons maintenant fait le tour des quelques possibilités pour protéger votre blog. Si vous avez d’autres solutions ou techniques n’hésitez pas à me contacter via le formulaire du blog.

That’s All.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *