How to Reload ReCaptcha using JavaScript?

189
votes

I have a signup form with AJAX so that I want to refresh Recaptcha image anytime an error is occured (i.e. username already in use).

I am looking for a code compatible with ReCaptcha to reload it using JavaScript.

8
javascriptrecaptcha
Don't bother. Why change the CAPTCHA if the username is taken? - SLaks
@SLaks: probably because he first checks captcha and then checks the user - and once captcha is used, it is no longer valid. Doing this the other way around the malicious user can easily flaw the server and get the list of all users using brute force without being bothered with captcha. - Tomasz Nurkiewicz
@TomaszNurkiewicz UPDATE: the malicious user won't be able to submit the same re-captcha for validation more than once. So no, bruteforce is not possible here. The reason for refreshing the captcha is to simply allow the user to enter it again. - Tony Sepia
I believe a skilled attacker could exploit timing attacks to find what data is wrong depending on where the bot validation is; I prefer to keep mine as the first check and immediately reject anything if they fail, also helps reduce the load on my server so I'm not doing DB queries when they will be rejected anyways - Steve Byrne

8 Answers

46
votes

Important: Version 1.0 of the reCAPTCHA API is no longer supported. Please upgrade to Version 2.0.

You can use grecaptcha.reset(); to reset the captcha.

Source: https://developers.google.com/recaptcha/docs/display#js_api

392
votes

For reCaptcha v2, use:

grecaptcha.reset();

If you're using reCaptcha v1 (probably not): 

Recaptcha.reload();

This will do if there is an already loaded Recaptcha on the window.

(Updated based on @SebiH's comment below.)

63
votes

If you are using version 1

Recaptcha.reload();

If you are using version 2

grecaptcha.reset();
11
votes
grecaptcha.reset(opt_widget_id)

Resets the reCAPTCHA widget. An optional widget id can be passed, otherwise the function resets the first widget created. (from Google's web page)

8
votes

Or you could just simulate a click on the refresh button

// If recaptcha object exists, refresh it
    if (typeof Recaptcha != "undefined") {
      jQuery('#recaptcha_reload').click();
    }
7
votes

Try this 

<script type="text/javascript" src="//www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
          function showRecaptcha() {
            Recaptcha.create("YOURPUBLICKEY", 'captchadiv', {
              theme: 'red',
              callback: Recaptcha.focus_response_field
            });
          }
 </script>

<div id="captchadiv"></div>

If you calll showRecaptcha the captchadiv will be populated with a new recaptcha instance.

4
votes

For AngularJS users:

$window.grecaptcha.reset();
1
votes

if you are using new recaptcha 2.0 use this: for code behind:

ScriptManager.RegisterStartupScript(this, this.GetType(), "CaptchaReload", "$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});", true);

for simple javascript

<script>$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});</script>