Need a simple way to password protect a webpage

Here is an extremely brief all-in-one page PHP implementation, if you just need something that "works". It doesn't necessarily follow über best practices nor is it necessarily cryptographically secure, but that doesn't seem to be your #1 goal here—you might just be looking for something simple to get the job done in a minimal nonsense way. With this, there's zero chance of the secret stuff being indexed/accidentally accessed/etc—unlike many of the JS proposals above (and the absurdly shocking display:none suggestions which provoked me to actually comment).

It's up to you to style/format/add content as you want. To use this, change the password on line 4, and the filename on line 28. Even if you don't know PHP, it should just be visually simple—the secret stuff goes between the if/endif blocks—don't modify those (but you can add as much content/whitespace/etc as you'll need) and you'll be solid. Here you go.

Dead simplest approach is to redirect to a sub-directory to an html page based on the password entered, and have a 404 page that basically says the password was wrong.

function answer() { location.href('/membersonly/' + document.getElementById('answer').value + '.html'); }

<form onSubmit="answer()" id="answer" target="_self"> <input type="text" maxlength="55" class="box" autofocus /> <input type="submit" class="submit" value="SUBMIT" /> </form>

If they type in the right html page name, they see the content, if not , they get the 404 error.

You could encrypt the payload, put it into the page as a blob, and then add some JS that decrypts it on the fly with the given password. There's a few pastebins that work like this, like PrivateBin, and IIRC there used to be a TiddlyWiki Classic plugin that allowed you to do this with single tiddlers.

If you actually want people to be able to bypass your "security", you could use something like the Vigenere cypher instead of AES.

If you build it in Javascript, the password will be exposed in the source code. You can try to obfuscate it but it will be there. To guard it it any meaningful way you'd need to use a server-side language, or .htaccess like you suggested.

I'd suggest a basic login page that submits a form to the server to check a password. If it checks out, you set a cookie with authorized=true and that lets the user in. Each page on the exclusive site then checks the cookie and kicks you out if it's not there. Easy peasy.

Now you could amp up the cookie with all sorts of user hash checks and other nonsense, but that seems overkill for your purposes. This seems like a decent compromise between security and complexity.

One way (if it's only a single page) would be to wrap the actual content in a div with "display: none" and then have a simple password prompt that when filled in correctly toggles the docs display attribute.

Something like this is very light weight and could be extended so once a user has entered the pwd, store something in local storage so they don't need to enter the pwd again.

<div id="content" style="display:none">...secret content...</div>
<form onsubmit="(e) => checkPwd(e)" id="pwdForm"><input id="pwd" type="text"/><input type="submit"/></form>
<script type="text/javascript">
function checkPwd(e) {
  e.preventDefault();
  let input = document.getElementById("pwd");
  if (input.value === "bananahamock") {
    let content = document.getElementById("content");
    content.style.display = "block";
    let pwdForm = document.getElementById("pwdForm");
    pwdForm.parentNode.removeChild(pwdForm); 
  }
  
  return false;
}
</script>

(Wrote this on my phone so code is probably wrong :) )

The downside is that there is no real security involved (the "password" is sent in plain text) and if there are multiple pages involved it's probably easier to use a proper CMS with login capabilities.

Don't know if you want everything to be self contained one one page without redirects but another option is to make a "password entry" page that will take user input. You then hash that user inputted password and redirect to a path with the hash. For incorrect password attempts just have the 404 page state the password was incorrect, for a correct password it will bring up the page that corresponds to the hashed passsword.

You should use the top answer (one with php code) or if you and your friends are familiar with Tor, I would suggest creating a hidden service and password protecting it. Your friends will have to enter a string in their torrc to access the website only once. As long as they don't mess up torrc, they will be able to view the webpage.

Other users will not be able to connect to your hidden service if that string is absent in torrc.

Edit: Don't use css or other methods that rely on hiding the content if you don't want anyone to index it. robots.txt is what you want the robots to do, nothing is stopping a bad robot from indexing your website.