Este artículo te explica paso a paso cómo crear un sistema sencillo con Javascript para proteger por clave unas páginas en tu web, de modo que no permita mostrar contenido si no se ha puesto esa clave.
Actualizado: Este artículo muestra una pseudo-manera de proteger un contenido, para que no se pueda acceder si no se sabe un código. Pero la práctica no es para nada segura, porque el contenido estará publicado y cualquier persona podría acceder a él conociendo simplemente su URL. Por tanto no es algo que pueda garantizar nada. Por esto hemos marcado como obsoleto este artículo, ya que realmente no recomendamos mucho esta solución. Puede servirte si estás jugando con tu página pero no para hacer algo que puedas considerar buena práctica.
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. Esto es debido a que Javascript es un lenguaje que se ejecuta en el cliente. Al ejecutarse en el cliente cualquier persona puede leer el código fuente de la página y tratar de burlar la seguridad por diversos mecanismos.
Sabiendo por tanto que las claves seguras se realizan mediante backend (programación del lado del servidor), podemos dificutar un poco el acceso a los usuarios a ciertas partes de la web. Existen mecanismos de todo tipo para conseguirlo, en este artículo veremos uno muy sencillo, con un grado de seguridad bastante pobre, 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>
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.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...