Face à la montée en puissance du phénomène du plagiat ou du copier-coller, de nombreux créateurs de contenus se plaignent du pillage de leurs créations, que ce soit du texte, image, vidéo, graphique ou autre. En effet, certains internautes n’hésitent pas à copier des images ou pire encore à dupliquer des articles au détriment des droits d'auteurs.
Quoi qu'il en soit, vous avez sans doute remarqué en surfant sur Internet que certains sites Web bloquent le clic droit ainsi que la fonction copier du clavier "Ctrl + C" afin de décourager les internautes à reproduire leurs contenus qui se retrouvent souvent dans d’autres plateformes sur la toile, par exemple sur les réseaux sociaux.
Dans ce tutoriel, je vous propose plusieurs procédés pour protéger vos créations du plagiat ou du copier-coller en interdisant le clic droit ainsi que la fonction copier du clavier "Ctrl + C".
Passons sans tarder à la partie pratique !
Notez bien :
L'ensemble des codes CSS doivent être ajoutés :
- Dans le fichier "style.css" de votre site web.
- Au-dessus de la balise
]]></b:skin>si vous utilisez Blogger. - Dans WordPress, cliquez sur le menu "Apparence" puis "Personnaliser". Ensuite, copier le code dans le panneau intitulé "CSS additionnel".
Comment désactiver le clic droit uniquement sur les images de votre site Web ?
Interdire le clic droit sur les images en utilisant JavaScript
Dans WordPress
Insérez le script ci-dessous dans la section <head> de votre site web. Pour faciliter l'intégration des codes dans les fichiers du thème WordPress, je vous recommande d'utiliser un plugin qui permet d'incorporer les codes JavaScript et CSS sans avoir à toucher aux fichiers sensibles de votre thème que vous trouverez dans "Apparence > Éditeur de thème". Cela dit, si vous vous sentez à l'aise, vous pouvez bien sûr les insérer directement dans les fichiers de votre thème sans plugin.
Le plugin qu'on va utiliser dans ce tutoriel s'appelle "Insert Headers and Footers", mais vous êtes libre de choisir n'importe quel plugin qui permet d'insérer les codes JavaScript et CSS dans les fichiers du thème WordPress.
À présent pour désactiver le clic droit sur les images WordPress, suivez ces étapes :
- Commencez par installer et activer le plugin "Insert Headers and Footers"
- Accédez ensuite au plugin dans le menu "Réglage" > "Insert Headers and Footers"
- Insérez le code ci-dessus dans la première boite "Scripts en en-tête"
<script type='text/javascript'>
document.addEventListener('contextmenu', function(e){
if (e.target.nodeName === 'IMG') {
e.preventDefault();
}
}, false);
</script>
Dans Blogger
Insérez le code JavaScript suivant juste au-dessus de la balise </body> dans le code HTML de votre thème. Si vous ne savez pas comment procéder, consultez la partie suivante de ce tutoriel.
<script type='text/javascript'>
//<![CDATA[
document.addEventListener('contextmenu', function(e){
if (e.target.nodeName === 'IMG') {
e.preventDefault();
}
}, false);
//]]>
</script>
Cette méthode à l'avantage d'être assez discrète. Elle n’impactera pas la navigation et ne portera pas atteinte à l’expérience des utilisateurs de votre site Internet.
Exclure le clic droit sur les images en utilisant JQuery
Voici un autre code JQuery qui donne le même résultat :
<script type='text/javascript'>
//<![CDATA[
$(function(){ $('img').bind('contextmenu', function(e){ return false; }); });
//]]>
</script>Empêcher le téléchargement des images à l’intérieur de vos articles avec des propriétés CSS
Avec le code ci-dessous, les internautes pourront effectuer un clic droit sur vos images, mais lorsqu’ils cliqueront sur "Enregistrer sous", ils auront l’option uniquement de télécharger la page Web complète et ne pourront pas télécharger les images individuellement.
Voici à présent le code CSS à ajouter à votre fichier style.css ou au-dessus de la balise ]]></b:skin> si vous utilisez Blogger.
Dans WordPress
Cliquez sur le menu "Apparence" puis "Personnaliser". Collez le code dans le panneau intitulé "CSS additionnel".
.post-body img{
-webkit-user-select: none !important;
-moz-user-select: -moz-none !important;
-ms-user-select: none !important;
user-select: none !important;
}Remarque : pour que cela fonctionne parfaitement, vous devez au préalable désactiver le mode ou l’effet lightbox dans les paramètres de votre site Web que ce soit dans Wordpress ou Blogger. En effet, le mode lightbox permet d’ouvrir les images dans une fenêtre pop-up lorsqu’un visiteur clique dessus.
Vous pouvez aussi utiliser la méthode qui suit pour empêcher l’effet lightbox de vos galeries d’images en ajoutant un code CSS.
Comment désactiver l’effet lightbox pop-up sur vos images ?
Afin de supprimer le mode lightbox, insérez ce code CSS dans votre fichier style.css ou au-dessus de la balise ]]></b:skin> si vous utilisez Blogger.
.post-body a[href$='.JPG'], .post-body a[href$='.PNG'], .post-body a[href$='.jpg'], .post-body a[href$='.png'], .post-body a[href$='.gif'] {
pointer-events: none;
} Comment bloquer le clic droit sur tout le site web et dans l’ensemble des pages ?
Interdire le clic droit sur tout le site en utilisant JavaScript
Remarque : suivez les instructions d'installation qui figurent dans la première section de ce tutoriel.
Dans WordPress :
<script type='text/javascript'>
document.addEventListener('contextmenu', event => event.preventDefault());
</script>
Dans Blogger :
<script type='text/javascript'>
//<![CDATA[
document.addEventListener('contextmenu', event => event.preventDefault());
//]]>
</script>
Désactiver le clic droit de la souris et le raccourci clavier "Ctrl + C" en ciblant la balise HTML <body>
D'abord, commencez par chercher la balise <body> dans le code HTML de votre site Web. Ensuite, remplacez-la par le code suivant :
<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>
Signification des éléments du code :
oncontextmenu='return false;'
Ce code contrôle l'utilisation du clic droit de la souris. La valeur "true" signifie que vous autoriserez le clic droit, alors que la valeur "false" signifie l’inverse.
onkeydown='return false;'
Cet élément contrôle l'utilisation du raccourci clavier "CTRL + C" pour copier les éléments sur votre site. La valeur "true" veut dire que vous autoriserez l'utilisation de ce raccourci, alors que la valeur "false" signifie le contraire.
onmousedown='return false;'
Cet élément empêche de sélectionner le texte de votre site Web. La valeur "true" signifie que vous autoriserez la sélection du texte, alors que la valeur "false" veut dire le contraire.
Comment interdire le copier-coller en empêchant les utilisateurs de sélectionner le texte de votre site Web ?
Dans WordPress :
Suivez les étapes de la première section de cet article.
<script type="text/JavaScript">
function disableselect(e) {
return false
}
function reEnable() {
return true
}
document.onselectstart = new Function ("return false")
if (window.sidebar) {
document.onmousedown = disableselect
document.onclick = reEnable
}
</script>Dans Blogger :
Insérez le code suivant au-dessus de la balise </head>
<script type='text/javascript'>
//<![CDATA[
function disableselect(e) {
return false
}
function reEnable() {
return true
}
document.onselectstart = new Function ("return false")
if (window.sidebar) {
document.onmousedown = disableselect
document.onclick = reEnable
}
//]]>
</script>Comment désactiver la fonction "copier" sur tout le site et l’autoriser uniquement sur un contenu spécifique d'un article ?
Ce code CSS vous permet de désactiver la copie dans l'ensemble de votre site Web en ciblant la balise HTML <body>.
Cependant, vous avez la possibilité d'autoriser l'accès à un contenu spécifique de votre article en le mettant dans un bloc de type "Citation" ou "Blockquote" en anglais lors de l’édition de vos articles. Ainsi, le contenu du bloc citation sera en accès libre pour vos lecteurs.
Pour ce faire, ajoutez ce code CSS à votre fichier (style.css) ou au-dessus de la balise ]]></b:skin> si vous utilisez Blogger.
.post blockquote {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
body {
-webkit-user-select: none !important;
-moz-user-select: -moz-none !important;
-ms-user-select: none !important;
user-select: none !important;
}
Comment interdire la copie seulement à l'intérieur de votre article ?
En effet, avec le code ci-dessous la barre de navigation, la barre latérale, et le pied de page ne seront pas concernés par le blocage. Là on cible uniquement la section article post-outer.
Vous pouvez autoriser l’accès à un contenu spécifique de votre article, que vous souhaitez partager avec vos lecteurs, en utilisant le bloc de citation blockquote.
Insérerz ce code CSS dans votre fichier (style.css) ou au-dessus de la balise ]]></b:skin> si vous utilisez Blogger.
.post blockquote {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
.post-outer {
-webkit-user-select: none !important;
-moz-user-select: -moz-none !important;
-ms-user-select: none !important;
user-select: none !important;
}Remarque
Toutes ces solutions permettront certainement de dissuader la majorité des visiteurs de passer à l'acte.
Néanmoins, sachez qu'aucune de ces solutions n'est infaillible. Les plus avertis pourront toujours les contourner plus au moins facilement selon la méthode que vous allez choisir.
Gardez en tête que cela pourrait également nuire à l’expérience des utilisateurs de votre site Web.
Comment contourner la désactivation du clic droit de la souris et l'interdiction de sélectionner le texte ?
L'utilisation du code JavaScript à deux inconvénients :
- Les scriptes pourraient ralentir le temps de chargement de vos pages.
- On peut facilement bloquer l'affichage des scripts JavaScript soit dans les paramètres des navigateurs Internet (Firefox, Chrome et Internet Explorer) ou bien à l'aide d'extensions gratuites telles que NoScript, qu'on trouve facilement en téléchargement via les "Web Store" des différents navigateurs Internet.
L’usage des codes CSS et HTML est plus fiable (difficile à contourner). D’une part, cela ne va pas impacter la vitesse de chargement de la page et d’autre part vous pourrez cibler le contenu à protéger et celui que vous souhaitez laisser en libre accès tel qu'une photo, un texte, un code, etc.
Toutefois, sachez que cette méthode est à son tour évitable avec des connaissances basiques en HTML, notamment en utilisant les outils de développement fourni par les navigateurs Internet et plus précisément les inspecteurs d'éléments tels que la fonction "Inspecter" de Google chrome ou "Examiner" de Firefox.
Faites des essais et choisissez la méthode qui vous convient le mieux et veillez à préserver la qualité de l'expérience utilisateur de votre site web.
Alors que cet article touche à sa fin, j’espère que ces méthodes vous permettront de protéger efficacement votre contenu du plagiat ou du copier-coller.
Merci d'avoir pris le temps de lire ce tutoriel. N'hésitez pas à le partager sur les réseaux sociaux si vous jugez qu'il pourrait être utile pour d'autres personnes.