CAPTCHA with ASP.NET

Consider the Yahoo sign-up form for example. At the end of the sequence would be a rather dirty-looking image with a (quite difficult to read) set of alphabets and numbers scribbled across it. The helpful text next to it curtly asks you to read the sequence and enter it in the box alongside. If you don't comply, the form will not be processed. This is to protect it against web bots that might perform (multiple) automated submissions. This is a very common way of protection now. The logic is that only humans who can "see" the picture can read it and enter the value into a designated field on the form before it will be successfully processed. Traditionally CGI programs or libraries created in C had to be roped in to create these images dynamically, or a huge database of files and their contents had to be hosted somewhere. This technology for verifying that the entity at the remote end is a human, is called "CAPTCHA" and may involve sounds, text or images.

With the arrival of .NET, this can be done on the fly and in about 10 lines of code. We need to create two files at the minimum-the one that will display the picture (with the "secure" form) and the other that creates and sends the picture. 

Implementation

You can use VS.NET or WebMatrix (distributed on the August 2003 PCQuest CD-ROM) to create these files. We are using WebMatrix here to do this. In either program, add two new WebForm files (VB.NET) and name the form file as "Form.aspx" and the image creator as "Image.aspx". The full source code for both the files are provided on the CDROM (/system/cdrom/Devlabs/*.aspx). Copy these files to your ASP.NET Web server and run it from there as http://localhost/form.aspx (or whatever URL you get for this). What we shall do is place an ordinary HTML tag; only its SRC attribute would point to our second ASPX file. Your web browser wouldn't care about the file-type used in the SRC, as long as it can read and display it. This IMG tag would look like:

Image.aspx uses a session variable in the code to indicate to the form processor what the value on the picture is. Also, in this second file, we would test if there should be another picture generated (if there is an error like a session time out). If not, we simply re-encode the value from the session variable and send it again. What we do here is generate a set of five random alphanumerals (alphabets and or numbers), save it to a binary stream, make it into a GIF and send it to the browser. The primary workhorse of this image creator is this bit:

objGraphic.DrawString(valueString,new Font("Verdana", 12) , 

new SolidBrush(Color.FromName("White")), 0, 0)

Dim mStrm As New MemoryStream()

objBitmap.Save(mStrm, ImageFormat.Gif)

The "DrawString" line draws the text onto a GDI object, making it a picture. The last line (Save) saves the GDI image to a binary memory stream. Note that we are not saving it into a disk file as we don't need a disk file for this process, though you can do that by creating a FileStream object and saving it into that instead.

To do

We have explained the procedure to to create the text image. Sophisticated bots also include image-decoding logic. To spoof them, we need to distort the displayed image so that only humans can decipher its contents - this logic has not been implemented in this sample. Further, you will need to create a waterproof logic that expires the picture after a period of inactivity. Also, you need to remove the session-stored value on the picture, so that further accesses to it will show a different picture. Sometimes, differences between characters (like ‘0’ and ‘o’) is so slight that the user may not correctly decode the image. Therefore, some CAPTCHA implementations provided options to use a different picture (value).

Sujay V Sarma