CYBER WEEK SALE - 50% OFF ALL HOSTING PLANS

General

What Is CAPTCHA and How Тo Add One on Your Website?

By

If the word "spam" comes up, most people think about all these unwanted emails that offer you a million dollars or various drugs. Unfortunately, spam is not limited to emails. If you own a website and people are allowed to comment on articles, you may have noticed that every now and then random comments with links to dubious websites get posted. These are spam comments that are posted by bots crawling your website. If you don’t want to disable the comments on the site, and you want to keep the comments section clean, one of your options is to add CAPTCHA. If you are worried about the security of the website admin area or the user accounts, you can add one on the login page as well.

But what exactly is CAPTCHA?

CAPTCHA is short for Completely Automated Public Turing test to tell Computers and Humans Apart. As the name suggests, this is an interactive challenge that is used to distinguish people from automatic bots. Different types of CAPTCHA are used on websites to prevent unauthorized access to information, data scraping, automated traffic, etc.

Depending on the type of CAPTCHA on a given website, visitors may be required to type a string of letters and numbers, to pinpoint a specific object on an image, or even to move a part of an image to a specific place. Some advanced types of CAPTCHA rely on artificial intelligence (AI), detecting the way a visitor interacts with the website. Based on the cursor movements and a number of undisclosed factors, users may be required to click on a checkbox or may not be prompted to do anything at all if the AI considers the visitor to be a real person.

Here are a few of the advantages of using CAPTCHA:

  • Reduces spam
  • Prevents unauthorized login attempts
  • Stops fake registrations
  • Makes online polls legitimate
  • Prevents data scraping from websites

Types of CAPTCHA

CAPTCHA platforms have developed a lot in the past years. Some companies like Google and Intuition Machines offer solutions that can be used by anybody on any website (with some limitations), while other companies have developed their in-house solutions. Below, you will find information about the types of CAPTCHA systems there are based on the challenges they use, and about several different CAPTCHA platforms, some of which you can use on your website.

Based on challenge type

Text-based. This is the first type of CAPTCHA. One or a few images of words are displayed and the user should type them in a text box. Often the letters are distorted, capital and small letters are mixed, other elements may be included along with the letters to make it difficult for OCR programs to recognize the words. Sometimes numbers can be used instead of the letters, or a mix of the two can be displayed for increased difficulty.

Image-based. These vary greatly and are significantly more difficult to solve by automatic bots, so they are often preferred. Image-based CAPTCHAs include selecting a specific image out of a number of images, moving a puzzle piece to a specific place to complete an image, or clicking on images in a specific order, for example.

Audio-based. This type of CAPTCHA is usually used by visually impaired people or by people who have difficulties to recognize text CAPTCHAs.

Word/Math problems. A simple math problem that should be solved or a sentence that should be completed by filling the missing word.

Risk analysis. This is the most advanced type of CAPTCHA. Advanced algorithms are used to determine whether a website visitor is a human or not, so most users will not see any actual challenge while they browse the website. One may appear only when they start submitting a form on the site, but not necessarily.

Based on brand name

CAPTCHA

We mention this one for the sake of completeness. The original CAPTCHA was developed in the early 2000s, prompting users to re-type a warped text that was deemed unreadable for computers. This platform is deprecated.

reCAPTCHA

As CAPTCHA solving bots evolved, almost all challenges could be solved by machines. This is why the team behind the platform developed reCAPTCHA – a more advanced system that used optical character recognition (OCR) programs.

- reCAPTCHA v1. The original platform used two OCR programs to read text. If the output of the two programs was different, the word was added to the reCAPTCHA database along with a control word. Both words would be displayed to users and if the control one was right, the challenge was accepted. If a lot of users entered the second word in a certain way, sometimes that word would become a control one.

reCAPTCHA was acquired by Google in 2009 and the technology was later used to digitize a number of old texts and years’ worth of newspapers. In 2012, Google started displaying images from its Street View platform in addition to text.

- reCAPTCHA v2. Also known as “No CAPTCHA reCAPTCHA”. The platform was improved significantly and instead of asking users to enter text or click on images, it started analyzing their behavior. reCAPTCHA v2 uses Google’s advanced risk analysis engine and presents adaptive challenges. While people see only a simple checkbox, in reality an algorithm decides if a visitor is a real human. This is the reason why bots did not just start selecting the checkbox.

In some cases, the algorithm cannot determine with certainty if the visitor is human (it often analyses cookies, browsing history, etc., and these are not available in incognito mode, for instance), so it will still display an image challenge. The reCAPTCHA v2 usually asks users to select all images that contain a specific object in a grid of nine images.

- reCAPTCHA v3. Utilizing powerful algorithms and machine learning, Google introduced its new generation service in the end of 2018. The advanced detection system analyses the interaction between the user and the website, the user’s IP address, previous interaction with the reCAPTCHA platform, and other undisclosed factors to determine whether a real person or a bot is on the website. A challenge will be presented only if the algorithm marks the visitor as a bot, while real people will never see any sort of challenge, thus improving their overall experience on the site.

hCaptcha

This is one of the most widely used CAPTCHA platforms and it is the most popular reCAPTCHA alternative out there. It was developed by Intuition Machines, Inc. hCaptcha offers checkbox and image challenges, similar to reCAPTCHA v2. It is currently used by Cloudflare, one of the largest content delivery networks. hCaptcha collects less information than its Google alternative and rewards website owners, which makes it an appealing choice for many people.

Some of the advantages of hCaptcha are that it is free regardless of the number of times it is used on your site, it is available in China (where many Google services are blocked), and you can choose the level of difficulty for the challenges that will appear on the site.

reCAPTCHA and hCaptcha are the most popular platforms, but there are other ones as well. Below, you will find a few, and if you are interested, you can check them out:

MTCaptcha – a free, customizable CAPTCHA that does not collect personal information. MTCaptcha comes with a lot of plugins and modules for popular website platforms.

BotDetect CAPTCHA – another alternative, suitable for small to medium-sized websites. You will have tens of image styles and more than a hundred languages to choose from. The platform respects users’ data privacy, unlike other CAPTCHA platforms.

Adding CAPTCHA on your website

If you want to protect some form on your website by adding CAPTCHA, you should usually copy and paste a few lines of code. Nonetheless, for some applications there are easier ways to do that. Below, you will see how you can add several of the more widely used CAPTCHA platforms to your website. We have also listed a few popular applications and how you can add CAPTCHA to them.

Any type of website

This is the first method we mention, as it is universal for almost any type of website, no matter if you use a content management system (CMS) or a custom-built site. You will just have to find the right file(s) and add the code that you obtain from the CAPTCHA platform.

To add reCAPTHA v2 or reCAPCHA v3, log in to your Google account and go to https://www.google.com/recaptcha/admin. Click on the + sign on the top right, enter your domain and the reCAPTCHA type you want to use. A pair of keys will be generated – a private one for the site, and a secret one to link your platform to reCAPTCHA. You can then easily add reCAPTCHA to any button by adding the following code:

<script src="https://www.google.com/recaptcha/api.js"></script> 

<script> 

   function onSubmit(token) { 

     document.getElementById("demo-form").submit(); 

   } 

</script> 

<button class="g-recaptcha"  

        data-sitekey="reCAPTCHA_site_key"  

        data-callback='onSubmit'  

        data-action='submit'>Submit</button>

To add hCaptcha, open a free account on hCaptcha.com and you will see a pair of keys right from the start. Then, you should add the following to the head or the body of the page:

<script src='https://www.hCaptcha.com/1/api.js' async defer></script>

After that, add the following to any form where you want hCaptcha to appear (replace your_site_key with your actual key):

<div class="h-captcha" data-sitekey="your_site_key"></div>

To validate the client response and to get credit for it, you should add:

<?php 

$data = array( 

            'secret' => "my-secret (should start with 0x..)", 

            'response' => $_POST['h-captcha-response'] 

        ); 

$verify = curl_init(); 

curl_setopt($verify, CURLOPT_URL, "https://hCaptcha.com/siteverify"); 

curl_setopt($verify, CURLOPT_POST, true); 

curl_setopt($verify, CURLOPT_POSTFIELDS, http_build_query($data)); 

curl_setopt($verify, CURLOPT_RETURNTRANSFER, true); 

$response = curl_exec($verify); 

// var_dump($response); 

$responseData = json_decode($response); 

if($responseData->success) { 

    // your success code goes here 

}  

else { 

   // return error to user; they did not pass 

} 

?>

Adding MTCaptcha is quite easy as well. When you sign up on their website and log in, you will see not only the pair of keys that are similar to the other CAPTCHA platforms, but also a point-and-click editor to change a number of basic options, the style and the language, a live demo that will reflect any change you make, as well as the full code you have to copy and paste to your website for the CAPTCHA form to appear on it.

WordPress

As most functions are added to a WordPress website by installing a plugin, you can easily do that to add CAPTCHA as well. For reCAPTCHA v2 or v3, you can use a number of plugins like reCaptcha by BestWebSoft, Simple Google reCAPTCHA, or Invisible reCaptcha for WordPress, for example. HCaptcha and MTCaptcha have their own plugins - hCaptcha for WordPress and MTCaptcha WordPress Plugin. You will have to enter the corresponding keys for the platform you use, and select where on the website the CAPTCHA should appear.

You will find a number of WordPress-specific solutions as well - Really Simple CAPTCHA, or Captcha Code, for example. Their advantage is that you will not have to set up an account on a third-party website and you can easily configure them right from the WordPress dashboard.

Find out how to add reCAPTCHA to Contact Form 7 or WPForms in a few simple steps.
Joomla

The CMS comes with built-in support for reCAPTCHA v2 and v3. If you navigate to Extensions -> Plugins in the Joomla dashboard, you should only enter your Google site key and secret key, and you will be all set. From System -> Global configuration, you can select a Default Captcha option for all modules you have enabled. In the same way, you can add and enable an hCaptcha extension as well.

Drupal

You will have to download the https://www.drupal.org/project/captcha module, and then install it from the Drupal dashboard -> Extend -> Add new module. After that, you can add hCaptcha: https://www.drupal.org/project/hcaptcha, MTCaptcha: https://www.drupal.org/project/mtcaptcha or reCAPTCHA: https://www.drupal.org/project/recaptcha, from the same section. Enable them from the Extend section and after that, go to Configuration -> CAPTCHA module settings. There, you can add the service site and public keys, and then select which type of CAPTCHA to use and where exactly on the website it should appear.

OpenCart

Log in to the admin panel and go to Extensions -> Extensions -> Captchas. OpenCart comes with two platforms by default – Basic captcha and reCAPTCHA. After that, go to System -> Settings -> Option, scroll down the page and you will see the CAPTCHA option, where you can choose the platform you want to use, as well as the pages that you want to be protected.

The OpenCart extensions store will allow you to add more protection solutions as well, including an OpenCart hCaptcha extension. Download the one you want, and add it from the dashboard -> Extensions -> Installer. After that, follow the steps above to enable it.

If you use a different e-commerce or CMS platform, you may find similar plugins/extensions that you can add. Depending on what platform and what CAPTCHA system you want to use, you can check the official website of either one for additional integration instructions.

CAPTCHA drawbacks

CAPTCHA platforms are one of the best ways to prevent abuse from bots on contact forms, ticket websites, auctions, financial websites, etc. Nonetheless, there are some controversies that sometimes make people hesitant about adding CAPTCHA on their website or visiting a website that uses one.

  • Hard to read. Some text CAPTCHAs are very hard to read, especially if more than a couple of characters are not clearly visible. Even if the site visitors want to complete the challenge, they may simply be unable to do so, and as a result, they will probably leave the website.
  • Can be annoying. Certain CAPTCHAs are more annoying than others. If you have to select images where only a small part of the object that is mentioned in the challenge is visible, thus making you uncertain what to select, or if you fail to enter the correct login details for your account and every time you have to complete a couple of additional CAPTCHAs, you will most probably get irritated.
  • Data privacy. Some companies, but most of all Google, have access to some personal information and use it to determine whether you are human or not. Many people are not comfortable with the fact that CAPTCHA providers can track their online habits, especially if the same CAPTCHA platform is used on multiple websites, making it easier to track what sites you visit.
  • Cheap human labor is used to solve them. Human operators are sometimes hired to solve millions of CAPTCHAs for small amounts of money. The CAPTCHAs are needed for different reasons, usually by fraudsters that plan to gain unauthorized access to some online information.

Wrap-up

Using CAPTCHA is a necessity for most types of websites nowadays. If you want to prevent bots from abusing a contact form or from spamming the comments section of your website, you can easily add such a service to the site by following the steps listed in this article. Although some visitors may find solving challenges to be inconvenient, the advantages of using CAPTCHA on your site greatly outweigh the disadvantages. You will find a lot of CAPTCHA solutions on the market. You can choose the one you like the most based on how concerned you are about privacy, how easy you can add it to your site, and whether the platform in question offers the type of challenges you prefer. Once you do that, you will not have to worry about fake comments, unreal poll results, or automated login attempts.

Author

A web hosting provider since 2001. We host over 58,000 websites for customers in over 140 countries around the globe.

Related Posts