close button

How to add a CAPTCHA to your website

Published by

Adding CAPTCHA to your website is a security measure that is often used when site visitors sign in to, or sign up for accounts. Without using a CAPTCHA, bots (AKA spambots, AKA spam robots) can submit forms on your site, create spam accounts, and depending on the type of website you run, submit spam information to your site. Adding CAPTCHA is not as difficult as you think: the following paragraphs give a good introduction to CAPTCHAs and how to install one on your website.

What is CAPTCHA?

Captcha is a verification process that requires users to enter a pre-determined code. CAPTCHA stands for Completely Automated Public Turing test to tell Computers and Humans Apart. CAPTCHA exists to prevent spam from automated form submissions that can fill your site with junk postings, spam user accounts, or worse feel for security holes to be exploited on your website.

captcha

CAPTCHAs work by providing a question that is simple for a human to answer, but difficult for a bot to answer. For instance, in the image above, most internet users will have little difficulty reading the words New Zombies. Spam bots can’t answer the question, so they are unable to submit the form, so you will only receive real form submissions. (CAPTCHAs need to be constantly improved to stay smarter than the spambots, which are also always improving).

THe best capthcas give users the option to request a new code if they can’t read the given one, and there should be options for blind and deaf users too. For eample, disabled settings will play the code as audio for blind users to hear, while deaf users may see an enhanced version of the code in place of an audio version. The CAPTCHA system should not prohibitive, and you should let your customers know that the verification is for their own protection.

Where do I need to use CAPTCHA?

Captchas should be used on any naked forms on your website. A naked form is one that is not hidden behind a login. For example, if you have a contact form on your website, that is visible to users whether they are logged in or not, then this form should have a CAPTCHA. If you do not use a CAPTCHA, then you ay be flooded with spam or bogus submissions, making your job of determining when a response is needed much harder. If on the other hand, you have a site that requires users to login, and you have a checkout or product purchase form. If the user is already logged in, then you will not need a CAPTCHA on your checkout form since the user has already been authenticated when he or she logged in.

New user signup forms should always have a CAPTCHA. Your new users must prove they are not a robot by using the CAPTCHA code, and the CAPTCHA process will deny access to anyone who answers incorrectly. It is not uncommon to have CAPTCHAs on account change pages, or password request pages.

The best CAPTCHA codes

The best CAPTCHA code helps users read the code easily, and without the CAPTCHA code being too long. Traditional CAPTCHA codes started out as as sets of numbers or letters that may or may not be case sensitive. The sequence of letters or numbers is generally obscured, or mutated in some way, or set against a colourful or complex background, to make it more difficult for bots to pick out the letters. Customers will become frustrated with you when the code is too hard to read, and may give up on your website. ReCAPTCHA (see below) is probably the best and most widely used and recognized of the CAPTCHA systems.

Types of CAPTCHA

Over the years, different types of CAPTCHAs have been developed, including simple maths questions e.g. “What is 2+9?” and classification problems, such as “select all the images with a cat!”

ReCAPTCHA

ReCAPTCHA is probably the most widely used and recognised. It was acquired by Google in 2009, and Google now uses it to assist with the automatic digitization of text books, and of the automatic recognition of real life street signs and names. It is a CAPTCHA code system that presents two words to be deciphered. When a user deciphers the two words or numbers, the result are sent back to Google to help digitize books and street signs for Google’s other projects.

No CAPTCHA reCAPTCHA

The most recent update to ReCAPTCHA attempts to minimize the number of times that a CAPTCHA is actually displayed to the user. This is acheived by analyzing browser behaviour of the user, and presenting a difficult CAPTCHA if the system thinks it’s a bot. Otherwise a simple checkbox is shown.

nocaptcha recaptcha

BotDetect CAPTCHA

BotDetect is an alternative CAPTCHA service. It provides the more traditional kinds of letter and number sequence image CAPTCHAs (see image below).

Image captcha examples

BotDetect has many examples in a number of different languages and CMSes on its website, including PHP, ASP, Java, and WordPress.

Image CAPTCHA

Another type is the image CAPTCHA whereby a set of images is presented to the user as an identification. Sometimes the identification task is an odd man out problem, or else a pick all images in a class. The image below illustrates the odd man out approach:

image captcha

How to add a CAPTCHA to your website

Whichever CAPTCHA you decide to use, code snippets are usually provided by the CAPTCHA provider. The CAPTCHA service provider can often be configured to only display CAPTCHA codes that you approve of, and your email address will be used for notifications. You must drop the code snippets into the appropriate parts of your website, on those forms where the CAPTCHA window should appear.

Generally, integrating the CAPTCHA is relatively easy. For example the code for integrating ReCAPTCHA is included below (from ReCAPTCHA docs):

<html>
 
<head>
   
<title>reCAPTCHA demo: Simple page</title>
     
<script src="https://www.google.com/reCAPTCHA/api.js" async defer></script>
 
</head>
 
<body>
   
<form action="?" method="POST">
     
<div class="g-reCAPTCHA" data-sitekey="your_site_key"></div>
     
<br/>
     
<input type="submit" value="Submit">
   
</form>
 
</body>
</html>

However, if you are not at all technical, then even this might not be something you can attempt yourself and you may need to get ome technical help

Notifications

The notifications you receive from failed CAPTCHA entries should be investigated for security. You will find failures produced by real customers, and you must change your security approach if there are too many of these. Shorten the code, enlarge the window or remove the CAPTCHA from that page to prevent frustration. Failures that occur from unknown areas should give you pause. An increase in CAPTCHA failures is a sign that your website is a target. Increase your security protocols for your own safety.

Using the best CAPTCHA code for your website helps you protect private information, but overuse of the Captcha window can make your website more difficult to use. Users are not shy about leaving your site when they cannot get past your basic security, and you should carefully place CAPTCHA windows in only the most needed areas.

Ask your customers to fill out the CAPTCHA form when they sign up for an account, change their password or request sensitive information. The CAPTCHA code lets you know when someone has made improper advances on your site, and you may narrow your security for the protection of your customers.