Captcha FAQ

How to find out which version of BotDetect ASP.NET CAPTCHA I currently use on backend?

Here are some following ways that can help you:

  • Right-click the assembly, click properties, then click the Details tab. The property "Product version" and "File version" have the assembly version formatted as major.minor.build#.revision#.
  • If you use BotDetect from the GAC, locate to the path C:\windows\assembly. This will bring up a folder that shows installed BotDetect component. Right-click on the assembly and check its properties.

How to find out which version of BotDetect Java CAPTCHA I currently use on backend?

Use the following method to get version of BotDetect Java CAPTCHA you run:

SimpleCaptcha.getLibInfo();

How to find out which version of BotDetect PHP CAPTCHA I currently use on backend?

Use the following method to get version of BotDetect PHP CAPTCHA you run:

echo SimpleCaptcha::LibInfo();

My app's frontend and my app's backend are running on different hosts. I am getting the following error:

  • In Chrome:
Access to XMLHttpRequest at 'http://localhost:5000/simple-captcha-endpoint...' 
	from origin 'http://localhost:4200' has been blocked by CORS policy:
	No 'Access-Control-Allow-Origin' header is present on the requested resource.
  • In Firefox:
Cross-Origin Request Blocked: 
	The Same Origin Policy disallows reading the remote resource at 
	http://localhost:5000/simple-captcha-endpoint... 
	(Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
  • In Safari:
Origin http://localhost:4200 is not allowed by Access-Control-Allow-Origin.
	Failed to load resource: Origin http://localhost:4200 
	is not allowed by Access-Control-Allow-Origin.
	XMLHttpRequest cannot load http://localhost:5000/simple-captcha-endpoint... 
	due to access control checks.

How to resolve the issue?

Add the highlighted lines after the closing </captchaStyles> tag in your backend app's botdetect.xml configuration file:

...
</captchaStyles>
<captchaEndpoint>
    <accessControlAllowOriginHeaderEnabled>true</accessControlAllowOriginHeaderEnabled>
    <accessControlAllowOriginHeaderValue>http://localhost:4200</accessControlAllowOriginHeaderValue>
</captchaEndpoint>

We have JavaScript-based frontend (jQuery, Angular, React, ...) and we would like to set the locale dynamically on a client side rather than hard coding it on the server side. How to read the locale from our request parameter and change the Captcha locale dynamically?

When you need to support different locales in the same form, you'll need to define the new Captcha style (in botdetect.xml) for each supported locale.

When visitor changes locale on a client side, you need to request the new Captcha instance based on the new (locale-specific) Captcha style from your back-end, and load that newly generated Captcha image on a client side.

Here is the example of botdetect.xml configuration file with locale-specific styles:

<?xml version="1.0" encoding="UTF-8"?>
<botdetect>

  <captchaStyles>
    <captchaStyle>
      <name>loginCaptcha_en</name>
      <userInputID>yourFirstCaptchaUserInput</userInputID>
      <locale>en</locale>
    </captchaStyle>

    <captchaStyle>
       <name>loginCaptcha_ja</name>
       <userInputID>yourFirstCaptchaUserInput</userInputID>
       <locale>ja</locale>
    </captchaStyle>

    <captchaStyle>
       <name>loginCaptcha_ko</name>
       <userInputID>yourFirstCaptchaUserInput</userInputID>
       <locale>ko</locale>
    </captchaStyle>

    <captchaStyle>
       <name>loginCaptcha_zh_TW</name>
       <userInputID>yourFirstCaptchaUserInput</userInputID>
       <locale>zh-cmn-Hant-TW</locale>
    </captchaStyle>
  </captchaStyles>

</botdetect>

Examples of usage in various JavaScript frontends:

1. jQuery

<script type="text/javascript">
    var captchaLocaleStyleName = 'loginCaptcha_en';
    var captchaDirectiveElement = 
      '<div id="botdetect-captcha" data-captchastylename="'
      + captchaLocaleStyleName + '"></div>';
    document.write(captchaDirectiveElement);
</script>
<input id="yourFirstCaptchaUserInput" type="text"/> 

2. Angular

const captchaLocaleStyleName = 'loginCaptcha_en';
<botdetect-captcha captchaStyleName={{captchaLocaleStyleName}}></botdetect-captcha>
<input id="yourFirstCaptchaUserInput" 
       name="yourFirstCaptchaUserInput" 
       ngModel 
       #yourFirstCaptchaUserInput="ngModel"  
       type="text" > 

3. AngularJS

$scope.captchaLocaleStyleName = 'loginCaptcha_en';
<botdetect-captcha captchaStyleName={{captchaLocaleStyleName}}></botdetect-captcha>
<input id="yourFirstCaptchaUserInput" 
    type="text" 
    name="yourFirstCaptchaUserInput" 
    ng-model="yourFirstCaptchaUserInput" > 

4. React

const captchaLocaleStyleName = 'loginCaptcha_en';
<Captcha 
    captchaStyleName={captchaLocaleStyleName}
    ref={(captcha) => {this.captcha = captcha}} 
/>
<input id="yourFirstCaptchaUserInput" type="text" /> 

We noticed a strange behavior in Internet Explorer. Whenever we press the speak captcha button, it reloads the captcha first then plays the audio of the new captcha. This does not occur in Firefox or Chrome.

It is not a bug but expected and built in default behavior.

Once requested audio is cached on a client side (because of performance) for future replay. If caching fails in particular brand of browser (or due to custom configuration) then the brand new captcha (with a different code) is generated. That is exactly what happens in IE because audio cannot be cached on a client side with it.

You may ask yourself why different code but not the same? Because of security reasons -- we don't want to play different audio files for the same captcha code. Different audio versions of the same challenge would provide an attacker with an opportunity to try to guess the same char repeatedly until he can have a highly confident guess.

Please Note

This document is not up to date. We are working on fixing it. Your Simple API integration efforts should start with one of the following four step-by-step integration guides: Angular Captcha, AngularJS Captcha, jQuery Captcha, React Captcha.