 |
|
|
|
|
|
Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS | |
||
|
||||
|
|
|||
 |
|
 |
||
|
||||
Acceso por clave javascript
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.
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.
| 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.
+ 4 categorias relacionadas
+ 21 comentarios (Añadir)
+ 39 comentarios no revisados
| Autoría, licencia y acciones sobre este artículo | ||||||
|
Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com URL: http://www.desarrolloweb.com Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright. * Para consultas técnicas utilizar la lista de correo.
|
+ Entrar en DHTML
+ Entrar en Scripts en Javascript
+ Entrar en Scripts DHTML
| Los comentarios de los visitantes son para ampliar la información del artículo. Cualquiera puede participar. |
| Se muestran 21 comentarios revisados |
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.
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>
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".
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.
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>
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
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"
RESPUESTA
Pues cambiando el nombre del archivo HTML que tiene el contenido restringido.
Tienes idea de como hacer esto?? Te lo agradeceria mucho. Saludos atentos.
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.
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ú
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
<body onLoad="document.location.href='otra_web';">
Así no habría forma de saber la clave.
Saludos ;-)
Saludos y Gracias.
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>
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;
if (contraseña no valida) {
document.nombreformulario.action="url_error.htm";
}
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..
 | Añadir un comentario del artículo |
| Comentarios sin revisar |
| Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente. |
 | Ver los comentarios no revisados |
| Añadir un comentario del artículo |
| Enlaces: |
| Maestrosdelweb |
Ir arriba
Lectura recomendada  Compra este libro en Agapea, la librería urgente a domicilio. |
||||||||||||||
Tienda DesarrolloWeb
