Login Script v1.9 Problem

SuavyDoodle · #1 (**permalink**) 09-25-06, 10:57 PM

In the following downloaded script, if I use custom button images and change the image source, the script will not work. Instead, after I type in the username and password and click submit, the login page will refresh back to the previous state. (Asking for usernmae and password, not logging in)

script:

Code:

/*
-------------------------------------------------------------------
 Login Script Version 1.9
 By H G Laughland 
 http://www.laughland.biz

This script can be used free of charge and may only be
redistributed the same way. The disclaimer must remain
intact.

DISCLAIMER: Use this script with caution. This script is not 
the most secure method available, for protecting material. Its
main purpose is to demonstrate the javascript techniques used.
The author takes no responsibility for data loss
resulting from the use of this script.
-------------------------------------------------------------------

INSTRUCTIONS - Read Before Using Script

If you are using frames, the code referred to in steps 2 - 5 must be put in the 
pages displayed in the frames and NOT in the parent document.

Step 1
In the Usernames & Passwords section, configure the variables as
indicated by the comments.
 
Step 2:
Add the following code to the <head> section of your login page: 
 <script src="scripts/login.js"></script> 
Change "scripts/login.js" to reflect the correct path to this script
file on your server. 
 
Step 3:
Add this code to the login page, at the place you want the login
panel to show:
 
 <script language="JavaScript">
  BuildPanel();
 </script>
 
Step 4:
Add the following code to the <head> section of each page procteded
by this script:
 
 <script src="scripts/login.js"></script>
 <script language="JavaScript">
  checkCookie();
 </script>

Change "scripts/login.js" to reflect the correct path to the script
file on your server.
 
Step 5: 
On the page that is to have the logout button, paste this code where you
want the button to be:

 <form action="" name="frmLogoff">
  <input type="button" name="btLogoff" value="log out" onclick="logout();">
 </form>
 
 To use your own image instead of the grey button change the type from button to image
 and add src="myimage.gif" where myimage.gif is the image (including the path to it if
 needed, you want to use.
 
Step 6:
Upload this script and your html pages to the relevant directories
on your server. 




*/

//----------------------------------------------------------------
//  Usernames, Passwords & User Pages - These require configuration.
//----------------------------------------------------------------
var successpage = "test.html"; // The page users go to after login, if they have no personal page.
var loginpage = "logintest.html"; //Change this to the page the login panel is on.

var imgSubmit = ""; //Change to the path to your login image,if you don't want the standard button, otherwise do not change.
var imgReset = "";  //Change to the path to your reset image,if you don't want the standard button, otherwise do not change.

var users = new Array();

users[0] = new Array("username1","password1","member.html"); // Change these two entries to valid logins.
users[1] = new Array("username2","password2","");          // Add addtional logins, straight after these, as
                                                           // required, followig the same format. Increment the 
											               // numbers in the square brackets, in new each one. Note:
											               // the 3rd parameter is the the page that user goes to
											               // after successful login. Ensure the paths are correct.
                                                           // Make this "" if user has no personal page.
//----------------------------------------------------------------
//  Login Functions
//----------------------------------------------------------------
function login(username,password){
 var member = null;
 var loggedin = 0;
 var members = users.length;
 for(x=0;x<members && !loggedin; x++){
 if((username==users[x][0])&&(password==users[x][1])){
    loggedin = 1;
    member = x;
	break; // User validated, terminate the for loop.
   }
 } 
 
 if(loggedin==1){
  if(users[member][2] != "") {
   successpage = users[member][2];
  }
  setCookie("login",1);
  if (top.location.href != location.href){
   location.href = successpage;           
  }else{
   top.location.href = successpage;  
  }
 }else{
  alert('access denied');
 }  
}

function logout() {
 deleteCookie("login");
 if (top.location.href != location.href){
  location.href = loginpage;           
 }else{
  top.location.href = loginpage;  
 }
}

//----------------------------------------------------------------
// Cookie Handler
//----------------------------------------------------------------
var ckTemp = document.cookie;

function setCookie(name, value) { 
 if (value != null && value != "")
  document.cookie=name + "=" + escape(value) + ";";
 ckTemp = document.cookie;
 }
 
function deleteCookie(name) {
  if (getCookie(name)) {
    document.cookie = name + "=" +
    "; expires=Thu, 01-Jan-70 00:00:01 GMT";
  }
}

function getCookie(name) { 
 var index = ckTemp.indexOf(name + "=");
 if(index == -1) return null;
  index = ckTemp.indexOf("=", index) + 1;
 var endstr = ckTemp.indexOf(";", index);
 if (endstr == -1) endstr = ckTemp.length;
 return unescape(ckTemp.substring(index, endstr));
 }
  
function checkCookie() {
 var temp = getCookie("login");
 if(!temp==1) {
  alert('access denied'); 
  if(top.location.href != location.href){
   location.href = loginpage;           
  }else{
   top.location.href = loginpage;  
  }
 }
}

//----------------------------------------------------------------
// Login Panel
//----------------------------------------------------------------

function BuildPanel() {
document.write('<form name="logon"><table align="left" border="0"><tr><td align="right">');
document.write('<small><font face="Verdana">Username:</font></small></td>');
document.write('<td><small><font face="Verdana"><input type="text" name="username" size="20"></font></small></td></tr>');
document.write('<tr><td align="right"><small><font face="Verdana">Password:</font></small></td>');
document.write('<td><small><font face="Verdana"><input type="password" name="password" size="20"></font></small></td></tr>');
if(imgSubmit == ""){
 document.write('<tr><td align="center" colspan="2"><p><input type="button" value="Logon" name="Logon" onclick="login(username.value,password.value)">'); 
} else {
 document.write('<tr><td align="center" colspan="2"><p><input type="image" src="'+imgSubmit+'" name="Logon" onclick="login(username.value,password.value);return false">');
}if(imgReset == ""){
 document.write('<input type="reset" value="Reset" name="Reset">');
} else {
 document.write('<input type="image" src="'+imgReset+'" name="Reset" onclick="logon.reset();">');
}
document.write('</p></td></tr></table></form>');
}

The underlined bolded part is where I think the problem might be, but I don't know how to correct it. I've tried removing "return false" but then the script won't even load. Thanks for your time!

TwoD · #2 (**permalink**) 09-26-06, 01:42 PM

First of all, I would NEVER use JavaScript for login pages.
It's simply not meant to do it and this script could be "hacked" by anyone who knows how to view the source.

Back to the problem,
if you still want to use this script, I need to see it with the changes applied.
As it looks now I don't see any problem with it. Did not actually run the code tho.

If you use slashes/backslashes in the strings imgSubmit="" and imgReset="", it might help if you put a backslash (\) in front of all of them to make the script engine interpret it literally instead of as a special character.

SuavyDoodle · #3 (**permalink**) 09-26-06, 02:09 PM

thanks for your reply, the following is the edited script (edits in bold)

Code:

*/

//----------------------------------------------------------------
//  Usernames, Passwords & User Pages - These require configuration.
//----------------------------------------------------------------
var successpage = "index.htm";  // The page users go to after login, if they have no personal page.
var loginpage = "login.htm";  //Change this to the page the login panel is on.

var imgSubmit = "1";  //Change to the path to your login image,if you don't want the standard button, otherwise do not change.
var imgReset = "1";   //Change to the path to your reset image,if you don't want the standard button, otherwise do not change.

var users = new Array();

users[0] = new Array("Test","1111","");  // Change these two entries to valid logins.
users[1] = new Array("username2","password2","");          // Add addtional logins, straight after these, as
                                                           // required, followig the same format. Increment the 
											               // numbers in the square brackets, in new each one. Note:
											               // the 3rd parameter is the the page that user goes to
											               // after successful login. Ensure the paths are correct.
                                                           // Make this "" if user has no personal page.
//----------------------------------------------------------------
//  Login Functions
//----------------------------------------------------------------
function login(username,password){
 var member = null;
 var loggedin = 0;
 var members = users.length;
 for(x=0;x<members && !loggedin; x++){
 if((username==users[x][0])&&(password==users[x][1])){
    loggedin = 1;
    member = x;
	break; // User validated, terminate the for loop.
   }
 } 
 
 if(loggedin==1){
  if(users[member][2] != "") {
   successpage = users[member][2];
  }
  setCookie("login",1);
  if (top.location.href != location.href){
   location.href = successpage;           
  }else{
   top.location.href = successpage;  
  }
 }else{
  alert('Incorrect Login');
 }  
}

function logout() {
 deleteCookie("login");
 if (top.location.href != location.href){
  location.href = loginpage;           
 }else{
  top.location.href = loginpage;  
 }
}

//----------------------------------------------------------------
// Cookie Handler
//----------------------------------------------------------------
var ckTemp = document.cookie;

function setCookie(name, value) { 
 if (value != null && value != "")
  document.cookie=name + "=" + escape(value) + ";";
 ckTemp = document.cookie;
 }
 
function deleteCookie(name) {
  if (getCookie(name)) {
    document.cookie = name + "=" +
    "; expires=Thu, 01-Jan-70 00:00:01 GMT";
  }
}

function getCookie(name) { 
 var index = ckTemp.indexOf(name + "=");
 if(index == -1) return null;
  index = ckTemp.indexOf("=", index) + 1;
 var endstr = ckTemp.indexOf(";", index);
 if (endstr == -1) endstr = ckTemp.length;
 return unescape(ckTemp.substring(index, endstr));
 }
  
function checkCookie() {
 var temp = getCookie("login");
 if(!temp==1) {
  alert('access denied'); 
  if(top.location.href != location.href){
   location.href = loginpage;           
  }else{
   top.location.href = loginpage;  
  }
 }
}

//----------------------------------------------------------------
// Login Panel
//----------------------------------------------------------------

function BuildPanel() {
document.write('<form name="logon"><table align="left" border="0"><tr><td align="right">');
document.write(' <i><b><font face="Palatino Linotype" size="4" color="#003399">Username</font></b></i></td>');document.write('<td><font face="Verdana"><input type="text" name="username" size="20"></font></td></tr>');
document.write('<tr><td align="right"><i><b><font face="Palatino Linotype" size="4" color="#003399">Password</font></b></i></td>');document.write('<td><font face="Verdana"><input type="password" name="password" size="20"></font></td></tr>');
if(imgSubmit == ""){
 document.write('<tr><td align="right" colspan="2"> <p><input type="button" value="Logon" name="Logon" onclick="login(username.value,password.value)">'); 
} else {
 document.write('<tr><td align="right" colspan="2"><input type="image" src="img/login_button.jpg" onclick="login(username.value,password.value);return false"/>');
}
if(imgReset == ""){
 document.write('<input type="reset" value="Reset" name="Reset">');
} else {
 document.write('<input type="image" src="img/clear_button.jpg" name="Reset" onclick="logon.reset();">');}
document.write('</p></td></tr></table></form>');
}

I've tried changing varimage from 1 to img source, but it doesn't make a difference. What's happening is if I follow all his directions, put the protection code on the pages, and then go back to login page to login, type in username and pass, click login, the page refreshes, and remains at login page.

Barnz1986 · #4 (**permalink**) 09-26-06, 03:49 PM

Quote:

Originally Posted by SuavyDoodle

thanks for your reply, the following is the edited script (edits in bold)

Code:

*/

//----------------------------------------------------------------
//  Usernames, Passwords & User Pages - These require configuration.
//----------------------------------------------------------------
var successpage = "index.htm";  // The page users go to after login, if they have no personal page.
var loginpage = "login.htm";  //Change this to the page the login panel is on.

var imgSubmit = "1";  //Change to the path to your login image,if you don't want the standard button, otherwise do not change.
var imgReset = "1";   //Change to the path to your reset image,if you don't want the standard button, otherwise do not change.

var users = new Array();

users[0] = new Array("Test","1111","");  // Change these two entries to valid logins.
users[1] = new Array("username2","password2","");          // Add addtional logins, straight after these, as
                                                           // required, followig the same format. Increment the 
											               // numbers in the square brackets, in new each one. Note:
											               // the 3rd parameter is the the page that user goes to
											               // after successful login. Ensure the paths are correct.
                                                           // Make this "" if user has no personal page.
//----------------------------------------------------------------
//  Login Functions
//----------------------------------------------------------------
function login(username,password){
 var member = null;
 var loggedin = 0;
 var members = users.length;
 for(x=0;x<members && !loggedin; x++){
 if((username==users[x][0])&&(password==users[x][1])){
    loggedin = 1;
    member = x;
	break; // User validated, terminate the for loop.
   }
 } 
 
 if(loggedin==1){
  if(users[member][2] != "") {
   successpage = users[member][2];
  }
  setCookie("login",1);
  if (top.location.href != location.href){
   location.href = successpage;           
  }else{
   top.location.href = successpage;  
  }
 }else{
  alert('Incorrect Login');
 }  
}

function logout() {
 deleteCookie("login");
 if (top.location.href != location.href){
  location.href = loginpage;           
 }else{
  top.location.href = loginpage;  
 }
}

//----------------------------------------------------------------
// Cookie Handler
//----------------------------------------------------------------
var ckTemp = document.cookie;

function setCookie(name, value) { 
 if (value != null && value != "")
  document.cookie=name + "=" + escape(value) + ";";
 ckTemp = document.cookie;
 }
 
function deleteCookie(name) {
  if (getCookie(name)) {
    document.cookie = name + "=" +
    "; expires=Thu, 01-Jan-70 00:00:01 GMT";
  }
}

function getCookie(name) { 
 var index = ckTemp.indexOf(name + "=");
 if(index == -1) return null;
  index = ckTemp.indexOf("=", index) + 1;
 var endstr = ckTemp.indexOf(";", index);
 if (endstr == -1) endstr = ckTemp.length;
 return unescape(ckTemp.substring(index, endstr));
 }
  
function checkCookie() {
 var temp = getCookie("login");
 if(!temp==1) {
  alert('access denied'); 
  if(top.location.href != location.href){
   location.href = loginpage;           
  }else{
   top.location.href = loginpage;  
  }
 }
}

//----------------------------------------------------------------
// Login Panel
//----------------------------------------------------------------

function BuildPanel() {
document.write('<form name="logon"><table align="left" border="0"><tr><td align="right">');
document.write(' <i><b><font face="Palatino Linotype" size="4" color="#003399">Username</font></b></i></td>');document.write('<td><font face="Verdana"><input type="text" name="username" size="20"></font></td></tr>');
document.write('<tr><td align="right"><i><b><font face="Palatino Linotype" size="4" color="#003399">Password</font></b></i></td>');document.write('<td><font face="Verdana"><input type="password" name="password" size="20"></font></td></tr>');
if(imgSubmit == ""){
 document.write('<tr><td align="right" colspan="2"> <p><input type="button" value="Logon" name="Logon" onclick="login(username.value,password.value)">'); 
} else {
 document.write('<tr><td align="right" colspan="2"><input type="image" src="img/login_button.jpg" onclick="login(username.value,password.value);return false"/>');
}
if(imgReset == ""){
 document.write('<input type="reset" value="Reset" name="Reset">');
} else {
 document.write('<input type="image" src="img/clear_button.jpg" name="Reset" onclick="logon.reset();">');}
document.write('</p></td></tr></table></form>');
}

I've tried changing varimage from 1 to img source, but it doesn't make a difference. What's happening is if I follow all his directions, put the protection code on the pages, and then go back to login page to login, type in username and pass, click login, the page refreshes, and remains at login page.

Seriously, Javascript alone is not an option to create a login script. You need to use a Server Side Scripting language. Like PHP for example.

What is the login script for? What does the user access once he / she is logged in?

SuavyDoodle · #5 (**permalink**) 09-26-06, 03:52 PM

i'm working on a mysql/apache/php thing, but for now, this simple script is there to thwart off some people who don't know scripting that well. the script protects some images of a competitive nature, but those who access these images usually don't know how to work their way around a website that well, they probably don't even know to look into source

mab · #6 (**permalink**) 09-26-06, 04:17 PM

My 2 cents -

If we ignore that this does not provide any security and the fact that it is not working anyway, it has the following limitations -

You must edit the .js source file in order to add or change users/passwords. If you choose to disable/ban someone, you must edit the file.

As you add users, the length of this file will grow and it must be sent to the browser with each web page. If you reach 100's of users the size of the file will start to have an impact on the loading time of the web page(s).

It requires javascript to be enabled in order to function at all.

It is an interim step toward a true login/secure system. Don't waste your time trying to get this to work when you can spend the same amount of time getting a server side system working...

SuavyDoodle · #7 (**permalink**) 09-27-06, 12:14 AM

I know you guys hate cookie logins, and I am working towards a more secure login, but for now, if anyone has an idea on how to correct that script, it would be much appreciated. Thanks

mab · #8 (**permalink**) 09-27-06, 01:11 AM

Using a fresh copy from the author's web site, I got it to login. Here are the values I used (everything was in the root directory for quick testing) -

Code:

var successpage = "jslogin2.html";
var loginpage = "jslogin1.html";

var imgSubmit = "crystal_on.jpg";
var imgReset = "crystal_off.jpg";

users[0] = new Array("mab","pwd","");

and (added ;return false near the end, which I believe you already had) -

Code:

  document.write('<tr><td align="center" colspan="2"><p><input type="image" src="'+imgSubmit+'" onclick="login(username.value,password.value);return false">');

It is not the use of a cookie login that is the problem, it is using code where the passwords are visable... There is probably a reason why the company's name is "laugh" land.

SuavyDoodle · #9 (**permalink**) 09-28-06, 10:13 PM

oo thank you! I changed +imgsubmit+ to the img src w/o realizing it was referring to var imgsubmit, thank you!! and there were extra slashes at the end of my old script heh, thanks a lot! i realize it's unsafe, i can download a copy of the js file from my browser ;_; and it has all the pwds inside =/

working on apache and mysql and php though, which i'll probably need more help with heh =)

Login Script v1.9 Problem

Internet Services

Website Development

Tech Hardware