HighOnCoding.com: Creating a Simple Image Less Captcha Control Using ASP.NET MVC Framework

Creating a Simple Image Less Captcha Control Using ASP.NET MVC Framework

AzamSharp
Published Date: 3/23/2010 2:04:45 PM
Views: 3923

Abstract:
While working on the AzamSharpNoSqlBlogSolution project we had the need for a Captcha control. The main purpose of the Captcha is to keep the spammers, robots posting on the site. In this article we are going to learn how to create an imageless captcha control using ASP.NET MVC framework.
The View:

The Captcha control is placed in the _addComments partial view since this view is responsible for publishing comments to the website. The control is placed in the form of HtmlHelper extension method. The view code is implemented below:

The first parameter is the name of the captcha control which in this case is "captcha". The second parameter is the strickness level. We will explain that later in the article.

Implementing Captcha Using HtmlHelper:

In order to implement the captcha control as HtmlHelper we need to extend the HtmlHelper class. This is performed by using the extension methods.

The StringBuilder is used inside the Captcha extension method and returns a string that represents hidden fields and the textbox control. The hidden fields are used to hold the randomly generated number and the textbox is for the user to input the correct answer.

The GeeklyLevel enum type sets the difficulty level of the captcha produced. Although it does not gaurentee that the captcha produced will be difficult to calculate. But you can easily fix this by providing the min and max limits on the Next method of the Random class.

Validating User Input:

When the user inputs the answer in the captcha control and submits the form the input must be validated. For this reason we implemented the CaptchaService which is responsible for validating the user input and the captcha generated parameters.

The Validate method above just makes sure that the sum of the numbers generated by the captcha control is equal to the number entered by the user.

The screenshot of the captcha control is shown below:

Conclusion:

In this article we learned how to create a simple image less captcha control. For most web applications this will keep the spam messages away. For highly traffic websites you should use a more sophisticated captcha control.

[Download]

Comments/Feedbacks


	Subject: Not effective solution Name: Devesh Date: 5/29/2010 11:07:30 AM Comment: I think storing the values in hidden field is not a good idea as spammer can just pick the values from the hidden field easily and populate the values in the textbox.Is it possible to have a better way to control the spamming.


	Subject: Will this work ? Name: Babu Date: 5/29/2010 11:39:23 AM Comment: I guess still screen reader software can read this nos, add it and post data...Will this be a real efficient one ?


	Subject: Poorly done Name: T Date: 5/29/2010 5:47:26 PM Comment: This is a horrible implementation. Most of the point in including a captcha in a form is to prevent its use from being automated. This implementation provides everything needed to automate its use. There's a reason images are used rather than text.


	Subject: re: horrible implementation Name: Mohammad Azam Date: 5/29/2010 6:04:23 PM Comment: Hi, As mentioned in the article the above implementation is reasonable to implement for a low-medium traffic website. I use a very similar implementation on my blog and it eliminates 99% of the spam. For high traffic website my advice will be to use mature CAPTCHA control.


	Subject: Eh.. a little to weak? Name: Wesley Date: 8/8/2010 7:46:52 AM Comment: Sorry, but this is a secure as an open door. If somebody opens his eyes he can walk right in! You output the two numbers to the page. So everybody with a little bit of common sense can break your captcha within minutes by parsing the html server side. And even if you didn't put the two numbers into your source... I can simply cal the javascript eval method(http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_eval) on the label where the for attribute equals 'field2' (on this form). This is a very bad example.


	Subject: re: little secure Name: Mohammad Azam Date: 8/8/2010 7:55:18 AM Comment: hi Wesley, You are right! That is why in the article I mentioned that this technique should not be used in high traffic websites. Check out the following article for the captcha control that uses images: http://highoncoding.com/Articles/718_Creating_Image_Captcha_HtmlHelper_Using_ASP_NET_MVC_Framework.aspx