DesarrolloWeb.com > Manuales > Taller de Javascript

Acceso por clave javascript

Valoración del artículo:

Ver comentarios del artículo (61)

Este artículo te explica paso a paso cómo crear un sistema para proteger por clave unas páginas en tu web. Utilizamos Javascript, un lenguaje accesible a todo el mundo.

Por Miguel Angel Alvarez

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

Lamentablemente, javascript no es un lenguaje con el que se pueda realizar un método interesante para hacer que algunas páginas de nuestro sitio solo sean accesibles si se introduce una clave correcta. Aun así, existe un mecanismo para poder realizar esto, que no es muy avanzado ni tampoco muy seguro, pero que puede dar el efecto en nuestras páginas que estamos deseando.

Se trata de colocar páginas web en nuestro espacio huerfanas de enlaces, para que nadie pueda acceder a ellas. Esta es toda la seguridad que les podemos dar a nuestras páginas: como no existen enlaces dirigidos hacia ellas, nadie podrá accederlas. La única manera de acceder a las páginas sería conocer el nombre de archivo y escribir la URL del mismo, pero como tampoco vamos a publicar el nombre de archivo, podremos estar casi seguros de que nadie acertará a construir la dirección de la página que queremos ocultar. Luego crearemos un formulario muy sencillo, que incluirá un campo de texto y un botón. En el campo de texto habrá que escribir el nombre del archivo que se desea ver y al pulsar el botón javascript seremos conducidos hacia la página que tenga ese nombre de archivo. En este punto pueden pasar dos cosas.

Que el nombre de archivo sea incorrecto, es decir, nos hemos inventado la clave y casi seguro que no hemos acertado con el nombre de la página escondida. En este caso, se mostraría una página de error típica, de esas que muestra el servidor cuando intentamos acceder a una página que no existe.
Que el nombre de la página sea correcto, es decir, que la clave que hemos introducido sea igual al nombre del archivo que queremos acceder. En este caso, javascript nos conducirá al lugar correcto y podremos ver la página oculta.

Veamos paso a paso cómo construir este sistema de acceso por clave

1.- Las páginas que desarrollar

Tenemos que trabajar con 2 páginas web por lo menos, una para colocar el formulario y otra que sería la página oculta. Estas páginas las tendremos colocadas en el mismo directorio, con lo que simplificaremos un poco el problema.

2.- Formulario para la clave

En la página que queremos poner el accceso por clave debemos colocar el siguiente formulario.

<FORM name=formclave>
<INPUT type=password name=clave>
<INPUT type=button value=Acceder>
</FORM>

3.- Función que nos envía a la página oculta

Como la página oculta tiene como nombre de archivo la lo que se haya escrito en el campo de texto podremos acceder a ella de la siguiente forma.

<SCRIPT>
function acceso(){
window.location = document.formclave.clave.value + ".html"
}
</SCRIPT>

La función es muy sencilla, lo único que hace es concatenar el nombre que se ha escrito en el campo de texto con ".html" y nos manda, utilizando window.location, directamente a la página cuyo nombre se acaba de construir.

Como hemos concatenado con ".html" el nombre del archivo escrito en el formulario, el nombre que escribamos deberá ir sin ".html".

4.- Incluir en el botón la llamada a la función

Con el objetivo de que al pulsar el botón el navegador nos lleve a la página oculta, se ha de hacer que al pulsarlo, se llame a la función acceso definida en el punto anterior. Esto se consigue mediante el atributo onclick, que debemos insertar en la etiqueta del botón.

<INPUT type=button value=Acceder onclick="acceso()">

5.- Código entero de la página

Podemos ver a continuación el código de la página entera. Solo enseñamos el código de la página que tiene el formulario, porque la página oculta podrá ser como cada uno desee.

<html>
<head>
<title>clave acceso</title>
</head>

<body>
<SCRIPT>
function acceso(){
window.location = document.formclave.clave.value + ".html"
}
</SCRIPT>

<FORM name=formclave>
<INPUT type=password name=clave>
<INPUT type=button value=Acceder onclick="acceso()">
</FORM>

</body>
</html>

6.- Últimos apuntes y demo

Una cosa importante a la hora de conseguir que el script sea más seguro consiste en crear páginas con un nombre de archivo dificil de inventarse. Como el nombre de la página es la clave con la que se va a acceder a esa página necesitaremos que dicho nombre sea un poco complejo, por ejemplo, fks12dmxc53.html. Si la página clave se llamase por ejemplo, index.html cualquiera podría con un poco de imaginación inventarsela.

Antes de terminar, cabe repetir que este no es el método más seguro que existe para crear scripts para realizar accesos restringidos, solo es una pequeña astucia que "funciona". Para realizar este objetivo con mejores resultados tenemos lenguajes como ASP, PHP o CGI. También podemos restringir el acceso a las páginas utilizando el propio sistema operativo y la autentificación que implementa este, tal vez sea la opción más cómoda, aunque no es del todo probable que nuestro proveedor de alojamiento nos la permita.

Podemos ver el ejemplo entero funcionando en esta misma web.

Enviar un comentario al artículo

MANUAL: Taller de Javascript

Apertura y configuración de popups con javascript

Rollover con javascript

Comentarios

Enviar un comentario al artículo

Fueron enviados 61 comentarios al artículo

21 comentarios no revisados

40 comentarios revisados:

Por: jose Luis

12/3/02

El Articulo de clave de acceso en javascrip me parece muy bueno, pero porqué no poneis la manera de que cuando le introduzcas una palabra que no corresponda con ninguna de las paginas/claves llame a un fichero de error.html por ejemplo que le pongamos nosotros??? La verdad es que me encantaría que me enviaseis instrucciones a mi correo para hacerlo porque no tengo mucha idea de como hacerlo y lo necesito. Un saludo.

Respuesta:

Ahora no se me ocurre nada para modificar el script en ese sentido. Realmente dudo que se pueda de ninguna manera a través tan sólo de Javascript.
Se me ocurre que podrías, en caso de que te lo permita tu alojamiento, modificar la página de Error 404 (error de página no encontrada) para que salga el mensaje que deseas.

Por: LUC@S

28/6/02

Hola, te comento que el articulo d clave de acceso en javascrip esta muy bueno,es mas me viene al pelo con un proyecto que estoy haciendo, pero en mi caso existen varios usuarios que deben ingresar, c/u tiene una clave propia, junto con su nombre de usuario, y al ingresarlo c/u tiene un destino distinto por ser un usuario distinto.

No me interesa mucho el tema de seguridad, asi que imaginate que este java me viene bien, pero sabes como puedo cambiarlo para lo que pido. Muchas gracias!!

RESPUESTA

Construye el nombre del archivo al que tienes que llevar a cada usuario a partir del nombre de usuario y contraseña que hayan introducido:

<html>
<head>
<title>clave acceso</title>
</head>

<body>
<SCRIPT>
function acceso(){
window.location = document.formclave.usuario.value + document.formclave.clave.value + ".html"
}
</SCRIPT>

<FORM name=formclave>
Usuario: <INPUT type=text name=usuario>
<br>
Clave: <INPUT type=text name=clave>
<br>
<INPUT type=button value=Acceder onclick="acceso()">
</FORM>

</body>
</html>

Por: juanje

30/9/02

hola que tal el javascript esta de lujo. Felicidades!!! mira qeria saber como puedo hacer para qe la clave salga en asteriscos. Graciasssss. Espero contestacion

RESPUESTA

Pues es un error nuestro que la clave no salga en asteriscos, pero lo he corregido ya... Simplemente es que en vez de colocar un input de "type=text" hay que colocar uno con "type=password".

Por: enri

30/9/02

Ta wapo el artículo, pero hay alguna forma de cambiar ese error del admnistrador. Mi page esta en iespana, pero aun no tengo ni idea de como se hace.

RESPUESTA

Puedes cambiar la página de error 404 (archivo no encontrado), si dispones de un alojamiento que lo permita, aunque no creo que en iespana se pueda.

Para personalizarlo todo al máximo, no debes utilizar Javascript, ya que otras soluciones implicarían que escribieses la clave en el código de la propia página web y alguien leyendo el código fuente podría saltarse tu seguridad, porque allí estaría escrita la clave.

Por: Leonardo (

04/11/02

Bueno la verdad es que no se mucho de javascript pero, ya que estan tratando el tema de seguridad, se me ocurrio un script del que a lo mejor alguien puede darle algún uso. Se trata de un bucle sencillo que no hace mas que llamar a una variable que contiene el script "prompt" al hasta que se le escriba el texto correcto.

Bueno la verdad no es mucho pero si alguien del publico puede refinarla me gustaría que me escribieran a mi correo.

Es el script es el siguiente:

<html>
<head>
<title>Pagina con password</title>
<script lenguage="javascript">
password=prompt("Dime la contraseña para entrar a esta web","");
while(password!="contraseña"){
alert("Tienes que escribir una contraseña valida");
password=prompt("Dime la contraseña para entrar a esta web","");
}
</script>
</head>
<body>
<h1>Felicidades entraste a la página</h1>
</body>
</html>

Por: Mauricio Polanco

17/2/03

Mira. Segui detenidamente tu articulo para llamar una pagina oculta mediante un formulario. Es decir Acceso a Pagina con una Password. Me parecio excelente y sencilla tu solucion. De hecho la utilizo y te doy las gracias. Pero existe un detalle. Y es que por defecto las personas tendemos a ingresar los datos (password) y automaticamente presionar el boton ENTER y de esta manera esta solucion propuesta por ti no funciona. Es decir obliga a ingresar la password y luego apretar el boton. ¿Existe una forma de solucionar esto?...mil gracias por tu respuesta.

RESPUESTA

Creo que tienes razón, pero aunque tendemos a comportarnos como describes, si alguien ve que con ENTER no accede, inmediatamente pulsará el botón de al lado.

De todos modos, con una función que detecte la pulsación de la tecla ENTER y ponga en marcha la función, solucionarías el problema. Algo parecido a esto: http://www.desarrolloweb.com/articulos/885.php

Por: Ricardo

03/4/03

Encuentro genial este script, lo estoy usando funciona muy bien, pero una consultita ¿cómo puedo hacer para que el script pueda encontrar la página en una subcarpeta?

RESPUESTA

Pues deberías cambiar una línea del script javascript, en la función acceso(), donde pone:
window.location = document.formclave.clave.value + ".html"

Deberías modificar la URL a la que dirijes al navegador para que también tenga en cuenta el directorio donde tienes las páginas de acceso restringido. Si por ejemplo el directorio fuera "dir", la línea quedaría así:
window.location = "dir" + document.formclave.clave.value + ".html"

Por: saul

30/6/03

como cambio la palabra para acceder.

RESPUESTA

Pues cambiando el nombre del archivo HTML que tiene el contenido restringido.

Por: Ivan Alfonso Olamendy

20/9/03

El articulo me parece poco util, porque una ves encontrado el nombre de la pagina, con solo mirar la direccion podremos acceder a la pagina "oculta". Lo ideal seria que si tratamos de acceder a la pagina oculta sin habernos "logeando" el servidor nos devuelva el formulario en ves de la pagina oculta.

Tienes idea de como hacer esto?? Te lo agradeceria mucho. Saludos atentos.

Por: Jorge Alberto J.F.

09/12/03

Saludos!!
La verdad es que yo solo eh leido los articulos y no los eh puesto ne practica, pero a lo que dicen de solo observar la direccion de la pagina: que les parece si:

1.-Despues de que se pone la clave correcta.
2.-Se caraga la pagina y en el evento Load, usan el "locationbar", para cambiar su valor..

Nota: No se si sea posible, pero si no lo es porfavor no me regañen por que soy un novato y teorico paracabarla.

Saludos desde Mexico.

Por: Juan Ramos

02/3/04

Es indudable que funciona. Pero habrán visto, los que ya lo han practicado, que en la url aparece la clave de la página que hemos ingresado?.

Bueno, podemos hacerlo más interesante, simplemente que la página clave tenga un redirect para que éste lleve hacia una página con nombre normal de .htm/.html, de esa forma no veremos nunca la clave en el url; incluso si queremos regresar para ver la página clave el redirect no permitirá verlo.

Un saludo desde Perú

Por: DJ_Tote

06/5/04

Yo veo un problema,la clave de entrada(es decir el nombre de la pagina)lo pude sacar cualquiera.En el script de javascript,en el codigo fuente esta escrito para hace la comparacion.Basta con ver el codigo fuente para entrar

Por: Pablo

26/11/04

Felicitaciones por el esfuerzo y trabajo!!
Las explicaciones son claras y con los ejemplos puestos es más fácil poder compararlo con lo que uno hace.
Una duda: cómo puedo hacer para que la palabra clave no aparezca en la dirección final (http://www. etc)?
Nuevamente gracias

Por: Hurricane

26/11/04

Una solución sería redireccionar, de la forma
<body onLoad="document.location.href='otra_web';">
Así no habría forma de saber la clave.
Saludos ;-)

Por: Erlan

07/4/05

Es exactamente lo que necesitaba muchas gracias, soy novato en esto del java y me ayudo mucho

Por: pablo

27/7/05

Justo lo que necesitaba! Recien empece a aprender algo de Java asi que mucho no se de esto pero el problema de que la clave se ve en la clave en la URL yo lo solucione poniendo la pagina con el codigo para el acceso en una pagina con frames.
Saludos y Gracias.

Por:

08/8/05

desde mi punto de vista no es seguro

Por: oswaldo

25/8/05

Hola espero que esto les resuelva la duda sobre la página de error, en realidad solo mando un alert y pongo la sentencia abajo que me regrese a la pagina en la que me encontraba justo antes de mandar el alert, el codigo fue inspiración de aqui mismo...ciao

Ejemplo:

<title>
CLAVE DE ACCESO
</title>
<HEAD>
<CENTER>
ACCESO A HORARIOS
</CENTER>
</HEAD>
<BODY>

<SCRIPT>

function verifica()
{
if((formclave.clave.value!="horarios")||(formclave.usuario.value!="leif"))
{
alert("ERROR, verifique la clave de acceso");
window.open.formclave.clave;
}
window.location = document.formclave.usuario.value + document.formclave.clave.value + ".html"
}

function bloqueo_de_boton()
{
if(event.button==2)
{alert('Botón bloqueado')}
}
document.onmousedown=bloqueo_de_boton

</SCRIPT>

<FORM name=formclave>
Usuario:<INPUT type=text name=usuario>
<br>
Clave: <INPUT type=password name=clave>
<INPUT type=button value=Acceder onclick="verifica()">
</FORM>

</BODY>
</HTML>

Por: Alberto

14/9/05

Si queremos que salga una página de error pondremos lo siguiete:

if (clave == valor_clave) {
window.location("mi_pagina.html");
} else {
window.location("error.html");
}
También le podemos dar 3 oportunidades;
Ponemos variable global:
var intento = 0;
if (clave == valor_clave) {
window.location("mi_pagina.html");
} else if (intento == 3){
window.location("error.html");
} else intento = intento + 1;

Por: Esteban

29/10/05

Para enviar al usuario a una determinada página en caso de error al introducir la contraseña podéis hacer lo siguiente:
if (contraseña no valida) {
document.nombreformulario.action="url_error.htm";
}

Por: Roli

24/11/06

Aqui va algo de inspiracion...
Se habran dado cuenta que solo hay un campo de texto... si queremos añadirle otro mas cosa que paresca mas formal con usuario y coontraseña simplemente aumentaremos un campo de texto dentrro del form con NAME="USUARIO" y en la parte del script del head añadiremos
...+ document.formclave.usuario.value +... y listo tendremos dos campos.
Para interesados en el diseño web...ponganse en contacto mi persona.

Por: liz

26/1/07

hola una pregunta en el ejemplo de la clave tu das la clave para entrar, la pregunta es como puedo hacer para que el usuario pueda modificar la clave a su gusto y asi pueda acceder con una clave que le sea facil recordar

Por: osvirtual.com

29/1/07

Excelente javascript! Pero me pregunto si en vez de "ocultar" una pagina, se podria algregar otro script en la pagina que queramos como sitio "denegado" para luego redireccionarlo hacia el formulario de "acceso de miembro".

Gracias y saludos,

Por: JOSE MANUEL

03/2/07

HOLA ME ESTOY QUE DANDO CON UNA DUDA TENGO UNA PAGINA WEB Y QUIERO QUE CUANDO UNA PERSONA QUIERA ENTRAR A MI WEB TENGA QUE ENVIARME UN MESAJE
PARA QUE YO LE DE UNA CLAVE TEMPORAR PARA CUANDO QUE SOLO LA USE UNA SOLA VER Y YA CUANDO TENGA ESA CLAVE PUEDA REGITRARSE EN MI PAGINA PLIS UNA AYUDA AQUI ESTE ES MI CORREO ELDURS@HOTMAIL.COM

Por: jose manuel

09/2/07

hola como estan quiero que me den mas detalle de estos paso me gustaria poner esto en pratica con mi pagina web. esto es lo que quiero hacer quiero poner en mi pagina web otra web pero para haceder a esta con clave tiene que entrar el codigo quiero saber como sease esto plis

Por: angelito

17/2/07

Buenas.
ante todo, excelente script^^.

He estado revisandolo todo, el formulario perfecto, ya lo tengo hecho, porque practicamente es copiar y pegar, pero en la web que quiero proteger, que he de poner? porque me parece que no lo explica o no me entero bien..

Es decir..

Formulario = donde se ponen los datos.

Para enlazarlo con la web protegida esos datos, en la web protegida ha de poner algo. digo yo.

De no ser asi, aclaradme la duda por favor..

Gracias.

Por:

17/2/07

Por: angelito

18/2/07

Ya me va ^_^

Pero lo del mensaje de error no, se me bloquea, alguien me puede decir en que parte del codigo va la script del error?

Gracias ^_^

Por: DJs WEB

05/4/07

HOLA a todos me gustaria saber como proteger con java la paguina a la que ingresé luego de colocar la contraceña, por que esta queda en el historial y en las cookies

Por: cristian

04/5/07

Como logro despues de logerme para que la pagina aparesca en otra ventana y no en la misma ventana.

Por: Omar

10/5/07

el codigo que llama a la funcion Verifica, no funciona, si bien bloquea el clic derecho del mouse, uno puede entrar igual en el menu: ver>Codigo fuente y ahi esta escrita la clave y el usuario: Usuario:LEIF Password: HORARIOS

la otra funcion con el usuario es muy violable, debido a que por mas que direcciones a una pagina con un redirect despues del redirect se direcciona a la pagina y copianto la URL de la pagina podes ingresar saltando el pasword, la mejor opcion seria la del PROMPT esta muy buena, aunque las desventajas serian que si pones la URL de la pagina donde esta el prompt en DAP, y haces download del archivo html, luego miras el codigo fuente y descubris la clave...

en realidad no se puede hacer cono javascript solo una contraseña segura, xq javascript funciona del lado del cliente, no en el server, por eso lo mejor seria hacerlo en PHP o ASP...
a menos que la info no sea muy importante y solo quieras prevenir que tu hermanito menor que no sabe un carajo de programasion entre a tu sitio..

Por: Juan David

31/5/07

Hola, tengo problemas con el codigo, yo tengo mi pagina montada en freewebs, pero cuando le doy el nombre del archivo(la contraseña), se me queda en la misma pagina, alguien sabe si eso pasa por estar en freewebs o no???

Gracias

Por: Juan David

03/6/07

Hola, es que tengo mi pagina montada en partes gratis, por ejemplo Freewebs, googlepages y 5Gb, pero al poner la contraseña se queda en el mismo lugar, yo creo que es por la parte del codigo:
window.location = document.formclave.clave.value + ".html"

Por favor me ayudan a que me funcione en esos host

Por: soy novato ayudadme porfavor

04/9/07

hola amigos, soy novato en esto de las webs. tengo mucas ganas de hacer algo pero no me salgo con ello.

allí va mi problema:

1) donde pongo cada uno de los cadigos (hard, body,... )???

2)donde pongo la contraseña para que acceda a la otra pagina ???

3)donde pongo el vinculo de la otra pagina ???

4)como lo ago para que no se vea la contrasenya(si es posible)

5)si te equivocas al poner la contrasenya que se desvie a otra pagina echa por ti (si es posible hacerlo )

Si alguien pudiera alludarme en esto se lo agradeceria mucho !!!!!

por si acaso aqui tienen mi correo !!!

gracias de nuevo amigos !!!!

Por: veronica

22/9/07

he probado el script y funciona, pero yo lo necesito para mas personas, cada una tiene usuario y contraseña.
Mi pregunta es donde pongo el nombre de usuario y la contraseña y como puedo añadir mas de un usuario. gracias

Por: DIANA MORAN

04/10/07

hola tengo un problema con un codigo de ASP. NO PUEDO CONECTARLA CON NINGUNA PÁGINA POR FAVOR AYUDENME,EN QUE ESTOY MAL, ESTE ES MI CODIGO:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>formulario</title>
<script type="text/JavaScript">

</script>
<style type="text/css">

</style>
</head>

<BODY bgColor=skyblue>

<div align="center">
<P align=center class="Estilo1">Teclea tu nombre y clave (MAYUSCULAS)

<%if request.form("usu")="" then%>
<form id="form1" name="form1" method="post" action="formulario.asp">
<p>usuario:
<label> <input name="usu" type="text" id="usu"/> </label>
</p>
<p>password:<label> <input name="pass" type="password" id="pass"/></label>
<label>
<input name="Submit" type="submit"onclick="MM_goToURL('parent','formulario.asp');return document.MM_returnValue" value="Enviar"/>
</label>
</form>

<%else
'eliminamos las posibles comillas de la entrada
'para evitar la introducción de sentencias SQL
usuario=replace(request.form("usu"),"'","")
password=replace(request.form("pass"),"'","")

Set Conn = Server.CreateObject("ADODB.Connection")
Conn.Open("DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=c:hbase.mdb")

set rs =CreateObject("ADODB.Recordset")
sqltxt="Select * from usuarios where usuario='"&usu&"' and password= '"&pass&"'"
'response.write sqltxt
rs.Open sqltxt, conn
if not rs.eof then
' nos ha devuelto un registro, ahora miraremos si es valido
' con ello evitamos el ataque típico SQL
if rs("usuario")=usu and rs("password")=pass then
'sNombre=Request.form("usuarios")

' si el usuario esta en la base de datos y la password coincide
session("autorizacion")=1
response.redirect "http://www.hotmail.com.mx"
end if
else
session("autorizacion")=-1
'hola mundo
end if
rs.close
set rs=nothing
conn.close
set conn=nothing
if session("autorizacion")=-1 or session("autorizacion")="" then
' no hemos encontrado el registro
' eso indica que el usuario y/o la password son erroneos

Server.Tranfer("pincorrecto.asp")

end if

end if%>
<p> </p>
<p> </p>
</body>
</html>

Por: Jose Risueño

10/10/07

Hola que tal, queria decir que a mi no me ha funcionado, lo de la clave de acceso.
lo he realizado con el frontpage. quizas algun detalle que se me escaba. ¿por que no hay que poner ningun hipervinculo ¿no?.
buneo yo cree las dos paginas en un directorio
una con el nombre restringida y la otra con el nombre: sexp0rn.
el nombre de la pagina lo he puesto dando a propiedades de la pagina y cambiar el nombre.
. luego he provado y no funciona na.

Por: braian

04/2/08

buenos dias muy bueno.
queria saber como se hace para cambiar el password???? yo no entiendo mucho de form.
y como se hace para q tenga usuario y contraseña??
me explican paso a paso,
desde ya muchas gracias

Por: kari lopez

27/10/08

hola que tal estoy empezando en esto de javascript necesito que me ayuden como hago mi login pase a la pagina.html que quiera o como hacer la pagina oculta eso no lo entiendo..

gracias
espero su respuesta

Por: sergio

03/11/08

holas yo queria algo asipero al poner la contraseña solodirege a una pagina y quetal copia el url el usuario y cada ves entra yo quiero q sea con contraseña http://www.desarrolloweb.com/articulos/ejemplos/restringidojavascript/uut75cp855b-m.html no hay por ahi algo mejor

Ver otros 21 comentarios pendientes de revisar

Enviar un comentario al artículo