SimpleMvcCaptcha, or my first open source experience

Disclaimer!
In no case do I claim to be the developer of an ideal captcha, as well as the inventor of something new. Everything that is written here was made by me for educational purposes and open source. And yes, I realize that to write my captcha is to invent a bicycle.

How it all began

Most recently, I started developing my own small project on ASP.NET MVC 3. Its essence is that visitors can add their own messages to it, which later appear in public access (who cares what is behind this confusing explanation - the link will be in the end).

It is clear that if we are talking about a public project with the possibility of posting any content to the server, you need to take care of protection from spammers and other unpleasant personalities. In other words - need a captcha.
')
The first thing that came to my mind was Google's ReCaptcha. Having installed it and having used it for some time, I finally understood that this monster is not at all for me and not for the majority of adequate people, especially Russian-speaking (the output of some images is not only machine-readable, it cannot be read by people). Looking for other solutions, to my regret, I did not find something normal for MVC 3, simple and unobtrusive to use. There were different manuals for how to do this or that, but the “ready-made and used” solution was somehow not met. Therefore decided invent a bicycle write your captcha.

Idea

The search for ready-made solutions, though they did not give me the final result, but gave me ideas on how all this can be implemented. I decided that captcha, as usual, we see it (simple recognition of characters in the picture), I can hardly make it qualitative in view of the simplicity of its machine parsing. In this case, I again have to choose either the difficulty of reading, or weak protection. Therefore, I decided to make a captcha a bit non-standard, namely, to display arithmetic operations on the image, so that the user can calculate the result and enter it into a special field. Standard captcha analyzers in most cases will replace the recognized text rather than the sum and difference, which would be the wrong result. Well, and if they write their bot under this captcha, then nothing will save them.

Implementation

No sooner said than done. Without thinking, I created a new build project in the studio (to issue a captcha for one single project as a separate dll, I was told by my sense of good tone and, as it turned out, for good reason). In it, I created a class with the usual extension method for the HtmlHelper class. The whole project called it then - SimpleMvcCaptcha.

The essence of the implementation is as follows. Helper randomly generates two operand numbers and one operation (so far only + or -). Based on these parameters, the result is calculated. Then there are two feints ears. First, we need to create an image with a captcha expression. However, this cannot be done inside the helper. Therefore, we need to create an img tag, the source of the image for which will be a specially prepared action of a special controller, which is described below. The second feint with our ears - we need to somehow save the information about the result, so that on subsequent posting of the results to the server we don’t have to recognize our own captcha.

At first, I wanted to take a bit of a non-standard way due to the lack of rich experience. The fact is that most of the captcha, about which I read, passed their values ​​through the cache or session. I didn’t really like this idea, so I decided to store the result of the operation inside the html of the page with the captcha in a hidden field. But in order not to simplify the life of the analyzers, I decided to encrypt this string using AES. However, I was soon helped to realize that in such a case it would cost the bot nothing to replace both the hash of the picture and the result for it, which instantly ruins the stamina. Therefore, I still followed the path of the majority.

A small object is saved in the session containing the text of the expression for the image and the text of the result. Then this object is retrieved in two cases, when generating an image and validating user input.

/// <summary> /// Captcha object /// </summary> internal class Captcha { /// <summary> /// Result of captcha's expression /// </summary> public string Result { get; internal set; } /// <summary> /// Captcha's expression /// </summary> public string Expresion { get; internal set; } } 

Now about the controller. In those examples that I found, image generation was relegated to special processors like .axd, .ashx. I decided that let the controller and the action familiar to us do it. Here I have doubts about the correctness of the decision, so I am waiting for criticism and constructive comments on this matter.

  public class CaptchaController : Controller { public FileContentResult GetImage(string id) { return File(CaptchaUtils.GetImage(id), "image/gif"); } } 

Validation is also quite simple:

  /// <summary> /// Validates input /// </summary> /// <returns>true - validation succeeded \nfalse - validation failed</returns> public static bool Validate() { var ctx = HttpContext.Current; var captchaAnswer = ctx.Request.Form["captchaAnswer"]; var captchaHidden = ctx.Request.Form["captchaId"]; // If input is not empty if(!String.IsNullOrEmpty(captchaAnswer) && !String.IsNullOrEmpty(captchaHidden)) { var captcha = ctx.Session[captchaHidden] as Captcha; ctx.Session.Remove(captchaHidden); return captcha != null && captchaAnswer == captcha.Result; } return false; } 

What happened

Here are the examples of using captcha. As you can see, the helper generates an image with the text of an arithmetic expression (with random color), also randomly replaces the + and - operator with text (can be specified in parameters), and also provides a field for entering the answer. Just like everyone else, so it's convenient to use it out of the box.

Client code looks like this:

 <div class="smc-captcha"> <img src='/Captcha/GetImage/08a75516-f1ed-41ca-a926-724a268f171e' alt='captcha' class='smc-img-captcha' ><br/> <input type='hidden' name='captchaId' value='08a75516-f1ed-41ca-a926-724a268f171e' /> <input type='text' name='captchaAnswer' class='smc-input-result' /> </div> 

Customization

Most of the parameters used in the captcha generation process can be overridden via the web.config of your ASP.NET MVC project. Of these parameters, you can select the width and height of the image, size and type of font, text-replacement for + and - (in the picture above is the third frame), the maximum number for use in expressions, the name of the controller and action for issuing pictures. You can also customize the CSS properties of the div, img, and imput elements by overriding the corresponding classes.

Open source

Now that is why I decided to write on habr. This article mentions Open Source in its title. Yes, after I implemented this captcha for myself, I decided that it would be nice to share it with the rest of the community. This is my first experience of open source development, so it became doubly interesting to me. All code, description and documentation are laid out on CodePlex at http://simplemvccaptcha.codeplex.com/ under the GPLv2 license. Come, download, use.

Finally

I very much hope that this small project will help you when creating websites based on ASP.NET MVC 3, which will need functionality of a simple captcha, which is easy for a person to recognize, but will help protect against any bots.

PS And the project for which it was originally written and about which I spoke at the beginning is called “Facts about programming” . There are not so many facts there yet, but I hope that the project will actively develop with your support too!
An example of using a captcha can be found on the page for adding your own fact . We kindly request - if you notice a bug in a captcha or site, do not try to break it right away. Better tell me and I will fix it. Let's be constructive.