A technique that can be used for executing server-side script from the client side and returning a JavaScript output from the server code is explained here.
Let us take an instance of where this can be used. Many sites have user registration forms where the user is asked to choose a username and password. Obviously this user login has to be unique and so the required validation has to be done to make sure that the user login is not already present in the database. This makes a server round-trip inevitable and hence will need the user to have one extra step in the registration process, where he needs to change his login name.
Trying to bring this on the client side would mean that a JavaScript validation has to be done, but it is definitely not a viable solution, because by just viewing the source code, the user is able to see all existing login names in the database.
We look at this method by which we validate whether a username already exists in the database. Though this method is also not security-proof and leaks out the usernames (we will see how later), this demonstrates a powerful way of utilizing the concept in scenarios where security is not highly important, like an intranet.
Remote JavaScript
Remote JavaScript is basically putting all your JavaScript code in a .js file and using the SRC attribute of the SCRIPT tag to call this file in your HTML page. Again, you may think how does this solve the problem? The .js file needs to pick the user names from the database and if somebody does type the .js file's URL directly, will he still not be able to see all the user logins?
Here is where the server side programming techniques of ASP come into play. For further explanation, let me take a sample form. This form is a HTML page that needs to take a preferred login from the user.
The HTML source code for this file (say login.htm) would be:
<FORM ACTION= "submitlogin.asp" METHOD=POST NAME= "loginform">
<p>Enter preferred user login: <INPUT TYPE= "text" NAME= "userlogin" VALUE= ""><BR>
<P>Enter a password : <INPUT TYPE= "password" NAME= "userpass" VALUE= ""><BR>
<P><INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="SUBMIT">
</FORM>
Now include the following code in the HEAD of the HTML file.
<SCRIPT LANGUAGE="JavaScript" SRC="checkusers.asp">
Look at how the SRC attribute which conventionally refers to a .js file, is referring to a .asp file. Let us now take a look at this approach. The HTML file would expect checkusers.asp to be a file that contains JavaScript in the application/x-javascript MIME encoding. Our mission now would be to make checkusers.asp give the HTML file what it expects.
Let's dive straight into checkusers.asp. First of all, I use the Response.ContentType property to set the response MIME type to application/x-javascript.
<%
Response.ContentType = "application/x-javascript"
%>
Now I have to begin building the JavaScript. The JavaScript in this file is basically going to contain an array of the user login names, and a function to take in the new user login as a parameter and check it with the existing login names array.
<%
' Make the database connection
Set DBConn = Server.CreateObject("ADODB.Connection")
DBConn.Open "mydsn", "myuser", "mypass"
' Get all the user login names
Set RSUsers = "select userlogin from LoginMaster"
' Create the JS Array
Response.Write "var userArray = new Array();"
' Make an ASP counter
Counter = 0
' If not EOF, then loop the recordset till EOF
If Not RSUsers.EOF Then
While Not RSUsers.EOF
' create the array elements
Response.Write "userArray[" & Counter & "] = " & RSUsers(0)
RSUsers.MoveNext
Wend
End If
' Write the JS Function that will do the actual validation
Response.Write "function validateUser(newUserLogin)"
Response.Write "{"
Response.Write "userExists = false;"
Response.Write "for(i=0;i<userArray.length();i++)"
Response.Write "{"
Response.Write "if(userArray[i] == newUserLogin) userExists = true;"
Response.Write "}"
Response.Write "return userExists;"
Response.Write "}"
%>
So now when the SRC attribute calls this ASP file, it is fooled into believing that it is a JavaScript file because of the MIME type and because it contains valid JavaScript syntax. But this file is actually dynamically getting the user logins from the database and creating the array. It also encapsulates the function that checks the validity of the user.
All we now need to do is go back to our HTML file and make sure that this function is called when the form is submitted. To enable this our FORM tag is modified as below:
<FORM ACTION= "submitlogin.asp" METHOD=POST NAME= "loginform" onSubmit="return validateForm()">
And we need to now add the JavaScript code for validateForm in the main HTML page.
<SCRIPT LANGUAGE="JavaScript">
function validateForm()
{
if(!validateUser(document.loginform.userlogin.value))
{
alert("This login name already exists in our database. Please choose a different login name.");
document.loginform.userlogin.focus();
return false;
}
}
</SCRIPT>
The code is almost self-explanatory. If validateUser method of the remote JavaScript file returns false for this user login, then it means that the user name already exists and hence the user is alerted that this login already exists in the database.
Security Risk
This method however brings the .js file into the Temporary Internet Files (or browser cache) and places the file there. Any user who opens the folder physically can still see the list of users in the site. Hence, the method is to be cautiously used where security is not a major issue.
Pandurang Nayak is a web developer working in 3rdAgenda (http://www.3rdagenda.com), India. He is involved in development of Web based technologies like ASP, COM, ActiveX, DHTML, XML and WAP for the past two years.
