Image validation in the Web

Good Idea

Image validation in the Web

This article examines:	This article uses the following technologies:
·         Validations in Web applications; ·         Random generation of images; ·         Security in Web applications.	Visual Studio 2005, C# and ASP.NET 2.0

The use of validation images in Web Sites is more and more common everyday. More than a security issue, it is a highly recommendable feature for the control of your application. This article brings an implementation of this type of validation, apart from some suggestions to develop the security of ASP.NET applications, using this resource.

Why use validation images?

Currently, the majority of bits that traffic through the Internet, carry contents such as Spam; illegal medias, apart from robots, which are applications that simulate queries in the server, that is, it is as if somebody clicked the Submit button of your application.

Due to these occurrences, more and more the implementation of controls to develop the security of the systems used in the Internet become necessary. In this article, I’ll see how to create an interface that requires the typing of a verification code that was generated through an image. Imagine a voting site for a contest (Figure 1).

 

can be harmful in Web applications.

 

Using image validation

One of the security implementations is the use of validation images in Web forms, since, at the moment of the choice of the favorite candidate, the user will have to type the code printed in the image, which will be validated in the server in order to confirm the vote.

The well planned use of these images can prevent the access of robots to your application. The validation images have a content which is normally composed by random characters or expressions that must be manually typed in a text box in order to validate the sending of information at the Submit of a form.

Unlike pure text expressions, which are hard-coded in the HTML and could easily be discovered by a robot, the text of an image is only perceivable to the human eye. Or, at least, it should be.

However, to generate this image is not enough. Known are the techniques which manage to track the content of an image and to obtain the typed text (technique many times known as OCR). For this reason, it is necessary to generate an image with attributes that “confuse” the tracking of the content.

The implementation suggestion which we will see could certainly be developed with the use of the developer’s creativity, to create a content that can be recognized by sight, but not by some image tracking algorithm.

The image which we will create will be generated by an ASP.NET application, with Response of the type image/JPEG. In other words, we will have an ASPX document, which content will the image itself. Now that we have already seen the foundations, let us move on to practice.

 

Generating the image

Open the Visual Studio 2005 and create an ASP.NET application, in the language C#. Give the project the name “ImageValidating” and click over OK (Figure 2).

 

private string GenerateString()

   rnd = new Random();

   string validatingText = null;   

   for (int a = 0; a < 7; a++)

   {

      char chr = (char)rnd.Next(65, 90);

      validatingText += chr.ToString();

   }

   return validatingText;

string with seven random characters (in this case, capital letters), which will compose the validation. This string will be inserted in a Session which will be invoked subsequently fore the validation. In the Page_Load of the page, add the code in Listing 2.

 

using System.Drawing;

using System.Drawing.Imaging;

using System.Drawing.Text;

using System.IO;

"image/jpeg";

   Response.Clear();

   Response.BufferOutput = true;

"strValidation"] = strValidation;

"Arial",

     (float) rnd.Next(17,20));

Loop that “raffles” screen points, where pixels are inserted.

All of this, exactly, as to not leave the image with a formatting standard that can be foreseen. When we gain access to the image’s URL (Figure 3), we can observe that it does not possess a determined standard, which certainly makes its system safer.

 

.

 

 

Listing 3. Validating the content of the image

protected void Button1_Click(object sender,

  EventArgs e)

{

   if (txtValidation.Text ==

     Session["strValidation"].ToString())

   lblResult.Text =

     "Your vote was computed sucessfull! \n" +

     Request["idCandidate"] +

     " thank you for your vote";

   else

     lblResult.Text = "Your vote is invalid!";

}

 

 

Figure 5. Validating the content typed by the user

 

Tips to develop your validation image

The code presented for the image generation is a suggestion; since, the true intention is to introduce protection techniques for your application. As we have seen previously, the generated image must be most as random as possible, that is, although presenting a fixed number of characters, these must be presented in a non predictable manner.

Therefore, developments such as making the application alternate the kind of the source used, alternation of the colors, rotation, so much of background as of the source and the other elements, are actions which may assist, even more, in security.

Remember, yet, that the legibility of the content to be validated is very important, since the user needs to visually recognize the characters which he will submit to validation.

 

Conclusion

The applications which are available in the Web must be protected so that the server resources are always accessible. Therefore, it is essential that the techniques presented here are submitted to an analysis that graduates the necessary security level that must be incorporated to the developed solution.

It is also necessary that the developer analyzes and develops, whenever possible, the image generation algorithm, so that its techniques do not become obsolete (or known) and so that occasional vulnerabilities are detected and corrected.