Tengo un sitio web estático que quiero proteger con un nombre de usuario y/o contraseña como lo hace htaccess de Apache, pero no quiero alojar un servidor Apache para que funcione. ¿Cómo puedo lograr esto sin frontend javascript?
Lo más cerca que he llegado usando frontend JS (demasiado inseguro porque la fuente es visible):
<!DOCTYPE html> <html lang="en"> <script> var password = "password"; (function promptPass() { var psw = prompt("Enter your Password"); while (psw !== password) { alert("Incorrect Password"); return promptPass(); } }()); alert('Correct Password\nWelcome!'); </script> <body align="center"> <h1>Password Protected Site</h1> <!-- Other page elements --> </body> </html>Por defecto, la seguridad debe realizarse en el backend (como ya lo han dicho otros).
Pero una cosa me vino a la mente para hacer algo de seguridad en la interfaz:
Use algo de JavaScript para solicitar una contraseña del usuario y use esta contraseña para descifrar alguna cadena cifrada que ya está disponible dentro de la página entregada y reemplace el contenido del body con los datos descifrados. Debería haber algunas bibliotecas disponibles para cifrar/descifrar datos usando JavaScript.
Hasta donde yo sé, al menos necesitará un poco de JS, ya que HTML simplemente no tiene construcciones lógicas para lograr lo que necesita. Si REALMENTE desea mantenerlo estático, lo haría utilizando un ofuscador JS fuerte, como Obfuscator.io .
Si tuviera que pensar en algo bajo estas condiciones, estaría pensando en algo como codificar el nombre de usuario y la contraseña y usarlo como URL para un archivo en el servidor que contiene el contenido real de la página y luego usando JS para cargar eso.
Pero aún así, hacer la seguridad en el backend es una opción mucho mejor si realmente te preocupa la seguridad y no solo hacer que sea un desafío para la mayoría de los usuarios.