Friday, March 29, 2024

CAPTCHA: Image Verification for Web Developers

Introduction

CAPTCHA is a computer program that blocks other computer programs from tricking it. It is supposed to only let human beings through. The problem with most CAPTCHA implementations is that they are so annoying that they often drive humans away and still leave computer programs trying to find a way to break in. It is a type of challenge-response test that is used to ensure that the response is being generated by a human being.

CAPTCHA is an acronym based on the word ‘capture’, and stands for ‘Completely Automated Public Turing test to tell Computers and Humans Apart’. It was coined by some students at Carnegie Mellon University back in 2000. Since its creation, it is widely used across the internet to control system-generated registrations and comments.

In case you’re not sure what a CAPTCHA is, go to the registration page of any of the popular email service and at the bottom of the registration form you will find an image with some text (like the image below) that is extremely difficult to read. The reason it is made so hard to read is to prevent OCR programs from being able to decipher the text.

Sample CAPTCHA

The above CAPTCHA is still quite easy to read. Sometimes I feel that some CAPTCHAs are designed to make you feel like you don’t know how to read. Legibility aside, the only adjective to describe some of the CAPTCHAs is ‘ugly’; and a sensitive designer would much rather spend a certain portion of his day moderating user comments than deal with such ugly CAPTCHAs.

The Real Problem With CAPTCHA

CAPTCHA services are working harder and harder to beat the OCRing programs at being able to parse the text in the images. While doing this, they are making it gradually impossible for humans to even read the text. Kinda defeats the purpose doesn’t it? So what exactly are we trying to solve?

At the core, we want to make sure that the form is being filled by a human being and not an automated system. There are ample other ways to test for this rather than test the user’s patience and dignity.

Simple Math CAPTCHA

We can be sure that almost all human beings who use computers are capable of doing simple math. For example, they can compute the sum of 4 and 2. While its a trivial task for bots to perform basic math, they can’t read text to figure out the values that have to be added. For example, the following code can be used as a simple CAPTCHA and has been proven to work for several websites:

<What is the sum of 4 and 2?</p>
<input type=”text” name=”captcha-answer” />

Smarter CAPTCHA

To make this more interesting, you can ask more intelligent questions like “What is the capital of France?” or “Who was the first President of the United States of America?” This type of CAPTCHA verification might annoy a user who doesn’t know the answer, but if the target user audience is a controlled one, then using such a CAPTCHA will definitely bring a smile to their faces.

Monetize with CAPTCHA

If I told you that you can actually generate revenue from the CAPTCHA, would you give me a cut on your profits? Let me share the idea with you anyway. This variant of the CAPTCHA works just like the usual one, except that instead of a getting the user to type a random string, you get them to type the punch line of a brand, and get the brand to pay you for it. For example, the CATCH string that the user has to type could be “JUST DO IT”. The image that has the text would have the Nike logo on it so that users associate it with the Nike.

CAPTCHA using CSS

Sometimes, we can’t avoid using an image-based CAPTCHA; and to appease the designers, we have to make the image look as little ugly as possible keeping the bots away too. This solution does just that and in an extremely simple manner. Instead of using an img tag, insert a div and use CSS to specify the image. The difference here is that bots don’t usually parse the CSS files to fish out the image path and use that.

GOTCHA!

When I came across this method of SPAM-control, I felt ridiculed and wondered why I struggled so much for so long. The idea is simple. We want to distinguish bots from humans. And what do bots do? They fill every field in the form (or at least the popular ones like ‘name’ etc.). Humans on the other hand, fill fields that are visible to them. So what we have to do is have a field that is hidden using CSS. And on submission, we check the value of that field. If it is populated, we know that the form is filled by a bot.

Conclusion

We’ve looked at various ways you can implement CAPTCHA in ways that is not abusive, insulting or annoying to your site’s visitors. Please do us all a favor, and if you use CAPTCHA, make it a positive experience for the user.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured