recaptcha v3 front end .execute() returning strange result with )]}' ["rresp","..."]

Question

This is virtually identical to recaptcha v3 frontend returning strange, emptyish (invalid?) result with )]}'

On the recaptcha settings page - https://www.google.com/recaptcha/admin/site/.../settings I have

1. chosen recaptcha v3
2. set up domains, etc.
3. generated keys

The only differences I can see between the previous stackoverflow question and my case now are:

1. I am not using localhost,
2. my action is already all alpha characters, and
3. I am still getting that strange response

In that previous question apparently the poster changed the action name and all was well. I've fiddled around with the action name and it hasn't changed anything. I'll show the response details below. Before I do that, here is an extract of the relevant code from my page:

    <script src="https://www.google.com/recaptcha/api.js?render=MYKEY"></script>
    <script>
      grecaptcha.ready(function () {
        grecaptcha.execute('MYKEY', {action: 'contactpage'});
      });
    <script>

And here is what happens when I run it. The results are the same in Chrome and Firefox. In the browser console I see this response:

    XHR POST https://www.google.com/recaptcha/api2/reload?k=*MYKEY*
    SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
    Response Payload    

    )]}'
    ["rresp"," ... (and much more)... ]

The recaptcha api url in the script tag is clearly different from the url shown in the console, which is fine by me. Obviously a lot is going on under the covers.

Crosswise

Did you solved this? I'm having exactly the same problem. – Homorganic

Answer 1

Actually, the )]}' ["rresp" thing is normal. I don't know why, but that's how the developer tools of browsers (Firefox and Chrome) show the raw response from google recaptcha get token service.

But that's not a problem. The full JS code:

            // call the recaptcha service to get a token
            grecaptcha.ready(function() {
                grecaptcha.execute('SITE_KEY', {action:'action_name'})
                        .then(function(token) 
                {
                    console.log(token);
                });    
            });

will return the TOKEN correctly (which is only the string part right after rresp, meaning ["rresp","THIS_STRING",....]). Now you can add this token to a hidden field in the form, and validate it on the server side after submit (for validation of the token and getting the actual response with success/fail and human/bot score from 0 to 1, you need to call another recaptcha service from google, on the server side, like here: https://gist.github.com/josephilipraja/3ec08844e9b3ec5acb9f044e3c4ec387 )

Quizmaster