Introduction

AntiAuto is a set of controls that can be used on an ASP.NET Web Form to prevent
automatic registrations from 'bots. It was something mentioned in the Lounge
fairly recently and I thought it would be a good example for ASP.NET's superior
application architecture.

Many sites require users to register before they're given full access. For
example, Hotmail.com requires you to enter a few basic details to provide you
with an email address. However, this type of service is open to abuse - the
automatic generation of many email addresses to be used for sending spam by
a piece of software that automatically completes the registration process generating
random user names etc.

To prevent this type of abuse many sites require users to enter a code that
is displayed in a picture -- thus forcing the person to enter the registration
details.

The aim is to produce a set of ASP.NET control's that can be easily deployed,
and will fit in around an existing registration procedure.

Solution Overview

To give an overview to the classes within the project, here's a quick UML class
diagram.

The important classes being CodeImage and CodeImageValidator.
Util is a supportive class, and provides the encryption and decryption
functionality needed by various other parts.

CodeImage

The purpose of this class is to produce the HTML on the web form that will
display the image. The image itself is generated by the DrawImage.aspx
file, which in turn uses the PictureGenerator class.

CodeImageValidator

This is a BaseValidator derived class that verifies that the contents
of the associated text box (ControlToValidate) matches what has
been drawn within the CodeImage control (CodeImageControl).

How they work together

When a page is first loaded a random number is generated, this is then passed
as part of a query string to the DrawImage.aspx page. This number
is retained in ViewState throughout any postbacks that occur. During a postback
the validation control (CodeImageValidator) is used to ensure that
the form can be validated successfully.

Implementation Details

CodeImage

CodeImage is implemented in the CodeImage.cs file.
The purpose of the control is to output the necessary HTML code to draw the
image. For example, if the DrawImage.aspx page were to draw the
picture the HTML output would look like:

It's extremely simple code, loading a couple of configuration settings in the
Constructor. These are used across the various controls and pages, so using
the web.config configuration file is the best way of doing it.

The Render method is overridden to write out the HTML code, the security code
to be displayed in the picture comes from the Code property. Because
the HTML code will be visible to users its necessary to encrypt the number before
putting it into the QueryString, so instead of using code=12345
it would be code=jA89AlxmmA etc. This encryption is performed by the
EncryptString method within the Util class. The code
is then decrypted by the PictureGenerator class when its asked
to render the image.

It's also important to note that the encrypted security code is UrlEncode'd
first, ensuring that any invalid characters can be made safe before being placed
into the QueryString. Again, these are then UrlDecode'd
the other side (within DrawImage.aspx).

The OnLoad event is used to generate a random number if the page
is being loaded for the first time (i.e. not within a Post Back). Once a security
code has been generated it is stored in the Code property, which
in turn stores it in the ViewState (thus allowing the contents to be persisted
across postbacks).

The CodeImage control is to be put directly into an ASP.NET Web
Form, and the code to do that is included later in the article.

CodeImageValidator

This class is implemented in the CodeImageValidator.cs file, and
is used to check that the contents of the associated text box match the code
generated by the CodeImage control.

Again, the code is relatively simple so here's the entire class implementation
before the discussion:

CodeImageValidator is derived from BaseValidator
and so is expected to behave as any other Validation Control would. It needs
to override the EvaluateIsValid method that will be called when
the form is submitted.

The ControlPropertiesValid method is used to obtain references
to the controls that are used during validation -- the TextBox
and the CodeImage controls. These references are then maintained
in the ctrl and imageControl fields. Two properties
of the CodeImageValidator control are used to set these in the
ASPX page, ControlToValidate and CodeImageControl.

The CodeImage Control has a property (Code) that
contains the encrypted security code that is to be entered into the text box.
This is then decrypted in the EvaluateIsValid method and compared
to the text box's contents. If they match then the validation will have succeeded
and the method can return true.

DrawImage.aspx

The DrawImage page is used to produce the JPEG stream to send to the browser
and uses the PictureGenerator class. The code to the DrawImage
page is as follows:

First the ContentType is set to image/jpeg (ensuring that the
browser renders the contents as an image, as opposed to an HTML page or any
other type). The OutputPicture method is called, passing a reference
to the current page and the encrypted security code to be rendered.

The code is based on Nick Parker's "Web
Graphics On The Fly in ASP.NET" article here at CodeProject. It loads
the configuration settings and then renders the image, decrypting the security
code first. The security code is taken from DrawImage.aspx's QueryString
and was encrypted by the CodeImage control to prevent visitors
determining the security code outside of the rendered picture.

How to use it

The demo application includes a ready-to-deploy sample, but there are a couple
of things that would have to be done to an existing ASP.NET Web Form:

Copy the AntiAuto assembly to the application's /bin directory
Copy the web.config configuration file to the application's root
Copy DrawImage.aspx to the same directory containing the Web Form

It's important that the ControlToValidate and CodeImageControl
are set to the Id's you gave to the TextBox and CodeImage
Controls.

Conclusion

The controls are very simple and demonstrate how glorious ASP.NET's new architecture
is. I hope people find it useful, and improve it. Apologies for not including
many (if any) comments within the code, but since this article covers how it
all works together it should be relatively to understand. As I revisit the solution
I'll neaten things up a bit, one thing I would definitely like to do is produce
a single control so that deployment is made even easier.

Please feel free to post a message below or email me if you have any questions
or comments.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

Share

About the Author

I graduated with a first class BSc honours degree in a Computer Science/Management Science hybrid from Loughborough University. I live in London and currently work as a .NET Developer in central London.

The problem is that when the encoded base64 string has a '+' in it, it will be encoded fine, but then at the receiving end, UrlDecode will turn in back into a BLANK instead of a '+'. This will create a base64 string that will fail when decoded.
The solution is to use 'HtmlDecode' instead of 'UrlDecode' at the receiving end, in the aspx file that displays the captcha image.

The problem is that Request.QueryString[...] calls UrlDecode for you. This turns the %2d back into a + character.

But then you call UrlDecode on that string again, which turns the + into a ' ' (a space). This is expected -- a space character UrlEncodes to a + character, so any + characters in the input to UrlDecode should turn back into spaces.

It's not exactly a bug in ASP.net, it's due to a lack of documentation (the docs for QueryString say nothing about whether UrlDecode is called) and an HttpUtility.UrlDecode call that shouldn't be there in the sample code for this article.

I enjoyed this article. 1 thought. I like using both .net and java. I know that people go on with Java is better than .Net or .Net is better than Java. This article is not really an endorsement of the .Net architecture.

Truth is that this algorithm works well in both. It is pretty easy to translate this to Java. Of course, a person should use the technology appropriate to the job at hand and appropriate to their experience and skill.

I've been using this control with much pleasure on my login pages but it has one behaviour that is annoying and I couldn't tackle. It seems if you render the login page and let it stay open untouched in the browser for a while, then cancel-out of the page you get this ugly red asp.net error. Alas I don't have the error at hand right now but my guess is something goes wrong with the session(state).

Sorry to anybody trying to see the control working in action, due to a mix-up between me and my hosting company (in my opinion more their fault than mine ) my domain wasn't renewed and my site is now down.

Anyway, I'm using this to spur myself into a bit of action so I'm moving hosts and I'll be writing updated articles for all of my stuff that I've been meaning to do.

Sorry for the inconvenience, but in return you'll get some updated material to get your teeth into

I should also mention the primary domain will be oobaloo.com for both the website and email, but I'll post a message once all the domain name stuff has been sorted. Thanks again.

--
Paul"Put the key of despair into the lock of apathy. Turn the knob of mediocrity slowly and open the gates of despondency - welcome to a day in the average office."
- David Brent, from "The Office"

I get the impression, after testing this control twice this year, that this control doesn't work as expected when there are other textboxes with regular validators on the page. I try to use this functionality in my login page, which has two textboxes (account, password) and their accompanying validators. These validators keep working as expected, but the whole image validator is totally skipped!

What does someone have to do to let this control operate as a regular validator along with other validators and a validationsummary on a page? It is nice in itself but useless if it cannot be slipstreamed into other functionality....

This may answer your question, I'm not sure. The control does work as designed. I have done quite a lot of work with the base code given here extending it slightly and can verify that it works. The problem I think you are experiencing is one of client versus server side validation. Regualar validators will be caught client side, the validation they do is then duplicated server side to stop people posting stuff directly to your page bypassing the client side validation. This control cannot be validated client side by its very nature. Therefore only server side validation occurs. If you are expecting a message box to be displayed as opposed to the validation summary being displayed in your HTML then this cannot happen using the standard .NET framework, although with a little additional script it can be achieved. You must also ensure you perform a check server side that the page is valid before assuming it is by calling this.IsValid behind your page submission handler.

Thanks Richard. I have this thingy working now and it is marvelous. For all I know the only change I made was adding Page.IsValid to the login button onclick event handler and then it sparkled The control works very well along with the ValidationSummary too.

Invalid length for a Base-64 char array. Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.