Filters and Login Systems for Web Application Security

In this article we will be building our application, using the concepts discussed in the previous articles. Any web site that is selective in the kind of users that it wants to grant access to will need some method of filtering. This filtering is usually done through a login system. This (and more) is what we will be building. This article is the third part of an eight-part series.

The application

The application will consists of the following files:

  • login.php – This script will be responsible for authenticating users.
  • logout.php – This script will log users out of the system.
  • passman.php – This script will be responsible for managing passwords.
  • register.php – This script will be responsible for registering new users.
  • fns.php – This script contains all the functions that will be used by the site.
  • config.inc – This script contains connection details.
  • was.css – This script contains the styles for the site.
  • was.dwt.php – This script is a template.

The template for the site is actually very simple. It has the following HTML:


<!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=iso-8859-1" />

<!– TemplateBeginEditable name="doctitle" –>

<title>Untitled Document</title>

<!– TemplateEndEditable –>

<!– TemplateBeginEditable name="head" –>

<!– TemplateEndEditable –>

<link href="was.css" rel="stylesheet" type="text/css" />

</head>


<body>

<table width="99%" border="1">

<tr>

<td bgcolor="#333333" class="header">Web Secure</td>

</tr>

 

 

<tr>

<td><!– TemplateBeginEditable name="main" –>main<!– TemplateEndEditable –></td>

</tr>

<tr>

<td class="copy">&copy;2008</td>

</tr>

</table>

</body>

</html>


And the following look:



The Cascading Style Sheet is even simpler. It has the following code:


body,html {

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

}

.header{

text-align:center;

font-size:24px;

color:#FFFFFF;

font-weight:100;

}

.copy{

font-size:9px;

text-align:right;

}

.list{


font-size:11px;

}

.listtop{


border-bottom:1px;

border-bottom-color:#000000;

border-bottom-style:solid;

font-weight:bold;

background-color:#CCCCFF;}

.temptitle {

font-size: 24px; font-weight: normal; color: #ffffff;

background-color:#003366;

text-align:center;

 

}

#myimg{

margin-right:60px;

margin-left:600px;

}

 

#mytxt{

text-align:left;

position:absolute;

left: 237px;

top: 39px;

height: 27px;

font-size:24px;

color:#FFFFFF;

background-color:#003366;

 

 

}

The CSS simply defines a few styles that are used by the PHP scripts.

{mospagebreak title=Definition and Storage File}

The file that defines and stores the functions has the following content:


<?

function userexist($username){

include(‘../config.inc’);

$result=mysql_query("Select uname from users where uname=’$username’") or die(mysql_error());

if(mysql_num_rows($result)>0)

 

return true;//username exist

else

return false;//username not in db

}

The first function, called userexist, is responsible for finding out whether a particular username already exists in the database. This function is used when a new user registers for our site or during the authentication process. The function takes only one argument. It returns a value of true or false.

function sendpass($user){

include("../config.inc");

$result =mysql_query("select pw from users where uname=’$user’") or die(mysql_error());

if(mysql_num_rows($result)>0)

return true;//password exist

else

return false;//password not in db

}

The sendpass()function is used to determine whether the user password exists or matches a password that is stored in the database. The function takes only one argument. It returns a value of true or false.

function filledin($form_vars){

foreach($form_vars as $key=> $value)

{

if(!isset($key) || ($value == ”))

return false;

}

return true;

}

This is a handy function that checks to see if all the form variables have a value when submitted. It basically loops through all the form values and returns false if it is empty and true if it is not.

function changepw($name){

$query="select pw from users where uname=’$name’" or die(mysql_error());

$result= mysql_query($query);


if(mysql_num_rows($result)>0){

for ($i=0; $i<mysql_num_rows($result); $i++) {

$row = mysql_fetch_assoc($result);


$pass=$row['pw'];

echo ‘

<center><form name="form1" method="post" action="forgotten.php">';

echo ‘Please fill in the following:<br>';

 

echo ‘ <table width="445" border="0">';

echo ‘ <tr>

<td width="187"><div align="left">Old Password</div></td>

<td width="242"><input name="oldpass" type="text" size="40" value="’.$pass.’"></td>

</tr>

<tr>

<td><div align="left">New Password </div></td>

<td><input name="newpass" type="text" size="40"></td>

</tr>';

 

echo ‘</table>';

echo ‘<br>

<input name="submit" type="submit" value="Save">';

echo ‘</form>';


}

}

}

The changepw() function is responsible for enabling a user to change his or her password. The function presents the user with a form that takes two passwords, the old one and the new one. The new password is then submitted to a script called forgotten and processed there.

function update($newpass,$uname){

if(isset($_POST['submit'])){

//1. Check fields are filled in

if (!filledin($form_vars)){

echo "Please ensure that you have filled in ALL fields.";

exit;

}else{

$newpass=$_POST['newpass'];



}


include "config.inc";

$query="Update users SET pw=’$newpass’ Where uname=$uname Limit 1 ";

$result=mysql_query($query);

if(mysql_affected_rows()==1){

echo "Record number <b>$id</b> has been updated";

}else{

echo "Could not update record number <b>$id</b> because " .mysql_error() . "";

}

}

}

?>

The update function does exactly what the name suggests. It updates the user details. This function is used together with an HTML form that presents the user with her login details, such as name, surname and password etc. The user then changes the details to what they want and then submits the form.

{mospagebreak title=The Login page}

The login page is the main entrance to our site. Any user that wants to use our site needs to be authenticated by this script. We want only users that have registered to be allowed in, so we filter out those that are not registered through this script.

<?

session_start();

//someone registered?

if(isset($_GET['reg'])){

$reg="Your details have been added, please login";

}

$error=false;

$errmsg="";


//has form been submitted

if(isset($_POST['key'])){

//check that the username and password is not empty

if( empty($_POST['uname']) && (empty($_POST['upass']))){

print "Please enter your username and password.";

$errmsg="Please enter your username and password.";

$error=true;

}

//check that the username and password is string

if( is_numeric($_POST['uname']) && (is_numeric($_POST['upass']))){

print "Please enter a valid username and password.";

$errmsg=" Please enter a valid username and password.";

$error=true;

}

//if no error then start authentication process

if(!$error){


//transfer to shorter var

$n=$_POST['uname'];

$p=$_POST['upass'];


//if no error then start authentication process


//connect to db

include(‘../config.inc’);

//clean using mysql cleaner

$cleanuname=mysql_real_escape_string($n);

$cleanupass=mysql_real_escape_string($p);

$query="select uname,pw from users where uname=’$cleanuname’ and pw=’$cleanupass’ ";

$result=mysql_query($query);


$num=mysql_num_rows($result);

if($num>0 ){


//put in session vars

session_start();

$mytime=time();

$mytime=date("H:i:s A",$mytime);

$_SESSION['time'] = $mytime;

$_SESSION['status'] = ‘logged';

$_SESSION['username'] = $cleanuname;

//goto next page

header("location:welcome.php");

exit;

}

}else{

$_SESSION['status'] = ‘not logged';

$errmsg="Your username ($n) and password do not match, please try again.";

}

}

?>


<!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"><!– InstanceBegin template="/primary/Templates/was.dwt.php" codeOutsideHTMLIsLocked="false" –>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!– InstanceBeginEditable name="doctitle" –>

<title>WebSecure::Login</title>

<!– InstanceEndEditable –>

<!– InstanceBeginEditable name="head" –>

<!– InstanceEndEditable –>

<link href="Templates/was.css" rel="stylesheet" type="text/css" />


<script language="javascript" type="text/javascript">

function checkform(pform1){

if(pform1.uname.value==""){

alert("Please enter a username")

pform1.uname.focus()

return false

}


if(pform1.pw.value==""){

alert("Please enter a password")

pform1.pw.focus()

return false

}


if(pform1.pw.value=="" && pform1.uname.value==""){

alert("Please make sure that you have entered your username and password")

return false

}

return true

}

</script>

</head>


<body>

<table width="99%" border="1">

<tr>

<td bgcolor="#333333" class="header">Web Secure</td>

</tr>

 

 

<tr>

<td><!– InstanceBeginEditable name="main" –>

<form name="form1" onSubmit="return checkform(this)" method="post" action="">

<table width="41%" border="0" align="center" cellpadding="0" cellspacing="3">

<tr class="listtop">

<td colspan="3">Login Status:<? if(isset($msg)){

echo "$msg";

}elseif(isset($reg)){

echo "$reg";

}?></td>

</tr>

<tr>

<td width="9%">Username</td>

<td width="41%"><input name="uname" type="text" id="uname" size="50"></td>

<td width="50%" rowspan="4">&nbsp;</td>

</tr>

<tr>

<td>Password</td>

<td><input name="upass" type="text" id="upass" size="50">

<input type="hidden" name="key" /></td>

</tr>

<tr>

<td>&nbsp;</td>

<td><a href="../password.php">Forgotten your password?</a>|<a href="register.php">Register</a></td>

</tr>

<tr>

<td>&nbsp;</td>

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

</tr>

</table>

</form>

<!– InstanceEndEditable –></td>

</tr>

<tr>

<td class="copy">&copy;2008</td>

</tr>

</table>

</body>

<!– InstanceEnd –></html>

{mospagebreak title=The code}

The login script has two methods of validating form data. The first is the JavaScript code that ensures that the user fills in all the data that is required. Then a secondary level of validation is added. This time, PHP does its own checking. and only then will this data be passed to the application.

JavaScript in itself is not a true security measure, but rather a convenience and also an extra layer of security. This is because JavaScript is a client-side technology (as opposed to PHP, which is server side). It saves the user the hassle of having to submit the form to the server, having it checked by PHP and then sent back if errors occur. What happens instead is that JavaScript checks the form data locally and if the checks are okay, it then sends the information to PHP. There is a small price for this convenience; the PHP file becomes a bit larger in size.

So why do we need PHP to check the form data if JavaScript does it in the first place? Because, as I’ve already stated, JavaScript is not a security measure in itself, for the simple reason that it can easily be turned off, rendering the code completely useless. The JavaScript code in our form primarily checks to see if the username and password fields in the form are filled in. If so, the data is sent to the PHP script; otherwise, a message box is displayed, alerting the user to the error:


if(pform1.pw.value=="" && pform1.uname.value==""){

alert("Please make sure that you have entered your username and password")

return false

}

In the code above, the pform1 refers to the form name and the pw refers to the form field name. The same applies to the uname.value line. The alert message is what the user will see if the form fields are empty.

In the next article we will continue to explore the login page and also discuss the benefits of authentication from a security point of view.

[gp-comments width="770" linklove="off" ]

chat