Applications Home|Email

 A CAPTCHA Solution Built With Classic ASP, CSS And Javascript.

These days spam is an increasing problem for everybody, including blogs and comment boards. If your page has a form your visitors can submit, it could well be a target for a spammer. This is actually quite easy to do. You write a piece of software, often called a robot or spider, and program it to crawl the Internet looking for forms. The spider automatically enters data in the form fields and submits the form. It doesn't need to click the button like you and me. The spam could be Viagra or porn, but also innocent looking links to some web page. The spider does this in order to improve their ranking in the search engines. The more links they spam out, the better ranking they get.

There exists one very common technique of blocking this type of spam, it is called CAPTCHA. You have probably seen it on many Internet sites: Before you are allowed to submit a form you must enter some letters and numbers that can be seen in a small image. Here are some examples:

Using CAPTCHA images has become the standard way of fighting this type of spam. The main benefit of using such images is that they are difficult to crack. However, the harder they are to crack, the harder they are to read. Consider the first character in the blue CAPTCHA image above. Is it Q or O? In short, one should keep accessibility and usability in mind when implementing a CAPTCHA solution.

Of course, you don't have to use images. A CAPTCHA could be anything. For example, you could use javascript, CSS, Flash or perhaps ASCII Art. You could even stream sound files to your visitors.

When developing a solution for Classic ASP you could use any of these technologies, or better still, combine them. Here is a simple CAPTCHA system using CSS and javascript on the client, and Classic ASP on the web server: (Reload the page to see new CAPTCHAS!)


Before submitting this form, please type the characters displayed above:


This is not an image, it is just a simple <div> styled using CSS and written to the browser with javascript. This is not rocket science, but hey, it works!

I have implemented certain randomizing tricks to avoid creating a specific pattern in the html that a spider can recognize. This should make it harder for a spider to read and crack this solution:

  • The CSS class names are randomized and so is the CSS code itself, like the font family, size, color and position of the characters.
  • The order of the CSS elements is also randomized, sometimes font size comes after color etc.
  • The number of characters in the CAPTCHA may vary.
  • The user will not always be asked to simply enter the displayed characters, but also the color of one of the characters. These questions are randomized as well.
  • The characters are not always printed as plain ascii letters, sometimes their hexadecimal or decimal values are used.

Because the CSS box is printed using javascript, a spider that tears this page off the server, cannot see the box because it is assembled by the browser. To be able to read our little box the spider would therefore have to be a web browser as well, capable of parsing and rendering both CSS and javascript. This makes cracking our box a lot harder.

This application is a light weight CAPTCHA solution designed to prevent spam from being submitted via forms on blog type web pages. It is easy to implement, you need no components, it loads fast and it is user friendly because the characters are easy to read.

Coders with better skills in javascript and CSS can easily hack and improve this code. If you do that, please post your work (or a link) here so we all can benefit.

Remember: CAPTCHAs can be cracked, therefore this is no way to protect a bank. It is simply an attempt to distinguish machines from humans in order to stop spam.


View CAPTCHA.txt

Upload CAPTCHA.txt to your web server and save it as Captcha.asp. Your server must support Classic ASP. Your visitors must support cookies.

Include the following in your html code where you want your CAPTCHA to appear:

<!--#include virtual="/YourRoot/YourFolder/Captcha.asp"-->
<%Response.Write CreateCAPTCHA%>

'// Optional: You can display a response message after submitting the form by including this line


Don't like my Captcha? Here's one that uses classic ASP to generate BMP images: http://www.tipstricks.org/

Cracking CAPTCHAs:

Add a fake form element to your form, make it a text area because spam bots seem to love these.

<textarea id="MySpamTrap" name="MySpamTrap" rows="3" cols="4"></textarea>

Then hide the text area using css:
#MySpamTrap {display: none;}

Then check if there is any content submitted with this field. If it is, it's spam.

Therefore: For that or this for it.
© www.u229.no