Bloquear una web por contraseña

Bloquear una web por contraseña desde el servidor es la mejor forma de impedir el rastreo y la indexación de una página.
Esto además resulta de gran utilidad para webs en desarrollo o sus versiones testing.

La gran pregunta ante esto suele ser como hacer dicha implementación. Así que os presento varias.

Plesk o cpanel

Muchas webs que emplean un panel de control como plesk o cpanel tienen directamente esta opción integrada, por lo que realmente el esfuerzo o complejidad para realizar dicha implementación es mínima. Se añade el directorio que se quiere proteger (si es todo el proyecto pues todo) y se añaden los usuarios.

Apache

En Apache lo ideal es hacerlo por medio del .htaccess en la carpeta ROOT del proyecto para bloquear toda la web, o en el directorio concreto a bloquear, aunque también se puede hacer por medio de un location/locationmatch.

Entonces se deben poner las siguientes líneas:

AuthUserFile /home/stage/web/domain/public_html/.htpasswd
AuthType Basic
AuthName "Prueba a entrar"
Require valid-user

• AuthUserFile: Aquí se especificará la ruta del .htpasswd (ahora vamos a ello).
• AuthType: Con esto especificamos que la autentificación será la básica. Hay distintas formas de Authtype, pero eso es otra historia.
• AuthName: Sirve para definir el nombre de la zona protegida.
• Require: Se establece que lo requerido (en ese caso) sea que nos valga con un usuario válido del listado de usuarios que elijamos.

Una vez tengamos estas líneas tenemos la base, pero está incompleto. Ya que no se podrá entrar en la web puesto que no existe ningún usuario válido. Así que el siguiente paso es crearlo. Para ello tenemos que hacer el listado.

Htpasswd

El listado lo tenemos que hacer en un archivo llamado .htpasswd ; que para el que no sea fanático de la encriptación le recomiendo generar los usuarios con este generador de htpasswd que además permite hacerlo con distintas formas de encriptación.

Para ponerlo correctamente seguimos los siguientes pasos:

• Creamos una carpeta donde colocar el .htpasswd.
• Creamos los usuarios y contraseñas que necesitemos (como si queremos crear solo uno).
• Cara usuario que creemos corresponderá a una línea.

Ahora tenemos el listado de usuarios válidos, pero tenemos que conectarlo con el Authuserfile.
Así que para conocer la ruta exacta de nuestro archivo .htpasswd en el caso de que nuestra web funcione con PHP (si no se hace lo mismo con el lenguaje correspondiente). Creamos un archivo index.php en la misma carpeta que el .htpasswd y añadimos el siguiente código:

<?php echo dirname(__FILE__) . '/.htpasswd';?>

Accedemos a la carpeta por medio de URL y entonces nos saldrá una ruta:

Copiamos esta ruta y la insertamos en el Authuserfile y ya funcionará a la perfección.

Nginx

Aplicando los mismos pasos que en apache con el .htpasswd pero aplicando el siguiente código dentro de server{} en el nginx.conf

location /ruta/a/tu/pagina {
auth_basic "Acceso restringido";
auth_basic_user_file /ruta/al/archivo/.htpasswd;
}

La otra diferencia es que para que esta implementación funcione, deberías hacer un reload en nginx (o en casos extremos reiniciarlo).

Azure Static Web Apps

Azure Static Web APPs, funciona un poco distinto al resto de servidores, veamos como se hace trasteando los siguientes json.

Crea una función de autentificación

En Azure Static Web Apps, las funciones se utilizan para implementar lógica personalizada en la aplicación web. Para crear una función de autenticación, sigue estos pasos:

• Inicia sesión en el portal de Azure y abre la página de tu aplicación web estática.
• Haz clic en la pestaña "Functions" en la barra de navegación superior y luego haz clic en "Create function".
• Selecciona "JavaScript" como lenguaje de programación y luego selecciona "HTTP trigger" como tipo de plantilla.
• Asigna un nombre a la función y haz clic en "Create".
• Agrega el siguiente código a la función:

module.exports = async function (context, req) {
const username = req.body.username;
const password = req.body.password;
if (username === 'username' && password === 'password') {
context.res = {
status: 200,
body: "Authenticated"
};
} else {
context.res = {
status: 401,
body: "Unauthorized"
};
}
};

• Haz clic en "Save" para guardar la función.

Este código simplemente comprueba si las credenciales proporcionadas coinciden con un nombre de usuario y contraseña específicos y devuelve un estado de autenticación o no autenticación.

Configura la función de autenticación:

Para configurar la función de autenticación, debes especificar la ruta que protegerá la función. Para hacer esto, crea un archivo routes.json en la raíz de tu proyecto y agrega el siguiente código:

{
"routes": [
{
"route": "/subdominio/*",
"allowedRoles": ["anonymous"],
"methods": ["GET", "POST"],
"authLevel": "function",
"functionName": "nombre-de-tu-función-de-autenticación"
}
]
}

Este archivo configura la función de autenticación para proteger todas las rutas bajo el subdominio subdominio y para permitir que cualquier usuario con un rol de "anonymous" acceda a ellas. También especifica que la autenticación se realizará a través de la función que creaste anteriormente.

Crea un archivo de configuración de acceso:

Para especificar los usuarios y contraseñas que tendrán acceso al subdominio protegido, crea un archivo de configuración de acceso. Puedes hacerlo directamente en el archivo routes.json o utilizando un servicio de almacenamiento como Azure Blob Storage. Para este ejemplo, crearemos un archivo access.json directamente en el proyecto.

Agrega el siguiente código al archivo:

{
"users": [
{
"username": "usuario1",
"password": "contraseña1"
},
{
"username": "usuario2",
"password": "contraseña2"
}
]
}

Este archivo especifica dos usuarios, cada uno con un nombre de usuario y contraseña. Puedes agregar tantos usuarios como desees. Sería un equivalente al htpasswd.

Configura el archivo de configuración de acceso:

Por último, debes modificar la función de autenticación para que verifique las credenciales del usuario en el archivo de configuración de acceso. Para hacer esto, reemplaza el código en la función de autentic.

Una vez que hayas completado estos pasos, tu subdominio estará protegido con contraseña y solo los usuarios autorizados podrán acceder a él. Es importante tener en cuenta que estos pasos pueden variar según la versión de Azure Static Web Apps que se esté utilizando.
Por eso recomiendo consultar la documentación oficial de Azure Static Web Apps para obtener información un poco más detallada.

Si quieres aprender esto de una forma más avanzada o con alguien que te ayude paso a paso, descubre que se puede ver esto y mucho más en el máster de SEO. Una formación práctica de verdad, donde aplicas todos los cambios en una web y eres supervisado.