Empêcher le copier-coller sur une page web avec Javascript
Tous les navigateurs internet dignes de ce nom permettent entre autre d'accéder au code source HTML d'une page web et aussi de télécharger les images (à la fois les images avec la balise <img/> mais aussi les background-image CSS), ou encore d'interdire le copier-coller.
Cette fonctionnalité est accessible via le menu contextuel, c'est à dire en faisant un clic droit sur la page ou sur une image, puis Enregistrer l'image sous ou encore Code source de la page.
Il est donc possible d'empêcher les utilisateurs de télécharger les images en désactivant le menu contextuel. Avant de vous montrer comment faire, il faut garder à l'esprit que cette "parade" est très facile à contourner, ça ne dissuadera que les utilisateurs qui n'ont absolument aucune connaissance technique.
L'attribut oncontextmenu
En javascript, il existe un événement qui se déclenche lors de l'affichage du menu contextuel : oncontextmenu.
Le moyen le plus simple c'est donc d'écrire le code javascript directement dans l'attribut de la balise <body> (en mode inline) :
<body oncontextmenu="return false;">
Si pour une raison ou pour une autre vous ne pouvez pas ajouter directement d'attribut à <body> dans le code HTML, il est possible de faire ça au chargement de la page en javascript :
Bloquer le clic droit avec jQuery
Avec jQuery, il suffit de sélectionner le document et de définir une fonction à exécuter lors de l'événement contextmenu :
jQuery(document).bind("contextmenu", function(e) {
e.preventDefault();
return false;
});
Le preventDefault() seul permet normalement de bloquer le clic, mais on peut aussi ajouter un return false pour être sûr que ça marche sur tous les navigateurs (puisque return false est une instruction javascript native).
Si vous voulez en savoir plus c'est par ici : recopier la mise en forme d'une cellule excel.
L'intérêt d'utiliser jQuery c'est qu'on a pas à se soucier des petites divergences d'implémentation de javascript dans les différents navigateurs (Firefox, Chrome, Opera, IE...).
Interdire le clic droit en javascript natif
Si vous ne pouvez pas utiliser jQuery, alors il va falloir le faire en javascript natif, et donc gérer soit même les différents navigateurs, ou alors prendre le risque d'une incompatibilité.
Voici un exemple qui devrait marcher sur internet explorer, firefox, opera et les navigateurs basés sur webkit (chrome, safari...), et vous permettre de protéger une page contre le clic droit et le copier-coller :
contextMenuCatch = {
ie: function(){
if( document.all ){
return false;
}
},
netscape: function(e){
if( document.layers || (document.getElementById && !document.all) ){
if( e.which == 2 || e.which == 3 ){
return false;
}
}
}
}
if (document.layers) {
document.captureEvents(Event.mousedown);
document.onmousedown = contextMenuCatch.netscape;
} else {
document.onmouseup = contextMenuCatch.netscape;
document.oncontextmenu = contextMenuCatch.ie;
}
document.oncontextmenu = new Function("return false");
document.onselectstart = new Function("return false");
Fini de lire cette page ? allez faire un tour ici : hot rod futuriste, ça peut vous intéresser.
