password protect a web page using css/html?

Question

I've seen several questions about password protecting pages, but none of them seem to be exactly what I'm looking for. JavaScript, or Apache, and such aren't options that I'm able to consider currently. I also don't have the ability to download a product or buy one since this isn't exactly for me but its for my boss' website, so please refrain from suggestions like that.

The site is currently written in CSS and HTML, and that's also the extent of my coding knowledge unfortunately. I saw a few places where people used PHP coding, but every time I tried I just got a blank page or it didn't work out properly, or nothing would happen when I entered the password.There also haven't been any really good detailed instructions on it, so I never know where I'm supposed to put the PHP code (does it go on its own page or is it integrated?) or how to connect it to the actual web page.

Truthfully it doesn't have to be anything fantastic, because a lot of the people who will be looking at this site are people who aren't very computer savvy, just a simple form box with a password field. It would be best if there was a code I could put right into the HTML on the page. If I have to make a separate HTML page I don't mind doing that either. There's going to be one password given to the Salesmen so they can access the private pages while on the road from their laptops or tablets.

I saw something about .htpassword and another one I cant remember, but I haven't been able to find any step by step instructions or detailed information about it (detailed meaning info I can understand...). I saw also the thing about password_protect.php, but that requires a username field I think, and I cant really use one like that. There wont be a username, and sadly that's asking too much of the salesmen to remember two things heh.

Anyways, I apologize for my ignorance on the subject, and thank anyone for their help in advance!

Answer 1

If you add javascript, with a bit of pre-processing it is possible to securely password protect a page, no server-side validation needed.

Encrypt your content with a symmetric key algo like AES (that's the pre-processing), put it online and use javascript to decrypt that content with a user provided password.

Everything can then happen client-side in the browser. It doesn't matter if the code is open for everyone to see.

Pseudo-code:

<input type="password" id="password">
<button class="decrypt">Decrypt</button>
<script>
    var myEncryptedPage = '<html-string-pre-encrypted-with-your-password>';
    $('.decrypt').click(function(){
        var password = $('#password').val();
        // 'decrypt' tries to decrypt your string with the user provided password
        document.write(decrypt(myEncryptedPage, password));
    });
</script>

For reference if you want to see a possible implementation I wrote a simple PoC using the crypto-js library showing that idea (StatiCrypt), where you can do the pre-processing and encrypt your page with a password prompt.