How can I add password protection to a webpage?

Question

When I click some image on my site, I want it to ask for a password and check if its right. If the correct password is entered, then go to the site. But i'm pretty new to site making. I am aware that webpage code is open source. Just inspect element and boom. So this password protection code that I came up with is pretty useless.

var userResponse = "N/A";

function askPass() {
    "use strict";
    userResponse = prompt("What's the password?", "000000");
    if (userResponse === "SpeculAcessPls") {
        window.open("www.link.com");
    }
}

What can I do to make my password more secure?

Answer 1

For that you will need a php function that authenticates a login form.

<form action="action.php" method="post">
  <p>Your password: <input type="text" name="password" /></p>
  <p><input type="submit" /></p>
</form>

And your action.php should look like this:

<?php

if (!$_POST["password"]=="login password")
{
  echo "Wrong password!";
}
?>

Quick tip: if you have never heard of a .htaccess file you will need to create one in the directory of your index.html and add the code to enable php. The link below will show you what you need to write into the file to enable it for your web server.

http://www.besthostratings.com/articles/php-in-html-files.html

Answer 2

With a bit of pre-processing if you want to keep everything client-side you could encrypt your webpage with a symmetric key algo, say AES, and put that up on public web. No server side password verification.

Then it doesn't matter if your source code if readable by everyone, you still need the password to read the content.

Pseudo code would be (using jQuery markup):

<input type="password" id="password">
<button class="decrypt">Decrypt</button>
<script>
    var myEncryptedPage = '<html-string-encrypted-with-your-password>';
    $('.decrypt').click(function(){
        var password = $('#password').val();
        // 'decrypt' tries to decrypt your string with the user provided password
        window.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.

Answer 3

Solution #1 with Apache:

1. Create a file .htaccess in the folder you want to protect with:

   AuthType Basic
   AuthName "restricted area"
   AuthUserFile /home/www/test/.htpasswd    # replace here with the real path
   require valid-user
   

2. Create a file .htpasswd with:

   coucou:$apr1$hS5e9bcn$mDINweGTqy8TYNv4aGr3W0
   

3. Now the website will be available only for user coucou with password test!

Of course you can customize that with http://www.htaccesstools.com/htpasswd-generator/.

Note:

• Clearing cookies seems to work in order to revoke access (example: you want to leave a public computer)
• Closing the browser / reopening the browser isn't enough to revoke access
• More reference about how to logout: How to logout when using .htaccess (and .htpasswd) authentication?

Solution #2 with PHP:

Just create this single index.php file:

<?php
if ($_POST["pwd"] == "thepassword")
{
    echo "You entered the protected page successfully";
    die();
}
?>

<form action="" method="post">
<p><input type="password" name="pwd" autofocus></p>
<p><input type="submit" /></p>
</form>

Answer 4

I think isn't secure. use:

<input type="password" name="password" value="password">
<input type="button" value="Send" name="send">

I don't know very much about javascript so I can't write you javascript coding