CODEWITHSUNDEEP
htmlcsswebpasswords
Renoto
Renoto

Reputation: 185

password protect a web page using css/html?

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!

Upvotes: 4

Views: 58387

Answers (6)

Robin
Robin

Reputation: 9644

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.

Upvotes: 7

jacktheripper
jacktheripper

Reputation: 14209

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

Upvotes: 5

Quentin
Quentin

Reputation: 943089

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.

Upvotes: 6

Abhranil Das
Abhranil Das

Reputation: 5918

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.

Upvotes: 0

carny666
carny666

Reputation: 2410

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.

Upvotes: 5

Daniel A. White
Daniel A. White

Reputation: 190897

No. It would not be secure with just HTML.

Upvotes: 2

Related Questions