javascripthtmlsecurity

How to password protect a static website? (without htaccess)

I have a static website that I want to protect with a username and/or password like apache's htaccess does but I don't want to host an apache server for it to work. How can I achieve this without frontend javascript?

The closest I've come using frontend JS (too insecure because source is 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>
Solution

  • By default security has to be done on the backend (as already stated by others).

    But one thing came to my mind to do some security on the frontend:

    Use some JavaScript to request a passwort from the user and use this password for decrypting some encrypted string already available within the delivered page and replace the body's content with the decrypted data. There should be some libraries available for encrypting/decrypting data using JavaScript.