BotDetect JavaScript CAPTCHA Documentation

This page is an index of BotDetect Captcha documentation regarding JavaScript Captcha validation and the client-side API available in different versions of BotDetect.

Related information can be found in similar pages about Ajax Captcha and jQuery Captcha.

JavaScript CAPTCHA Validation

Pure JavaScript CAPTCHA Validation Problems

Pure client-side Captcha validation (without any communication with the server) is not supported by BotDetect, since such a Captcha is trivial to bypass, and doesn't provide any serious protection from bots. For example:

  • You want users to post comments only if they have successfully solved the Captcha.
  • If the Captcha validation is purely client-side, this means JavaScript code must send the user's comment to the server when the Captcha code is entered correctly.
  • So the spammer only needs to solve the Captcha once, and note how you handle the result: e.g. sending a specific POST parameter, or redirecting to a specific page.
  • After that, they can simulate the same behavior in their bot and bypass the Captcha completely – by simply faking the POST parameter, or accessing the redirection landing page directly.
  • You can back the client-side Captcha validation by also validating the same user input on the server once the page is posted and before recording the user comment.
  • But since you are keeping the correct Captcha solution on the client for validation, bots can have easy access to that code and then always solve the Captcha correctly.

The exact details would of course depend on your specific use-case and Captcha integration scenario. But essentially, all client-side code is insecure and can be faked or modified by malicious parties. As a consequence, Captcha codes must only be kept on the server, and all Captcha validation must be performed on the server as well.

JavaScript CAPTCHA Validation Solution: AJAX

You can avoid full form submissions by using Ajax to make asynchronous Captcha validation requests to the server, and processing the result on the client:

  • When Ajax Captcha validation fails, you can show the user a new Captcha image without affecting the rest of the page, thus improving the user experience and overall usability of the page.
  • You should always change the Captcha code in such cases, since allowing multiple attempts at solving the same Captcha makes OCR guessing much easier.
  • When Ajax Captcha validation succeeds, you should then submit the page to the server and validate the user Captcha input again.
  • Only after successful server-side Captcha validation should you execute the "protected" operation (e.g. record the user comment) on the server.

BotDetect supports a variety of Ajax Captcha validation options, and includes a number of related samples for the available platforms.

JavaScript Captcha in PHP

BotDetect PHP CAPTCHA Client-Side API Reference

BotDetect PHP Captcha client-side functionality is encapsulated in the botdetect\public\lbd_scripts.js JavaScript include. BotDetect Captcha library objects automatically use this library and construct the necessary objects.

BotDetect PHP CAPTCHA JavaScript BotDetect Prototype Reference

The main client-side BotDetect prototype (accessible on the whole page using BotDetect.<member_name>) exposes several global functions and constants.

Read the full BotDetect PHP Captcha client-side prototype API reference...

BotDetect PHP CAPTCHA JavaScript Captcha Object Reference

BotDetect client-side object instances expose all Captcha workflow functions and values, as well as several Captcha life-cycle events. These objects can be accessed in your client-side scripts:

  • using this.<member_name> within member functions and custom event handlers.

    E.g. if you register a function as a custom handler for the PreReloadImage BotDetect event, you can access the BotDetect client-side object within that function using this.

  • using <captchaId>.<member_name> on the page showing the Captcha.

    E.g. if you added Captcha protection to a PHP form using $FormCaptcha = new Captcha("FormCaptcha"), you can also use FormCaptcha as the client-side Captcha object identifier.

  • using the Captcha custom property of the textbox DOM element registered as the Captcha code input.

    E.g. if your server-side code specifies $FormCaptcha->UserInputID = "CaptchaCode", your client-side code can access Captcha functionality through the textbox element: document.getElementById("CaptchaCode").Captcha.

    Or, if you're using jQuery and (for example) added a "captchaVal" CSS class to the Captcha code textbox, you can use: $(".captchaVal").get(0).Captcha.

Read the full BotDetect PHP Captcha client-side object API reference...

JavaScript Captcha in ASP.NET

BotDetect ASP.NET CAPTCHA Client-Side API Reference

BotDetect ASP.NET Captcha client-side functionality is encapsulated in the BotDetectCaptcha.ashx?get=clientScriptInclude JavaScript include. BotDetect Captcha controls automatically use this library and construct the necessary objects.

BotDetect ASP.NET CAPTCHA JavaScript BotDetect Prototype Reference

The main client-side BotDetect prototype (accessible on the whole page using BotDetect.<member_name>) exposes several global functions and constants.

Read the full BotDetect ASP.NET Captcha client-side prototype API reference...

BotDetect ASP.NET CAPTCHA JavaScript Captcha Object Reference

BotDetect client-side object instances expose all Captcha workflow functions and values, as well as several Captcha life-cycle events. These objects can be accessed in your client-side scripts:

  • using this.<member_name> within member functions and custom event handlers.

    E.g. if you register a function as a custom handler for the PreReloadImage BotDetect event, you can access the BotDetect client-side object within that function using this.

  • using the Captcha custom property of the textbox DOM element registered as the Captcha code input.

    E.g. if your server-side code specifies SampleCaptcha.UserInputClientID = "CaptchaCodeTextBox", your client-side code can access Captcha functionality through the textbox element: document.getElementById("CaptchaCodeTextBox").Captcha.

    Or, if you're using jQuery and (for example) added a "captchaVal" CSS class to the Captcha code textbox, you can use: $(".captchaVal").get(0).Captcha.

Read the full BotDetect ASP.NET Captcha client-side object API reference...

JavaScript Captcha in ASP Classic

BotDetect ASP Classic CAPTCHA Client-Side API Reference

BotDetect ASP Classic Captcha client-side functionality is encapsulated in the BotDetect\Scripts.js JavaScript include. BotDetect Captcha library objects automatically use this library and construct the necessary objects.

BotDetect ASP Classic CAPTCHA JavaScript BotDetect Prototype Reference

The main client-side BotDetect prototype (accessible on the whole page using BotDetect.<member_name>) exposes several global functions and constants.

Read the full BotDetect ASP Classic Captcha client-side prototype API reference...

BotDetect ASP Classic CAPTCHA JavaScript Captcha Object Reference

BotDetect client-side object instances expose all Captcha workflow functions and values, as well as several Captcha life-cycle events. These objects can be accessed in your client-side scripts:

  • using this.<member_name> within member functions and custom event handlers.

    E.g. if you register a function as a custom handler for the PreReloadImage BotDetect event, you can access the BotDetect client-side object within that function using this.

  • using <captchaId>.<member_name> on the page showing the Captcha.

    E.g. if you added Captcha protection to an ASP Classic form using Dim FormCaptcha : Set FormCaptcha = (New Captcha)("FormCaptcha"), you can also use FormCaptcha as the client-side Captcha object identifier.

  • using the Captcha custom property of the textbox DOM element registered as the Captcha code input.

    E.g. if your server-side code specifies FormCaptcha.UserInputID = "CaptchaCode", your client-side code can access Captcha functionality through the textbox element: document.getElementById("CaptchaCode").Captcha.

    Or, if you're using jQuery and (for example) added a "captchaVal" CSS class to the Captcha code textbox, you can use: $(".captchaVal").get(0).Captcha.

Read the full BotDetect ASP Classic Captcha client-side object API reference...