Inhabilitar el menú contextual del navegador con Javascript

  • Por
Un script en Javascript para evitar que funcione el menú contextual del navegador, que sale al pulsar con el botón derecho del ratón sobre la página. De modo que no puedan ver el código fuente ni acceder a otras opciones similares.
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.

Lo primero que hay que destacar es que este ejemplo no protege para nada el código de las páginas web que estamos publicando. Simplemente pone algunas trabas para ver cómo hemos hecho la página, pero cualquier usuario avispado podrá acceder al código de la página 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.

Referencia: 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.

Nota: La mejor solución para proteger un código es escribirlo en el lado del servidor, con lenguajes como ASP o 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.

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í:

<script language=JavaScript>
<!--

function inhabilitar(){
    alert ("Esta función está inhabilitada.\n\nPerdonen las molestias.")
    return false
}

document.oncontextmenu=inhabilitar

// -->
</script>

Podemos ver el ejemplo en marcha en una página aparte.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Miguel

03/2/2006
Yo solo quisiera bloquear la opcion "Ver codigo" del menu contextual al presionar el boton derecho del mouse. Por favor, alguien que sepa?

Sergio

03/2/2006
Hay muchas formas de hacerlo, es algo para mi forma de ver las cosas inutil y poco solidario para el que quiere aprender, es obvio que para ver una web hay que bajarse el codigo fuente sino no se veria y tambien para se localizado por buscadores.

Esta bien saberlo, pero para mi las webs que intentan camuflar su codigo fuente son pateticas.

Hasta los swf se abren con programas, es ridiculo proteger todo lo que entra en la maquina del cliente.

Un saludo.

Iván

03/2/2006
Sinceramente, este tipo de "protección" para salvaguardar el código procesado de la página sirve únicamente para novatos o aficionados. Una página que yo estoy viendo en mi casa, la tengo localmente descargada en mi casa, y por lo tanto, puedo acceder a su codificación devuleta (ojo, la respuesta de la petición, no al código fuente real).

andres

07/2/2006
Esta muy bien el articulo, pero eso solo deshabilita el boton derecho del raton pero si le das arriba en el navegador donde pone (ARCHIVO EDICION VER FAVORITOS HERRAMIENTAS AYUDA)a 'VER' y luego a codigo fuente , te sale el documento html en pantalla.

jhony-net jonathan

21/12/2006
soy diseñador web en flash y en html la mejor manera de protejer un codigo de fuente es escrivirlo en el flash hacerlo grande y ponerle todo a tu gusto como lo ago yo pero la mayoria de veses lo ago en html miren mi web esta casi toda en flash y abajo dice desing by jhony-net bueno espero que les sirva este comentario mio

saludos http://jhony-net.tk

alvaro

11/3/2007
no es por cagar tu buena accion pero con mozilla es apretar ctrl+u y me sale el codigo de fuente de un pag :S

wagner

03/4/2007
bueno, si esto no protege tu sitio web no se que lo hara, hasta el momento a mi me a funcionado muy bien, espero que te sirva. Realmente es sencillo proteger una pagina el maximo, hace poco desarrolle un script para este fin, protege el sitio incluso del "Impr Pant" espero que a ti tambien te funcione.

<html>
<head>
<script language="JavaScript1.2">
/*
Protección General del sitio Web, RatNET Software, DPWS® 1.0
Este panel de control DPWS® 1.0 es de uso exclusivo para los sitios Web
diseñados por Full Vision y/o RatNET Software, copyright® 2000 ~ 2005.
DPWS® 1.0 (Dinamic Portal Web Systems) y RatNET
son marcas registradas de Full Vision Entorno Multimedia 23 C.A.
Caracas / Venezuela. */
//Evita usar el boton derecho del ratón
document.oncontextmenu = function(){return false}
//No permite seleccionar el contenido de una página
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
//Borra el Portapapeles con el uso del teclado
if (document.layers)
document.captureEvents(Event.KEYPRESS)
function backhome(e){
window.clipboardData.clearData();
}
//Borra el Portapapeles con el uso del mouse
document.onkeydown=backhome
function click(){
if(event.button){
window.clipboardData.clearData();
}
}
document.onmousedown=click
//-->
</script>
<style type="text/css" media="print">
<!--
img { visibility:hidden }
-->
</style>
</head>
<body onMouseOut="window.clipboardData.clearData(); return false" onMouseOver="window.clipboardData.clearData(); return false">

</body>
</html>

BY ratmayor de F-Web

Augusto

13/6/2007
Interesante, pero siempre el codigo fuente se puede ver dandole click en Menu VER_Codigo fuente....una forma seria hacer frames, y jalar las ventanas a una frame donde solo habria el codigo de jalar frames, asi se protegeria tambien todo tu codigo, xq en cualkier web, dandole click donde dije puedes ver todo el codigo fuente......

Esteban

20/9/2007
Otra opción que encontré en el internet es la de encriptar el código fuente, así lo único que verán es una serie inteligible de letras y números mas no nuestro preciado código.

Visiten la siguiente página y en la parte de abajo encontrarán un script para encriptación:

http://www.bossma.com/webmaster.html

Nota: No he probado el código todavía, pero los dejo para que lo hagan y vean si les funciona, espero que sí ;)

SuperTerrazas

30/3/2009
Bueno ante todo buen dia a todos uds, soy de nivel intermedio avanzado en este lenguage, por lo general con JAVA me siento mas comodo pero en orientacion web JavaScript es la solucion a muchos problemas,inconvenientes,extras,etc. Antes de entrar a esta pag habia llegado al 99% de exactitud, salvo que la asignacion del objeto al evento lo habia hecho de la siguiente manera : "document.oncontextmenu=anticlick();"
como si fuera una llamada a un metodo ojo es una llamada pero no lo asigna exactamente, a pesar de haber comprendido todo hasta el momento, me he topado con comentarios poco positivos de parte de usuarios pseudo avanzados, tengan en cuenta que las presentes instrucciones (codigo), pueden ayudar mucho a proteger por ejemplo textos, evitar copia directa de imagenes,es decir, lo podran hacer pero se les va a hacer mas trabajoso de lo normal(obviamente el codigo fuente se va a ver siempre con ucalquier navegador en la opcion pagina-ver codigo fuente)descargar o acceso a links sin haberse logueado, es decir de una vez logueado se coloca una sentencia para habilitar obviamente x medio de AJAX la funcionalidad de dicho menu contextual.

No nos fijemos en los posibles bugs, sino todo lo positivo que tiene.

mexico

18/9/2009
todo se puede
con el script 1.- para deshabilitar el boton derecho del mouse junto con el de script 2.- para ver el codigo fuente ke si lo puedes ver pero incompleto lo ke ves no te sirve para nada, el verdadero sale hasta ke tu le das guardar como agregas el script 3.- para deshabiltar Impr Pant y por ultimo el script para evitar guardar como ke te sale el mensaje este sitio web no permite la descarga podran copiar el codigo fuente? jaja

Juan Manuel A.C.

01/2/2010
facil
Está bien, para gente que no sabe jeje, pero ya sabeis... control+U y problema resuelto jeje de todas todas, ¿para qué quieres esconder el código fuente? :S las cosas están para compartir...

FUNDADISC

23/6/2010
CONTACTO
ESTIMADO AMIGO - HEMOS COLOCADO CODIGO INHABILITAR ANTES DE ]]></b:skin>
</head>
PERO EN LA WEB NO SE NOTAN CAMBIOS QUE PUEDEN ESTAR SUCEDIENDO-?? AGRADEZCO RESPUESTA-CRIS-

KAILA

06/6/2011
OCULTAR CODIGO FUENTE
Hola. yo no se si soy muy torpe o que... pero no consigo poner el codigo en su sitio.... entre head y head si pero en que parte? al principio a la mitad al final... cuando le doy a vista previa me sale error que no esta cerrada la plantilla etc etc etc y no lo consigo... me podrias decir mejor en que parte del codigo se pone? porque lo pongo y se sigue viendo todo el codigo fuente. aparte se pone con ----> o sin eso? es que soy bastante torpe y no me entero. gracias!!!!

Dapulido

30/1/2012
Gracias
Me has salvado, con este pequeño script me solucionaste el problema mas tonto pero que no habia solucionado.


saludos,

dapulido

FrometaCano

20/8/2012
A mi me ha funcionado
MUCHAS GRACIAS, Desarrolloweb. A mi me funciona TODO lo que aprendo en este sitio web. Encima conocimientos sin ánimo de lucro, qué más podemos pedir.

Armando Cardoza

16/4/2013
Como quitar menu contextual a un video Insertado
Alguien me podría ayudar en como quitarle u ocultar el menú contextual de un video que he insertado en mi pagina web?
Quisiera que al pinchar click derecho sobre el video no se desplegara ningún menú en el!!! ayuda porfa!!!!!!!

Sergio N Hernandez

12/12/2014
Simplemente ... !!
Genial, gracias por el codigo, sencillo y funcional...

Saludos

Sergio N Hernandez

tortola

15/1/2015
Evitar cuadro para inhabilitar diálogos adicionales
Para evitar el uso del ratón, símplemente hay que eliminar cualquier alert, y dejarlo sencillito:

function inhabilitar(){
return false;
}
document.oncontextmenu=inhabilitar;

De esta manera, se evita usar el ratón para otra cosa que no sea situarse.

Juan Carlos

30/10/2016
Gracias
Gracias amigo, me ayudó en mi aplicación Web.