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>
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.
As far as I know, you will at least require a little JS since HTML simply doesn't have any logic constructs to accomplish what you need. If you REALLY want to keep it static, I would go about it by using a strong JS obfuscator, such as Obfuscator.io.
If I had to come up with something under these conditions, I'd be thinking of something along the lines of hashing the username and password and using that as the url for a file on the server that contains the actual content of the page and then using JS to load that in.
But still, doing the security on the backend is a much better option if you actually care about security and not about just making it challenging for most users.