Realizar un script en Javascript para desactivar el menú contextual del navegador, que sale al hacer clic con el botón derecho del ratón, usando el evento oncontextmenu del objeto document.
En este artículo vamos a mostrar un método para inhabilitar el menú contextual del navegador, que aparece pulsando con el botón derecho en cualquier área de la página. Así podemos evitar que el usuario tenga acceso a algunas de las opciones del navegador, como ver el código fuente, copiar algo, etc.
Lo primero que hay que destacar es que este ejemplo no protege para nada el código de las páginas web, o que nos copien el contenido (texto / imágenes) que estamos publicando. Simplemente pone algunas trabas que podrían ser suficientes para usuarios poco experimentados o simplemente molestas para algunos usuarios que sepan buscar alternativas de acceder a lo que quieren. En cualquier caso, un usuario avispado podrá acceder al código de la página o cualquier recurso si realmente se lo propone.
Para empezar, desde la barra de menús del navegador, en "ver - código fuente", se puede acceder también al código fuente de las páginas. Así que si deseamos que no vean nuestro código, tendremos que mostrar la página en una nueva ventana del navegador, que debemos abrir mediante Javascript para que no incluya las barras de menús. Incluso así no estaríamos totalmente protegidos. En un manual de DesarrolloWeb.com tenemos todo sobre control de ventanas secundarias. Allí podemos aprender a abrir ventanas como queramos.
Si conseguimos evitar mostrar la barra de menús y el menú contextual, todavía un usuario podría deshabilitar Javascript para intentar ver el menú contextual sin que se lo impida la página.
Pero debemos saber que, cuando se envía una página a un visitante, el archivo HTML se guarda en el disco duro local de ese usuario, por lo que en último caso, la persona interesada simplemente tiene que acceder a sus archivos temporales de Internet para localizar la página que tiene el código que desea visualizar. Como el archivo está físicamente en su ordenador, podrá hacer lo que desee con él: abrirlo, modificarlo, guardarlo con otro nombre, etc. Así que nuestros códigos nunca estarán totalmente seguros.
La mejor solución para proteger un código es escribirlo en el lado del servidor, con lenguajes como PHP. Al estar en el lado del servidor, los scripts se ejecutarán en el servidor y el visitante sólo recibirá el código generado de esa ejecución, no el propio código ASP o PHP.
Por tanto, no se puede hacer nada definitivo para ocultar un código que se ejecuta en el cliente, así que esta solución propuesta es sólo un detalle que puede entorpecer la captación de un código, pero no sirve para asegurarlo definitivamente.
Pues dicho esto, el código que vamos a proponer es mucho más sencillo de lo que se podría suponer. Simplemente utilizaremos un evento de Javascript que se llama "oncontextmenu" y depende de "document". Asignaremos una función a este evento, que se ejecutará en el momento que el usuario haga clic en el botón derecho para visualizar el menú contextual.
Mostrar un mensaje cuando se hace clic con el botón derecho
La función que vamos a asignar a este evento es la siguiente:
function inhabilitar() {
alert ("Esta función está inhabilitada.\n\nPerdonen las molestias.")
return false
}
La función muestra un mensaje de advertencia, pero fijémonos en el return false: es necesario para que no se llegue a mostrar el menú contextual, porque si no la ponemos, se mostraría el mensaje de alerta, pero a continuación se mostraría también el menú contextual, con lo que no serviría de nada el script.
Para asignar esta función al evento oncontextmenu, realizamos este código:
document.oncontextmenu=inhabilitar
Tan simple como eso. El script completo, que colocaríamos entre <head> y </head> quedaría así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo Javascript desactivar menú contextual</title>
</head>
<body>
<h1>Inhabilitar el menú contextual del navegador con Javascript</h1>
<p>Prueba a hacer clic con el botón derecho del ratón.</p>
<script>
function inhabilitar(){
alert ("Esta función está inhabilitada.\n\nPerdonen las molestias.")
return false
}
document.oncontextmenu = inhabilitar
</script>
</body>
</html>
Evitar que salga nada al usar el menú contextual
Ese mensaje de alerta cuando haces clic con el botón derecho puede ser un poco molesto. Si lo que quieres conseguir es simplemente que no aparezca ningún menú contextual ni mensaje al usuario puedes simplmente quitar la llamada a la función alert().
Otra opción para desactivar el botón derecho del ratón es usar el método preventDefault() del objeto evento que se envía a la función manejadora que hemos asociado al evento oncontextmenu.
La función Javascript quedaría así.
function inhabilitar(e) {
e.preventDefault();
}
Si te interesa saber más sobre
preventDefault()y el objeto evento de Javascript puedes consultar el artículo de Eventos en Javascript.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...