Word Verification: How to have one for your site

[Vaughn]

Word Verification: How to have one for your site

Introduction
You must have come across several sites where user authentication is required to differentiate robots from humans. The most popular technique used on the internet these days is the word verification. In this article I'll demonstrate in ASP how you can have one for your own site.

The basic principle this technique operates upon is very simple, generate a random string (maybe get one from a dictionary), distort it visually and display it in a manner that robots can't understand. We're going to do exactly the same except we have one problem; ASP does not have any basic image manipulation capabilities. So how are we going to accomplish this? We'll have to take help of an imaging component. There are lots of commercial components available on the internet that can do this for us and much more, but we are going to use a free component called DynImage written by Chris Ashton (Thanks Chris. This component also has many features and it will get our job done.

We already have this component installed on all our windows servers.

This is a bit lengthy tutorial, thus, I have divided it into the below seven sections:

1. Hello World.
2. Drawing the text.
3. Creating the form.
4. Specifying the string.
5. Validating user's input.
6. Randomizing the string.
7. Obfuscating the string.

So let's begin

[Vaughn]

1) Hello World

First of all let's test this component with a simple hello world test. Create an ASP page called HelloWorld.asp and write the below code in it:

%@Language=VBScript%
Set oDynImage = CreateObjectDynImage.DynImage

oDynImage.Open 150, 50
oDynImage.FontSize = 24
oDynImage.TextOut 20, 10, Hello World

Response.ContentType = image/png
Response.BinaryWrite oDynImage.Image
oDynImage.Close

Set oDynImage = Nothing

Looks good, let's go through the code.

Set oDynImage = CreateObjectDynImage.DynImage

Create the object.

oDynImage.Open 150, 50

Create a blank image of size 150 by 50

oDynImage.FontSize = 24

Set the size of the font to 24 points

oDynImage.TextOut 20, 10, Hello World

Render our text.

Response.ContentType = image/png

Set the ContentType to a png image

Response.BinaryWrite oDynImage.Image

Render the Image.

oDynImage.Close

Close the object.

Set oDynImage = Nothing

Release memory.

Note: If you have noticed, I have not generated any HTML tags in the above example. This is because the output of the above code is a png image.

Now that we have a fair idea of how this component works, let's start working on our main concept. To begin with, we will create a form that will draw the image, ask the user to enter the string and then validate it.

[Vaughn]

2) Drawing the text

We will be using similar code as I mentioned in the example, except, the method will be slightly different. For ease of use, we will separate the form processing code and image generation code in two separate files. We will create an ASP file to generate the image and then insert that image into our form at run time. The code to generate the image is as below, save it in a file called genImage.asp:

%@Language=VBScript%
%
Dim strWord
Dim intImageWidth
Dim intImageHeight
Dim oDynImage

strWord = 12345
intImageWidth = 300
intImageHeight = 150

Set oDynImage = CreateObjectDynImage.DynImage
With oDynImage
.Open intImageWidth, intImageHeight

.FontFace = Arial
.FontWeight = 800
.FontSize = 48
.TextAlign = 5
.TextOut intImageWidth/2, intImageHeight/2, strWord

Response.ContentType = image/png
Response.BinaryWrite .Image

.Close
End With
Set oDynImage = Nothing

The code is quite similar to what we saw earlier with a few additions. I've set the font face, weight size and alignment properties. For now it just draws the string 12345 in the exact center of the image. We'll replace it a string of our choice later. When browsed it will display the below image:

[Vaughn]

3) Creating the form.

Time to create the form We will create a simple form that collects the string from the user and submits it back to the same page. Create a page called default.asp (as in future, we want this page to be the default page of this directory) and insert the below code in it:

%@Language=VBScript%
% Option Explicit

DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional// 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 /
titleWord Verification/title
</head>

<body>
<form id=frmWord name=frmWord method=post action=default.asp>
<Enter the text in the image above.>
<input name=txtWord type=text/>
<br />
<br />
input type=submit name=Submit value=Submit
<form/>
<body/>
<html/>

Quite simple code, nothing unusual here. Try entering some string and submitting the form. You will be returned to the same page.

Now we will insert the image generated by our genImage.asp in this form. Add the below code right after the <body> tag.

%
("<Response.Writeimg src= & ChrgenImage.asp & Chr & />")
<br />
<br />

As you can see we are using the ASP page as the image itself. But will it work? Save the file and find out for yourself.

[Vaughn]

4) Specifying the string

Up till now the genImage.asp page has been drawing the string 12345 as it was hard-coded. Now, we will tell it what string to draw via our form using a QueryString parameter, so that we can validate it with the user's input later.

i) Add the below code after the <% Option Explicit %> statement:

<%
Dim strWord

strWord = "Hello!"
%>

ii) Modify our Response.Write statement which inserts the image, as below and save the page:

Response.Write("<img src=" & Chr(34) & "genImage.asp?String=" & strWord & Chr(34) & "/>")

If you submit or refresh the form, there will be no change in way the form behaves, simply because we have not modified the genImage.asp to draw the string which it has been passed.

iii) Open genImage.asp and replace the below line:

strWord = "12345"

with the below two:

strWord = Request.QueryString("String")
If Len(Trim(strWord)) = 0 Then strWord = "?????"

Save the page and refresh your form, you should see the new string now.

[Vaughn]

5) Validating users input.

Now that our user can see our string let's validate his/her input. Open the 'default.asp' file.

1) Add the below variable declaration:

Dim strResult

ii) Add the below code right after the strWord = "Hello!" statement:

If Request.ServerVariables("REQUEST_METHOD") = "POST" Then
If strWord = Trim(CStr(Request.Form("txtWord"))) Then
strResult = "Yes"
Else
strResult = "No"
End If
End If
Session("Word") = strWord

iv) And add the below code after the </form> tag.

<h4>Word Verified? <%=strResult%></h4>

Save the form and test it. If you enter the string Hello! you will see Yes after Word Verified?, No otherwise.

[Vaughn]

6) Randomizing the string

Now that we are done validating the input, let's randomize our string. As I mentioned earlier on, you can either get words from a dictionary or make a random string. We'll be using a random string generator. I found a very good function on the internet to accomplish this, some time ago. We'll save this function in a ASP file and then include it in the pages where we want to call this function.

Create a new ASP file called Functions.asp, paste the below in it and save it. The full code listing is as below:

<%
Function RndStringGen&#40;str_lenght, str_whatcase, str_numberbias&#41; &#39;define function and passed parameters
'What Case
'0=All lower case
'1=All Upper case
'2=Random Mixure

Dim str_counter
Dim str_chracters
Dim str_chracters_final

'Check validity of passed parameters
If Len(str_lenght) = 0 Or IsNumeric(str_lenght) = False Then str_lenght = 10 End If
str_lenght = CLng(str_lenght)
If str_lenght < 1 Or str_lenght > 1000 Then str_lenght = 10 End If
If Len(str_numberbias) = 0 Or IsNumeric(str_numberbias) = False Then str_numberbias = 5 End If
str_numberbias = CSng(str_numberbias)
If str_numberbias < 0 Or str_numberbias > 10 Then str_numberbias = 5 End If
str_numberbias = str_numberbias / 10 &#39;make to value below 1 so it is of the same magnatude as the random string

'create string using a Do Loop
str_counter = 0

Do Until str_counter = str_lenght
Randomize
If rnd < str_numberbias Then 'work out which statement to do
Randomize
str_chracters = str_chracters & Chr((((57 - 48) * rnd) + 48)) 'numeric characters
Else
Randomize
str_chracters = str_chracters & Chr((((122 - 97&) * rnd) + 970)) 'alpha characters
End If

str_counter = CInt(str_counter) + 1
Loop

'-------------------------------------------------

If str_whatcase = 1 Then 'make all alpha characters upper case
str_chracters_final = UCase(str_chracters)
ElseIf str_whatcase = 2 Then 'random chance of upper case / lower case
For i = 1 to Len(str_chracters)
j = Mid(str_chracters, i, 1) 'next character in the string
Randomize
If rnd < 0.5 Then '50% change of being each case - ignored if not alpha
j = UCase(j)
Else
j = LCase(j)
End If
str_chracters_mixed = str_chracters_mixed & j 'add the character to the string
Next
str_chracters_final = str_chracters_mixed
Else 'default action - Lower case
str_chracters_final = LCase(str_chracters)
End If

RndStringGen = str_chracters_final
End Function
>

Now, we'll call this function in our form.

i) Add the below line, right after the <% Option Explicit %> statement:

<!-- #include file = "Functions.asp" -->

ii) Replace the statement strWord = "Hello!" with the below one:

strWord = Session("Word")

iii) Add the below two line, right after your 'End If' block.

strWord = RndStringGen(5, 1, 0);

Now, each time the form will be refreshed, a random string will be generated. Save the form and test it.

[Vaughn]

7) Obfuscating the string.

We're almost there. Now that most of the important stuff is taken care of, we can add some code to obfuscate our text. For this, we'll simply draw each character at an alternate angle and then draw a few random lines on our text; that ought to confuse the robots.

Up till now, we were using a single TextOut statement to draw our text. But now as we need to draw each character at a separate angle, we will need one TextOut statement for a character each. We'll add a simple

[Manuel_]

Hi,

Check the User validation section:

If Request.ServerVariables("REQUEST_METHOD") = "POST" Then
If strWord = Trim(CStr(Request.Form("txtWord"))) Then
strResult = "Yes"
Else
strResult = "No"
End If
End If
Session("Word") = strWord[/b]

in that section you will have strResult = yes, (String is verified) instead of you can write code or function to load a new page.