A Better CAPTCHA Control (Look Ma - NO IMAGE!)

Peter takes a previous concept and applies it to the real world of "Really Useful" applications - A Better CAPTCHA!

We live in the Age of the Internet. It's a technologically - driven era in society where information flows more freely, is easier to access and find, and has more influence on the speed of development of the totality of the experience of being human and living human lives, than at any time in known history.

Along with that freedom and flow of information comes SPAM -- Blog SPAM, newsgroup SPAM, email SPAM. And so the CAPTCHA (an initialism for "Completely Automated Public Turing test to tell Computers and Humans Apart", trademarked by Carnegie Mellon University) came into play. CAPTCHA is a type of of challenge-response test used in computing to determine whether or not the user is human. The most common form of CAPTCHA requires that the user correctly type in the characters shown on an image, usually an obscured sequence of letters or digits that appears on the screen.

Unfortunately, this image-based CAPTCHA technique, which has become almost ubiquitous on blogs, newsgroups, forums and any other form of Internet community publication, is severely flawed. In order to prevent BOTS (automated spam mechanisms) from performing OCR on the characters in the displayed image, the CAPTCHA characters are often so deliberately obscured by lines, text warp effects and other visual "noise" that even we, the real humans, cannot read them correctly. I have good vision, and six times out of ten, I get the required input for a CAPTCHA challenge wrong on the first try. Not only is this inefficient, it is damned frustrating and it really puts a dent in the user experience. I doubt that many will disagree with this statement.  Can you imagine the difficulty someone with impaired vision will have? Yes, I know, you will tell me that there are CAPTCHAs that use audio, and so on. That isn't the point.

It is not necessary to put up with this. While there have been numerous "experiments" in offering "different kinds" of CAPTCHA Tests - e.g., selecting the "prettiest girl" from a group of images, using "smart questions", etc. they haven't really taken hold, and we, the poor Internet Users, must suffer the slings and arrows of CAPTCHA Bipolar Disorder just to leave a comment on our buddy's Blog. Yecch! We can do better.

I have an idea that offers an interesting alternative. If images are so susceptible to being Optical Character Recognized by bots, why display an image at all? That's right, FORGET ABOUT IMAGES.

In an earlier article, I featured a class that would turn an image into carefully CSS styled photorealistic HTML. Why not just apply this same technique to a CAPTCHA image with random text, and convert it to HTML, and display that instead? We can dispense with the visual noise, since there is no longer any image to OCR! That means it will be very easy to read, and still accomplish the objective of easily proving the user is human. Bye bye, Mr. BOT -- you now have NOTHING to defeat; we've just chopped your legs off! Sure, you can grab the HTML, but the only way you could possibly find out what the characters are is to have a human render it and read it!  (Of course, some enterprising soul may come up with a scheme to "recognize" the HTML instead, but we will be one step ahead of them with unannounced innovations, so fear not!)

In actual fact, you "could" still OCR this. You would have to grab the HTML, render it, take a screen cap of it into an image, and then finally you could perform OCR on the image.  But, that's highly unlikely to happen anytime soon, if you just think about it.

So, here's  what I did in order to create this, which  is very simple:

1) I took the best of some other people's "pretty good" ASP.NET CAPTCHA image controls that were open source or freeware, and
2) I made a new control that still creates the image, but it runs it through my Image2Html class and returns the string of styled HTML that "looks just like" the original image, and displays that instead. Everything else works exactly the same.

The difference is that now that we aren't using images any longer, we don't need to obfuscate them to the point where the poor user has to go blind figuring out what the damned text is that they need to enter! In fact, we don't need to obfuscate them AT ALL. 

The typical "size" of an HTML version of an image is somewhere in the range of 67K - quite a manageable amount of HMTL and not much bigger than a lot of images that people put in web pages anyway. In addition, since it's inline HTML right in the page, it does not require a separate HTTP request from the browser to get the image.

Here is  my Image2Html class, in case you missed the original article:

using System;
using System.Text;
using System.IO;
using System.Web;
using System.Net;
using System.Drawing ;
namespace PAB.Web.Utils
{    
    public class Image2Html
    {
        private Image2Html()
        {            
        }

        public static string ConvertImage(Bitmap img, int scale)
        {
             
    
            Bitmap b = img;
            MemoryStream ms = new MemoryStream();
            StreamWriter SW = new StreamWriter(ms);
        
            SW.WriteLine("<style>pre{letter-spacing:-4px;word-spacing:-4px;line-height:2px}</style>");
            SW.WriteLine("<pre><b><font size='1pt'>");
            string s2 = "";
            for (int y = 0; y < b.Height; y += scale)
            {
                for (int x = 0; x < b.Width; x += scale)
                {
                    Color c = b.GetPixel(x, y);
                     s2 = c.Name.Substring(2);
                    SW.Write("<font color='#" + s2 + "'>");
                    SW.Write(((byte)c.ToArgb()) >> 7);
                    SW.Write("</font>");
                }
                SW.WriteLine();
            }

            SW.WriteLine("</font></b></pre>");
           
            SW.Close();
            SW = null;
            byte[] b2 = ms.ToArray();
            string s = System.Text.Encoding.ASCII.GetString(b2);
            return s;
        }
    }
}

Here is a simple screen cap illustrating one layout of the control:

The CAPTCHA numbers and letters you see, which are quite easy to read, are NOT an image- they are HTML.

And here is the full Visual Studio 2005 solution with the control and a sample web page, which I am putting in the public domain. The control also features a settable timeout to help defeat those "human bot shops". Zero for the timeout means "no timeout". Please feel free to modify it, change it, make it "your own" and help me get rid of those AWFUL Image - based CAPTCHAS! Thank you!

NOTE: Look at Christopher Lewis' comment below for a nice enhancement that cuts way down on the amount of generated HTML by only changing the pixel color if it is different from the previous one.

Any HUMAN can copy the HTML code out of the page and look at it, just as they can look at the image of a CAPTCHA (without being converted to an HTML representation).

The whole point of a CAPTCHA is to defeat NON-HUMANS. If you were a BOT, how would you propose to "recognize" the characters when there is no image to perform Optical Character Recognition on?

Have you thought about using 'ASCII graphics' i.e. generate big letters made of small ASCII characters, like this (copy and paste into a fixed font editor to see it properly):

!||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||
||||||||||||||||oO|||||||||||||||
|||||||||||||||oOoO||||||||||||||
||||||||||||||oOooOo|||||||||||||
|||||||||||||oOo|oOo|||||||||||||
||||||||||||oOo|||oOo||||||||||||
|||||||||||oOo|||||oOo|||||||||||
||||||||||oOo|||||||oOo||||||||||
|||||||||oOo|||||||||oOo|||||||||
||||||||oOo|||||||||||oOo||||||||
|||||||oOoOoOoOoOoOoOoOoOo|||||||
||||||oOoOoOoOoOoOoOoOoOoOo||||||
|||||oOo|||||||||||||||||oOo|||||
||||oOo|||||||||||||||||||oOo||||
|||oOo|||||||||||||||||||||oOo|||
|||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||

Adrian

Hi -

Just looking at the source of this HTML made me cringe.

Here's a slight change to the ConvertImage method of Image2Html.CS that greatly reduces the size of the HTML:

public static string ConvertImage(Bitmap img, int scale)
{
  Bitmap b = img;
  MemoryStream ms = new MemoryStream();
  StreamWriter SW = new StreamWriter(ms);

  SW.WriteLine("<style>pre{letter-spacing:-4px;word-spacing:-4px;line-height:2px}</style>");
  SW.WriteLine("<pre><b><font size='1pt'>");
  string s2 = "";
  for (int y = 0 ; y < b.Height ; y += scale) {
    string sLast2 = "";
    for (int x = 0 ; x < b.Width ; x += scale) {
      Color c = b.GetPixel(x, y);
      s2 = c.Name.Substring(2);
      //Write a new font tag if we're a new color
      if (string.Compare(s2, sLast2) != 0) {
        //Don't write closing Font tag for first item
        if (sLast2.Length > 0) {
          SW.Write("</font>");
        }
        SW.Write("<font color='#" + s2 + "'>");
        //Remember the current color
        sLast2 = s2;
      } 
      SW.Write(((byte) c.ToArgb()) >> 7);
    }
    //Always end with </font>
    SW.Write("</font>");
    SW.WriteLine();
  }

  SW.WriteLine("</font></b></pre>");

  SW.Close();
  SW = null;
  byte[] b2 = ms.ToArray();
  string s = System.Text.Encoding.ASCII.GetString(b2);
  return s;
}

Basically, the inner loop only writes out a new <Font Color> tag if the color changes.  Spot checking, it reduced the HTML to less then a third of the original code.

Very nice indeed.  My only concern is what may happen with screen readers.  I can just imagine the poor soul that is listening to the page and starts hearing: oneoneoneoneoneoneoneonezerozerooneoneoneone...

A nice extension of this may be to add a CSS definition to the element telling screen readers to not bother reading it out loud, and maybe an alternate rendering for them (audio, for example).

And how many bot writers do YOU know who would go through all that pain just to spam somebody's blog?

Pardon my ignorance, for I am new to this subject, but if you're only interested in foiling bots, why don't you just display a series of characters or numbers and ask a question about it?  Like:

2T47H5Z - How many even numbers are there?

or, using the same sequence:  What is the sum of the numbers?

Would something like that work?

Three web sites I managed suddenly started getting bombarded by bots, and I had no time that day to add a proper captcha control, so as a quick fix I added the question "What is 1 + 1" with a text box for the user to enter "2".  I slapped in a .Net required field validator with the message, "you need to enter '2' here".

It has worked flawlessly.  In 6 months I've not had a single bot post on all 3 sites.

Thanks for the code Nenad - and Peter for this excellent Captcha control.

I modified ConvertImage so the rendered text-image is more similar to the original, yet fully valid and similar in all browsers (tested at browsershots.org).

Here is the code:

public static string ConvertImage(Bitmap img, int scale)
    {
      Bitmap b = img;
      MemoryStream ms = new MemoryStream();
      StreamWriter SW = new StreamWriter(ms);

      SW.WriteLine("<pre>");
      SW.WriteLine("<span style=\"letter-spacing:1px;word-spacing:1px;line-height:2px; font-weight:bold; font-size:2px; \">");
      string s2 = "";
      for (int y = 0; y < b.Height; y += scale)
      {
        string sLast2 = "";
        for (int x = 0; x < b.Width; x += scale)
        {
          Color c = b.GetPixel(x, y);
          s2 = c.Name.Substring(2);
          //Write a new font tag if we're a new color
          if (string.Compare(s2, sLast2) != 0)
          {
            //Don't write closing Font tag for first item
            if (sLast2.Length > 0)
            {
              SW.Write("</span>");
            }
            SW.Write("<span style=\"color: #" + s2 + ";\">");
            //Remember the current color
            sLast2 = s2;
          }
          SW.Write(((byte)c.ToArgb()) >> 7);
        }
        //Always end with </font>
        SW.Write("</span>");
        SW.WriteLine();
      }
      SW.WriteLine("</span>");
      SW.WriteLine("</pre>");

      SW.Close();
      SW = null;
      byte[] b2 = ms.ToArray();
      string s = System.Text.Encoding.ASCII.GetString(b2);
      return s;
    }

I think we should move away from the concept of 'Letters' than machines can understand to something that only a child could understand.

we could have little pics of animals!

When a form takes really long to fill out the cache can be cleared. Then the captcha validation fails with a null reference exception. This alteration takes care of a refresh.

private bool ValidateCaptcha(string strUserEntry)
    {
      string g = (string)HttpContext.Current.Cache["guid"];
      if (!String.IsNullOrEmpty(g)) {
        CaptchaImage ci = (CaptchaImage)HttpContext.Current.Cache[g.ToString()]; // B: 20090119, null reference exception when cache has been cleared
        string strCaptchaText = ci.Text;
        if (string.Compare(strUserEntry, strCaptchaText, false) == 0)
        {
          if (this.CaptchaTimeout == 0)
          {
            this._blnUserValidated = true;
          }
          else
          {
            this._blnUserValidated = this.GeneratedAt.AddSeconds((double)this.CaptchaTimeout) > DateTime.Now;
          }
        }
        else
        {
          this._blnUserValidated = false;
        }
        if (this.UserValidationEvent != null)
        {
          this.UserValidationEvent(this._blnUserValidated);
        }
        }
      // return this._blnUserValidated;
      return false; // always return false, uservalidated is a public property
    }