4

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!

Improve this question
5
  • 1
    You say 'no javascript' but that is pretty much the only way you are going to be able to do what you want - and the result will not be at all secure from those with any JS knowledge. Commented Feb 21, 2012 at 16:46
  • Renoto extend your knowledge. This should be done with a server-side language (Like you've said I saw also the thing about password_protect.php). When I was starting programming I've also asked that stupid questions. Actually it doesn't require anything more than you want but you'll need to learn the language first. Commented Feb 21, 2012 at 16:50
  • 2
    Talk to your web host/look @ their faq for .htaccess/.htpassword support which is the simplest way to do this and does not require writing any code e.g. help.godaddy.com/article/2504 Commented Feb 21, 2012 at 16:51
  • I read that since most users turn Javascript off its not wise to use that as a form of password protect. Unless that information is wrong? Commented Feb 21, 2012 at 16:59
  • For a .htaccess/.htpassword solution see my answer Commented Feb 21, 2012 at 17:02

6 Answers 6

Reset to default
7

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

A similar html-protecting tool I wrote, that uses key derivation instead of straight AES: PageCrypt
6

password protect a web page using css/html?

… is impossible. One is a presentation language and one is a document markup language.

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.

PHP is a programming / template language. A typical usage would be to embed PHP code in an HTML document.

In the context of the WWW, it is a server side programming language. A webserver is responsible for running the PHP program through a PHP interpretor and sending the output to the client (instead of sending the original file).

I saw something about .htpassword

This is a common file name for a password file used with Apache's built in password system.

If you just want a simple password system, then you should look at the manual for your web server.

Improve this answer

3 Comments

Mk this is going to be a very dumb question, and I already know that. What exactly is 'Apache'. I know its a type of server, but is it universal? Is it just something that is involved automatically in all web pages? Is it like software? I see it mentioned everywhere but I'm not exactly sure what it is and what its functionality is in regard to the internet. I tried looking it up a few times, but that just confused me further.
Apache is one of the more common web servers. A web server is a piece of software that listens on the network for HTTP requests from browsers (and responds to them).
Ah thanks! That was actually better than a few descriptions I've read; nice and to the point.
5

You can create a .htpassword file and upload it to the non-public part of your server. Its contents should look something like this:

user1:password
user2:secondpassword
user3:thirdpassword

You can create these encrypted passwords with the simple script below. 

<?php
if (!empty($_POST[password]) AND !empty($_POST[user])) {
  $user = $_POST[user]; 
  $password = $_POST[password]; 
  $encryptedPassword = crypt($password);
}
$script = $_SERVER['SCRIPT_NAME'];
echo "<html><head><title>Password Encryption</title></head><body>
<form method=post action='$script'>
<font size=5><b>.htpasswd File Password Encryption</b></font>
<br><br>Enter Username<br>
<input name=user value='$user' size=20>
<br><br>Enter Password<br>
<input name=password value='$password' size=20>
<br><br><input type=submit name=submit value='Encrypt Now'>
";
if (!empty($user) AND !empty($encryptedPassword)) {
  echo "<br><br>.htpasswd File Code<br>$user:$encryptedPassword<br>
}
echo "</form></body></html>";
?>

An example of encrypted passwords can be seen here (please note, the fullstops are part of the encryption, the line breaks separate the users):

user1:$1$XrC3d0Bq$.fiItuFi.cWvCZamQi2x8.
user2:$1$4AKaALkW$6WNz7zDKveBuAy.6ORFi5.
user3:$1$5HttySKH$MktpH3lQ0OkeUclHfuBKF1

Then in the directory you want to protect, in the .htaccess file include the following code and the link on your server to the .htpassword file

AuthName "Restricted Area" 
AuthType Basic 
AuthUserFile /pathtofileonyourserver/.htpasswd 
AuthGroupFile /dev/null 
require valid-user
Improve this answer

4 Comments

This is where I start getting confused heh. On the protected pg (call it Catapg) theres only a download button for a PDF file. All of the pages are in the main directory. From what I gather, I create a .htpassword file and put all this code into it, except that last part with AuthName etc. Then I make the .htaccess page and put it with all the other files in the main directory, and just have the .htpassword file linked to it. But I'm curiouse, how will the .htaccess file know to protect the page called Catapg specifically, how will it know to launch?
actually I just did a little bit of research and tried doing this and nothing happened. By nothing I mean whenever I tried to load the .htpass/acess files to the server nothing showed up, but the server thinks their there. I dont see the files at all, but if I try to load them it says their already there. I have to delete whatever folder their in just to delete the file itself...not sure if this is a method I can actually use now that I've tried it, unless I'm missing something
What FTP client are you using? It seems that you haven't got hidden files shown….
Hmm, believe it or not I actually went ahead and contacted the Host site and they set up a password protect thing for me. I really lucked out with this one, but because your answer was the one I was going off of most, I'm saying you answered my question.
5

Any password logic in css or html (or even javascript) would be useless as all of this 'code' is downloaded to the client. You need to have the password check done on the server-side.

Improve this answer

1 Comment

well you can use AES with a long password that brute-forcing it is not even practical
2

No. It would not be secure with just HTML.

Improve this answer

Comments

0

Elaborating on Daniel's answer, HTML and CSS can be used only to create static content, meaning that the content on the page cannot change. Input forms asking for passwords, checking it against some database and allowing/denying access are pretty involved dynamic things that cannot be achieved solely with these two. At least javascript is required, and even then it will not be very secure.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.