Amphtml: amp-recaptcha-input and SSR: ('TypeError: Cannot read property 'message' of null')?

[dylanfpaul]

What's the issue?

When clicking the submit button of a form that has an amp-recaptcha-input component, I get the error "TypeError: Cannot read property 'message' of null
at recaptcha.js:159".

Looking into the code of recaptcha.js where the error was being thrown, I noticed that the function it was inside of is taking the window object possibly as a parameter:

function actionTypeHandler(win, grecaptcha, data) {
  doesOriginDomainMatchIframeSrc(win, data).then(() => {
    const executePromise = grecaptcha.execute(sitekey, {
      action: data.action,
    });

    // .then() promise pollyfilled by recaptcha api script
    executePromise./*OK*/then(function(token) {
      iframeMessagingClient./*OK*/sendMessage('amp-recaptcha-token', dict({
        'id': data.id,
        'token': token,
      }));
    }, function(err) {
      user().error(TAG, '%s', err.message);
      iframeMessagingClient./*OK*/sendMessage('amp-recaptcha-error', dict({
        'id': data.id,
        'error': err.message,
      }));
    });
  }).catch(error => {
   // ERRORS OUT HERE ~~
    dev().error(TAG, '%s', error.message);
  });
}

Could this possibly because I am building and sending the AMP Documents via SSR? Everything seems to be configured according to documentation, however it does not append any recaptcha token to the POST request body hence the error.

Which AMP version is affected?

AMP Version 1904301721170

[torch2424]

@dylanfpaul

Thank you very much for filing the issue!

So this is quite interesting, as line 159 leads us to: https://github.com/ampproject/amphtml/blob/master/3p/recaptcha.js#L159

So this makes me think that perhaps it's on the reCAPTCHA end of things, and not our implementation. If I may ask, is the recaptcha script being loaded? For Example:

If you are server side rendering, and you are testing this, let's say, in a dev environment without internet access, than on submit time (when the end user can interact with the page and submits the form), it may have trouble making the call with the recaptcha script.

If you can give me more details on your SSR setup, it would be greatly appreciated! 😄

[torch2424]

@dylanfpaul Hello! Just wanted to follow up on this. Is this still an issue? Would love to understand the problem, and fix a bug if there is one 😄 If this is no longer a problem, I'll close the issue (it can always be re-opened), but I'll wait a bit longer for a response 👍

Thanks!

[luisfranco]

Hi @torch2424 actually I ran into the same bug, when running the following on console:

document.querySelector('amp-recaptcha-input').implementation_.getValue().then(token => {console.log('Got Token!');console.log(token);})

I get:

recaptcha.js:168 Uncaught (in promise) TypeError: Cannot read property 'message' of null
    at recaptcha.js:168

if I hover recaptcha.js I can see this URL:
https://raw.githubusercontent.com/ampproject/amphtml/1905211840370/3p/recaptcha.js which is returning a 404 (in my case)

Searching for api.js on Network:

Update:
In my case, I found this resource
https://www-alanburtonlaw-com.recaptcha.ampproject.net/1905211840370/recaptcha.html

if you check the console, you'll be able to see the error...

[torch2424]

@luisfranco

Hello! Thanks for chiming in!

recaptcha.js:168 Uncaught (in promise) TypeError: Cannot read property 'message' of null at recaptcha.js:168

So looking at the line mentioned in the error Seems like my error handler is messing up. I guess the error is not an object 🤔 Gonna look into this now.

if I hover recaptcha.js I can see this URL:
https://raw.githubusercontent.com/ampproject/amphtml/1905211840370/3p/recaptcha.js which is returning a 404 (in my case)

So I'm a little confused. From your screenshot, it looks like it returned a 200? And I think the URL may be correct, as that should not be the URL that the request is making. Especially since that would be coming from Github, and not the specified AMP Cache.

Update: In my case, I found this resource
https://www-alanburtonlaw-com.recaptcha.ampproject.net/1905211840370/recaptcha.html if you check the console, you'll be able to see the error...

So I went ahead and tested it out on the URL specified, and got a different error:

This error is expected, as the script is intended to be embedded on the page with an iframe with the name attribute. Thus, the script can't access window.name when loaded directly by a browser (where it should throw this error).

[torch2424]

@luisfranco

I opened #22456 to hopefully give better error messages that involve the reCAPTCHA script.

Looking forward to hearing some more context on your issue. That way I can solve it, or reach out to someone who can 😄

[luisfranco]

Hello @torch2424

Yeah, that's the strange thing, check this out:

On Network I get: 200ok and a different URL

But on console I see:

I haven't found where the githubusercontent.com... is coming from, but I'm checking that.

This is what I've done:

Also, I forgot to mention, they way I'm trying to implement reCAPTCHA is via Dev Tools > Sources > Overrides and modifying the HTML.

This is the URL:
https://www.alanburtonlaw.com/amp/

The overridden file includes:

Component:
<script async custom-element="amp-recaptcha-input" src="https://cdn.ampproject.org/v0/amp-recaptcha-input-0.1.js"></script>

Body
I removed the old captcha (amp-list) and included the amp-recaptcha-input

<amp-recaptcha-input layout="nodisplay" name="recaptcha_token" data-sitekey="6LdK8KQUAAAAAIVRBlPeokhO6X1GU5LNywY2uNvU" data-action="contact_form" class="i-amphtml-element i-amphtml-layout-nodisplay i-amphtml-async-input i-amphtml-layout" i-amphtml-layout="nodisplay" style="position: absolute; width: 1px; height: 1px; overflow: hidden; visibility: hidden;"></amp-recaptcha-input>

Then I reloaded the page, I see the changes, but when trying to check the token I get the error.

UPDATE
I added the message updates on https://github.com/ampproject/amphtml/pull/22456

UPDATE 2

No longer 404: https://raw.githubusercontent.com/ampproject/amphtml/1905222334000/3p/recaptcha.js but error message is still being returned.

recaptcha.js:168 Uncaught (in promise) TypeError: Cannot read property 'message' of null
    at recaptcha.js:168

[torch2424]

@luisfranco

"Also, I forgot to mention, they way I'm trying to implement reCAPTCHA is via Dev Tools > Sources > Overrides and modifying the HTML."

Hmm perhaps it's a race condition? Could you try just creating another document, and and loading that directly? 🤔

Also, after looking at recaptcha.js:168, that error block is given by the reCAPTCHA script itself. Are you sure you have the correct sitekey and things? Perhaps you didn't add your domain correctly in the dashboard? 🤔

Thanks for working with me on this! 😄

[torch2424]

@luisfranco

Also, after looking at recaptcha.js:168, that error block is given by the reCAPTCHA script itself. Are you sure you have the correct sitekey and things? Perhaps you didn't add your domain correctly in the dashboard? 🤔

So I did what I mentioned, and went ahead and "created another document, and and loaded that directly". And I got the exact same error as you.

But, I went ahead and used the sitekey found on amp.dev and then it worked. So I think something is wrong with your sitekey? 🤔

UPDATE:

And here's a video of it working after swapping the sitekey 😄

[luisfranco]

Strange, not sure if I'm missing something, I'm using the settings page: 6LdK8KQUAAAAAIVRBlPeokhO6X1GU5LNywY2uNvU

I was able to replicate that it works when using the amp.dev sitekey.

Unrelated
By the way, yesterday I submitted this PR: https://github.com/ampproject/docs/pull/2156 and it was merged, but I still see the error there amp.dev

UPDATE:
I unchecked Verify the origin of reCAPTCHA solutions and it's working now :) It says it's insecure to use that, and I wonder why enabled it's not working if the origin is indeed alanburtonlaw.com.

[torch2424]

@luisfranco

By the way, yesterday I submitted this PR: ampproject/docs#2156 and it was merged, but I still see the error there amp.dev

It'll probably take a couple of days for amp.dev to build and pull in your changes. But it will go out soon I am sure 😄 cc @sebastianbenz

I unchecked Verify the origin of reCAPTCHA solutions and it's working now :) It says it's insecure to use that, and I wonder why enabled it's not working if the origin is indeed alanburtonlaw.com.

Glad you got it working! But that is odd. I'll go ahead and reach out to the reCAPTCHA team, and see if I can get something worked out / an explanation. Thank you for trying that out! 😄

@dylanfpaul / @luisfranco

I'll go ahead and close this out since there hasn't been a response, and the other issue is solved. But feel free to continue commenting here, and mention me. Would love to help where I can! Thanks! 😄

[torch2424]

@luisfranco Got a response from the reCAPTCHA team about your domain. We think it may be something with not specifying the www. subdomain, or not having the base domain, in your list of domains.

AMP treats www. and the base domain as different domains, and it's something we need to document (better). So if you fix that, you should be able to re-check the Verify the origin of reCAPTCHA solutions. Thank you! 😄

EDIT:

I opened #22478 for this 😄

[luisfranco]

@torch2424

Neat!! Per your notes, I added the www version, enabled Verify the origin of reCAPTCHA solutions saved the settings, waited a few minutes (I noticed it takes a bit of time for the changes to take effect), and works as expected 👍

I'll complete the setup and once we push these changes live I'll let you guys know to show off 😃

oh, I used alanburtonlaw.com alone per the documentation on:

For example, if you specify the API key pair to yoursite.com, the following table shows whether or not reCAPTCHA will work for the domain and its subdomain variations. If you specify other domain names or TLDs (for example: anothersite.com, yoursite.net), the same reCAPTCHA conditions apply.

Source: https://developers.google.com/recaptcha/docs/domain_validation

Thanks for the help!! 👏

[websitedesignby]

Even the example on am.dev throws the error I was getting:

log.js:244 [RECAPTCHA] There was an error running execute() on the reCAPTCHA script.

https://amp.dev/documentation/examples/components/amp-recaptcha-input/

Adding subdomains to all domains solved it.

I would have thought it was a bug unless I saw it working on this example:

https://torch2424-amp-recaptcha-example.glitch.me/#development=1

[sebastianbenz]

I fixed the sample on amp.dev as well. In our case we simply forgot to enable the AMP API 🤦‍♂️.