CODEWITHSUNDEEP
recaptcha
Ninjanoel
Ninjanoel

Reputation: 2914

Combining reCAPTCHA v2 and v3

I'm keen to use reCAPTCHA v3 for logins and stuff, but I'm unsure what to do with a 'low rating', it doesn't feel safe to deny access with no way for the user to move forward. What feels like a more complete solution would be to combine the "rating" from v3 with a puzzle challenge from v2 if the score is too low. How are other people approaching this issue?

Also, it appears that v3's grecaptcha.execute returns a similar result to v2, that is too say that it's not returning a rating, just a TOKEN which is verified in a similar way to v2?

I've code i found to demonstrate that they can both be used in the same HTML...

<!-- https://github.com/google/recaptcha/issues/279 -->
<script src="https://www.google.com/recaptcha/api.js?onload=v2_onload"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=v3_onload&render=V3_SITE_KEY"></script>
<script src='https://www.google.com/recaptcha/api.js?render=V3_SITE_KEY'></script>
<div class="g-recaptcha" data-size="invisible" data-sitekey="V2_SITE_KEY" data-callback="v2_callback"></div>
<script type="text/javascript">
    function v2_onload() { console.log('v2 loaded'); }
    function v3_onload() { console.log('v3 loaded'); }
    function v2_callback(token) { console.log('v2 token: ' + token); }
    function v3_callback(token, score) { console.log('v3 token: ' + token +    " ----- " + score); }

    // call these manually
    function test_v2() { grecaptcha.execute(); }
    function test_v3() { 
    grecaptcha.execute('V3_SITE_KEY' , {action:'thisIsATest' }).then(v3_callback); 
}

I have concerns then that if v3 requires sever-side validation, in order to implement v2 as well, either a page reload to invoke v2 (when server-side says "low rating" then reload and enable v2) OR v3 sever-side validation could be done via an ajax call, but that feels like something that can be inspected and manipulated by a bot (grab ajax response, change 'no' to 'yes' and then have the bot call the 'callback' function itself to gain access).

Any help or suggestions would be appreciated.

Upvotes: 10

Views: 10554

Answers (2)

simhumileco
simhumileco

Reputation: 34623

It looks like there is an answer to this question on the official Frequently Asked Questions website of reCAPTCHA.

Can I run reCAPTCHA v2 and v3 on the same page?

To do this, load the v3 site key as documented, and then explicitly render v2 using grecaptcha.render.

<html>
  <head>
    <title>reCAPTCHA demo: Running both v2 and v3</title>
    <script src="https://www.google.com/recaptcha/api.js?render=v3_site_key"></script>
    <script>
      grecaptcha.ready(() => {
        grecaptcha.render('html_element', {
           'sitekey' : 'v2_site_key'
        });
      });
    </script>
    <script>
      function onSubmit() {
        grecaptcha.ready(() => {
            grecaptcha.execute('v3_site_key', {action: 'homepage'}).then((token) => {
               ...
            });
        });
      }
    </script>
  </head>
</html>

Upvotes: 5

Agile Noob
Agile Noob

Reputation: 2335

Wouldn't it be simplest to just send the token with your form post and double check it server side? I know you're still possibly allowing a bot to post data into your system, but a bot that can sneak by google should be pretty rare. And the first thing your sever side logic should do is verify the token, which can't easily be faked. That said in my initial analysis of google V3(10K requests) the bot detection was solidly binary, in that all the scores were above or below .5 . Google in their documentation recommends different strategies for how to deal with suspicious traffic based on the scenario.

https://developers.google.com/recaptcha/docs/v3.

Upvotes: 3

Related Questions