Javascript to disable page and require password.

[pxlcreations]

Hello all, I have a website that requires a static password to enter it (like a promo sections) and I am wanting the page to have a box that when you first go to the page, asks for that password. I imagine it looking a bit like those boxes that are always asking you something like, "Take the IQ test to continue", except that it requires a static password. If the password is wrong, it would just say so, if it was right, it would allow access to the page and store the pass in a cookie so they only had to login once.

I am using jQuery to set and retrieve cookies and the link to the script is here:

http://plugins.jquery.com/files/jquery.cookie.js.txt

Thank you, and if anyone can do it, its at Dynamic Drive.

[jscheuer1]

This can sort of be done. But before we go into that, it might be a bad, even a very bad idea.

How important is it that this be secure? Is this just some sort of thing to prevent, on their honor, honest people from accessing the site if they don't have the password?

Because that's all it can be with javascript. With javascript there is always a way to find out what the script is looking for and/or for making it think it has received the proper password even when it has not and/or for bypassing the password detection routine and moving directly to the success routine.

And cookies are not secure, as they can persist on the user's computer and later be used by someone who is unauthorized to gain access to the site.

If security is an issue, use server side code for this. Even there, depending upon how secure it needs to be, it can get a bit complicated.

[pxlcreations]

If security is an issue, use server side code for this. Even there, depending upon how secure it needs to be, it can get a bit complicated.

This is exactly why I want to use JS, less complicated.

The security factor isn't too important right now, I might upgrade it later on. I've got some other roadblocks along the way so it's just like another step.

[jscheuer1]

Well, as I say, javascript isn't all that secure. Javascript cookies add another hole in security. And I don't think I ever said that a javascript password would be easy.

Server side passwords don't have to be all that complex to begin with. Doing one page with PHP is simple and secure. Doing all pages that way by setting a cookie for the other pages would be pretty simple but less secure because of the cookie. But it would be quite a bit more secure than anything javascript can do. Using a SESSION variable instead of a cookie would be more secure, and not at all complex.

The easiest thing would probably be to use .htaccess to password protect the folder:

http://tools.dynamicdrive.com/password/

To implement that requires a certain level of access for you on your host. Many hosts provide that level of access by default, others would be happy to grant it to you for free, yet others for a fee. Some might not be willing to grant it at all.

This script:

http://www.dynamicdrive.com/dynamicindex9/password.htm

Is about as secure as you can get with javascript, which isn't very.

You can remove the requirement for a username easily enough if you would like, as well as add a cookie to be set upon successful completion of the password. You can also add a check for the cookie at the beginning of the function so that it skips to the success part if the cookie is present.

What you do when folks successfully complete this process is another matter. You can't keep having them go to good.htm. I'm open to suggestion there.

[pxlcreations]

Ok, I see what you mean there. I am open to using PHP if that would be better. I can access the .htaccess file so that won't be a problem. However, if I do it that way, can it still be in a popup window like thing where the page is disabled until you enter the password? And then how could it remember it securely?

[jscheuer1]

It is my understanding, though I'm no expert at .htaccess, that you can set it for a folder. If you do, the first time a user gets to the folder, they are prompted for a username and password. The username field always appears, but you can set it up so that it may remain blank and only the password need be filled in.

Anyways, again - as I understand it, once this is completed by the user, they have access to all pages/files in the folder. This can also, I believe be setup to include sub-folders.

Once they leave that area and close the browser, they would need to login again. This also might be able to be set to expire after a certain amount of time being absent from the area.

To get all of these features, you may have to go a little beyond the .htaccess Password Generator I linked you to, but it appears to have most of the options I mentioned.

If that works like I think - again, I'm no expert at .htaccess - it's probably the most secure.

With PHP (this I know quite a bit more about, but am not an expert) you can setup a prologue to the page, like:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<?php 

// Define your username and password 
$username = "Some Name"; 
$password = "somepassword"; 
$theName = isset($_POST['txtUsername'])? $_POST['txtUsername'] : '';
$thePass = isset($_POST['txtPassword'])? $_POST['txtPassword'] : '';
if ($theName != $username || $thePass != $password) { 

?> 
<title>Login for Whatever</title>
<h1>Login</h1> 

<form name="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> 
    <p>Username:
    <br><input type="text" title="Enter your Username" name="txtUsername"></p> 

    <p>Password:
    <br><input type="password" title="Enter your password" name="txtPassword"></p> 

    <p><input type="submit" name="Submit" value="Login"></p> 

</form> 

<?php 

} 
else { 

?>

After that, place the entire rest of the actual page code, starting with the <title> tag, up to but not including the closing </body> tag. Just before that tag put:

<?php 

} 

?>

Working in a SESSION var or cookie shouldn't be too hard.

[pxlcreations]

Ok, so I'm a little confused as to how the .htaccess will work, but I think it works like this (correct me if I'm wrong)

I make an .htaccess file in the folder that I want to protect (so if I want to protect the "Secret" folder which is located inside the "Website" folder, I would place it in the "Secret" folder?

Also, the .htaccess links to the .htpasswd, and I think the password would be stored in the .htpasswd file. However, will it still work if I don't want to use a username?

Working in a SESSION var or cookie shouldn't be too hard.

Would this save it so that the user doesn't have to always authenticate themselves?

[jscheuer1]

Ok, so I'm a little confused as to how the .htaccess will work, but I think it works like this (correct me if I'm wrong)

I make an .htaccess file in the folder that I want to protect (so if I want to protect the "Secret" folder which is located inside the "Website" folder, I would place it in the "Secret" folder?

Also, the .htaccess links to the .htpasswd, and I think the password would be stored in the .htpasswd file. However, will it still work if I don't want to use a username?

Yes. I just tried this out. I had to put .htpasswd in the server root for some reason (I'm using WAMP). I put .htaccess in the folder I wanted to protect. My .htaccess looks like so:

AuthName "Restricted Area" 
AuthType Basic 
AuthUserFile /wamp/.htpasswd 
AuthGroupFile /dev/null 
require valid-user

My .htpasswd file is:

:Gobi Dessert

When I try to navigate in the browser to that folder, I'm still prompted for a username and a password, but I just leave the username field blank, enter:

Gobi Dessert

into the password field, click OK, and I'm in.

As to the other question (about the PHP SESSION), Yes to that as well.

[pxlcreations]

Ok, so would my page structure look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" language="javascript" src="javascript.js"></script> 
	<link rel="stylesheet" type="text/css" href="css.css" />
	
<?php  

// Define your username and password  
$username = "Some Name";  
$password = "somepassword";  
$theName = isset($_POST['txtUsername'])? $_POST['txtUsername'] : ''; 
$thePass = isset($_POST['txtPassword'])? $_POST['txtPassword'] : ''; 
if ($theName != $username || $thePass != $password) {  

?>  
<title>Login for Whatever</title> 
<h1>Login</h1>  

<form name="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">  
    <p>Username: 
    <br><input type="text" title="Enter your Username" name="txtUsername"></p>  

    <p>Password: 
    <br><input type="password" title="Enter your password" name="txtPassword"></p>  

    <p><input type="submit" name="Submit" value="Login"></p>  

</form>  

<?php  

}  
else {  

?>


<title>Secret Area</title>
</head>
<body>

<p>Hello, this is the content.</p>

<?php  

}  

?>
</body>
</html>

[jscheuer1]

Perhaps, depends upon what you're doing. In all likelihood though you don't want the:

	<script type="text/javascript" language="javascript" src="javascript.js"></script> 
	<link rel="stylesheet" type="text/css" href="css.css" />

where it is, rather here:

<title>Secret Area</title>
	<script type="text/javascript" language="javascript" src="javascript.js"></script> 
	<link rel="stylesheet" type="text/css" href="css.css" />
</head>

I'm still playing with the SESSION thing, but I have a thread open on it here:

http://www.dynamicdrive.com/forums/s...ad.php?t=56167

where you can see the structure for using the SESSION. It defaults to 180 minutes on most servers (configurable in the php.ini file). That seems like a little too much for me, and I'd want it to be more if the person kept doing things, that's what I'm still looking into. The SESSION part works though for extending access to other pages with the same prologue without the need to login again.

Alternatively, you could have all the pages but one only check for the SESSION. Then have those send the user back to the login page if the SESSION isn't in effect.