Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Image validation in the Web

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.

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).

 

Figure 1. Example of site

In order no to “tire the arm” voting, a user, creates a robot which gains access to the destination URL of the form (action), sending the code of his favorite candidate (such as, for example, link http://www.website.com.br/vote.aspx?idCandidate=10), which can be obtained through a simple consultation of the source code of the browser.

In such case, he will be manage to see to it that his candidate wins the competition, deceiving the voting process, since the robot will be able to vote 24h, without stopping, in multiple instances of simultaneous execution, inclusive. This is only one of the cases where robots 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).

 

Figure 2. Creating the ASP.NET project

Add a new ASPX file (menu Website>Add New Item) and give it the name “image.aspx”. We will start the code implementation by the method which will define the image content, that is, the text that shall be validated through the typing in the TextBox. Add the GenerateString (we will give this name to the method), as in Listing 1.

 

Listing 1. GenerateString Method

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;

}

 

The code in the former listing generates a 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.

 

Listing 2. Page_Load of the page

...

using System.Drawing;

using System.Drawing.Imaging;

using System.Drawing.Text;

using System.IO;

...

 

private Random rnd;

protected void Page_Load(object sender,

  EventArgs e)

{

   int x, y;

   string strValidation = null;

   rnd = new Random();

 

   Response.ContentType = "image/jpeg";

   Response.Clear();

   Response.BufferOutput = true;

 

   strValidation = GenerateString();

   Session["strValidation"] = strValidation;

 

   Font font = new Font("Arial",

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

 

   Bitmap bitmap = new Bitmap(200, 50);

   Graphics gr = Graphics.FromImage(bitmap);

 

   gr.FillRectangle(Brushes.BlueViolet,

     new Rectangle(0, 0, bitmap.Width,

     bitmap.Height));

   gr.DrawString(strValidation, font,

     Brushes.White, (float)rnd.Next(70),

     (float)rnd.Next(20));

   gr.DrawLine(new Pen(Color.White),

     new Point(0, rnd.Next(50)), new Point(200,

     rnd.Next(50)));

   gr.DrawLine(new Pen(Color.White), new Point(0,

     rnd.Next(50)), new Point(200, rnd.Next(50)));

   gr.DrawLine(new Pen(Color.White), new Point(0,

     rnd.Next(50)), new Point(200, rnd.Next(50)));

 

   for (x = 0; x < bitmap.Width; x++)

     for (y = 0; y < bitmap.Height; y++)

       if (rnd.Next(4) == 1)

         bitmap.SetPixel(x, y, Color.White);

                   

   font.Dispose();

   gr.Dispose();

   bitmap.Save(Response.OutputStream,

     ImageFormat.Jpeg);

   bitmap.Dispose();

 }   

}

 

As we can observe in the previous listing, the kind of reply content of the document (Response.ContentType) will be image/JPEG, that is, an image. Still, we point out that the image will be downloaded at a time, through the command Response.BufferOutput = true.

Here, we use the class Graphic to generate the image. Through its methods, such as DrawString, DrawLine and FillRectangle, we create the desired image inside a Bitmap object.

 

Understanding the image content

As said previously, generating the message it is not enough, since there are robots that gain access to your image’s URL with the intention of tracking it and obtaining its content.

The first action we must take is in the direction of creating an image which is as random as possible, that is, which has the least standards of positioning of characters, source size, etc.

In the previous code, notice that the sizes of the source of the validation characters do not possess a determined size, exactly in order to prevent that a robot is configured to track the content of an image whose source size is known.

Following the same reason, the validation string “is drawn” inside the image. Once again we do not have a determined positioning for it. With this precaution, we prevent a robot from gaining access to a specific cardinal point, where it knows that our drawn string is located.

Next, actions are taken so that the image does not have only the printed validation characters. In this case, some tilted lines are inserted in the horizontal and, after that, a 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.

 

Figure 3. Examples of generated images

 

Inserting the validation in the voting form

Return to the Default.aspx page and create a layout similar to the one in Figure 1. Add an Image and modify the ImageURL property for the WebForm, which, in reality generates the content in the format of a JPEG image (type “image.aspx”). Add a TextBox for the typing of the validation string and a Label to introduce the result of the validation. See how the page came out in Figure 4.

 

Figure 4.  Inserting the image in the voting form

 

Validating the content of the image

Add the code in Listing 3 at the Click event of the button. Here, we simply test if the value typed in the TextBox corresponds to the value stored in session. That is, if the typing was valid. See in Figure 5, the result of the application running.

 

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.



Is a Systems’ Analyst with more than 10 years of experience. He is consultor in Porto Alegre /RS, where he works with C#, Java, among others languages, in platforms of Windows and Linux. He uses .NET framework since the first Beta...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login