[ articles_application_development ]
Validating Forms With JavaScript
Dragos Mincinoiu
Contributing Writer
2002-05-30
 SecurityProNews RSS Feed
JavaScript is not a true security measure, but rather an added level of security and convenience for your users. Because JavaScript is a client-side technology (whereas PHP is server-side), incorporating it into your web pages can save users the hassle of having to submit a form to the Web server, have it checked by PHP, and then have the data sent back when there are errors. Instead, you can use JavaScript to immediately run through some tests and then, if the data passes, send the form information along to PHP. However, JavaScript does this of the cost of a larger file size for the user to initially download.
Remember also that JavaScript can be easily turned off in a user browser setting, rendering its security completely useless. It is critical that you view JavaScript in this light and continue to use PHP as your primary security measure.
Your script should be placed within the head section of your HTML. The following script will validate the user name:
<script type="text/javascript"language="Javascript">
function validate {
if (document.form.usename.value.length <=0)
{
alert("Enter
a username.");
document.form.username.value = "Username";
document.form.username.focus();
var authenticate = true;
if (authenticate == true) {
return false;
}
else { return true;
}
}
This function will not allow an empty value for the input. The statement document.form.username.value.length refers to the length of the value for the username.
A simple modification to this function will not allow the user to just enter the displayed value "Username," but will instead require a different value with a length greater than zero:
function
validate {
if( (document.form.usename.value.length <=0) ||
(document.form.usename.value.value == "Username")
{
alert("Enter a username.");
document.form.username.value = "Username";
document.form.username.focus();
var authenticate = true;
if (authenticate == true) {
return false;
}
else { return true;
}
}
The other inputs, like first name, last name, and email address, can be validated in a similar fashion. For password verification on a registration form, we will use two input textboxes. The names of the two will be pass1 and pass2, respectively. Because the password input type will not allow a value to be set, the "if block" will only set the Boolean authenticate:
if(document.form.pass1.value
!= document.form.pass2.value )
{
alert("Your password
does not match");
var authenticate true;
}
Your form should be modified; the form will have a name and will include the event for our validate() function:
<form name="form" action="validate.php" method="post"
onsubmit="return validate()">
If the user is asked to enter personal information like the birth date, which includes month, day, and year, you could use pull-down menus to get the input. Remember that Netscape Navigator and Internet Explorer differ in the way they treat option menus.
if ((document.form.birth_month.value == 0) || (document.form.birth_month.selectedIndex
== 0))
{
alert("Please select
your month of birth.");
var problem = true;
}
The document.form.birth_month.value will work for IE, but for Netscape you will have to use the document.form.birth_month.selectedIndex statement. As long as one of the statements is true, the "if statement" will evaluate to true.
Unlike PHP, which is browser independent, JavaScript operates differently on various web browsers. You will need to write code that is cross-browser compatible.
HTTP Authentication
HTTP authentication is currently available only in the module version running with the Apache web server. It requires users to enter a username and password in a pop-up window to gain access. It is easier to establish and more strict than the registration system.
There is very little code required, and the username and the password is remembered without sending cookies or establishes sessions. One of the downsides is the inability to set an expiration date.
First, you need to see if the user has logged in or is coming from a log-in page:
if ( (!isset($PHP_AUTH_USER))
OR ($login_page AND !strcmp($existing_username,
$PHP_AUTH_USER)) )
If $PHP_AUTH_USER does not have a value or the user
is not coming from the login page display the authentication window.
Header("WWW-Authenticate: Basic realm="My
Site"");
Header("HTTP/1.0 401 Unauthorized");
echo "Please enter a
valid username and password!<P>Reload the page
to try again!";
// If the user hit Cancel exit.
exit;
The first header line creates the pop-up window with the realm set to My Site. The second header line and the echo statement will take effect if the user hits the Cancel button in the pop-up window.
}
else {
Now the user should enter a proper user name and a password to be able to access.
if (($PHP_AUTH_USER
== "daminci") and ($PHP_AUTH_PW
== "pi2po")) {
The user should be send to the index page if he or she entered the proper information.
if (!strstr($PHP_SELF,
"login.php")) {
// If they weren't on the log-in page, take them there.
header ("Location: login.php");
exit;
}
}
}
?>
Authenticating with HTML, JavaScript, and PHP protects the password by encrypting it, but the user’s personal data are stored unencrypted in a readable text file. You could use the crypt() function to encrypt this information before storing it, then decrypt the information before reading it. To do this, you can use Mcrypt. Mcrypt is a security application that can enable you can enable you to use PHP’s built-in Mcrypt functions to encode and decode data.
Security is a major concern for all web sites designers. It begins at the operating system and ends with the user interface. If the information the user enters is tainted, you have a major problem in your hands. Security problems can lead to loss of data or bring your system to a crashing halt.
About the Author:
Dragos Mincinoiu is a staff writer for iEntry.
More articles_application_development Articles
SecurityProNews RSS Feed
|
|
RSS
Archive
Contact Us
Advertise
