ReCaptcha error: Failed to load script

[birdy90]

Hello! Using recaptcha module on my project, and everything seems to work fine. But my sentry shows me ReCaptcha error: Failed to load script error from time to time. That means some users having the issue, though I can't reproduce it. Maybe there's a way I can see the reason script loading has failed? Browsing the plugin.js code didn't give me the answer

This is my config

['@nuxtjs/recaptcha',
  {
    hideBadge: true,
    language: 'ru',
    siteKey: '<my_site_key>',
    version: 2,
    size: 'invisible'
  }
],

And this is how I use it:

<recaptcha
  @error="token = ''"
  @success="token = $event"
  @expired="token = ''"
/>

...

onSubmit() {
  try {
    this.token = await this.$recaptcha.getResponse();
    await this.$recaptcha.reset();
  } catch (e) {
    return false;
  }
  ...
},

[piruo7]

Add the following in nuxt.config.js

head: { ... script: [ { src: 'https://www.google.com/recaptcha/api.js', async: true, defer: true } ] }

[birdy90]

Hm.. I tried your code. After that my auth stopped working. Just nothing happens after clicking 'Login' button. Seems like magic, cause I didn't change anything else except this script in nuxt.config.js.

But, it seems to be more magic here, because it strart working if I set src attribute for script as https://www.recaptcha.net/recaptcha/api.js (found this link in the last version of plugin, v1.0.4)

Unfortunately, I didn't test it for my primary problem. And.. why these links can behave so different though they return almost the same code? And why was it changed in plugin anyway?

[mvrlin]

@birdy90 Maybe I can add a customSrc option, what do you think?

[birdy90]

I'm not sure it's a good idea. I suppose recaptcha is not working with multiple links, so it seems to be strange: what else link can I put there if it is not an official one? but you are free to do as you want, of couse :) maybe it would be better to have retry method, and throw error only if several retries failed

[mvrlin]

I'm not sure it's a good idea. I suppose recaptcha is not working with multiple links, so it seems to be strange: what else link can I put there if it is not an official one? but you are free to do as you want, of couse :) maybe it would be better to have retry method, and throw error only if several retries failed

There was a PR a while ago for using recaptcha.net instead of the google one because of the region problems 🤷‍♂️

[mikeCrafted]

I am also having problems loading the script. On localhost it works very well, including my remote backend api. But as soon as I push this to production, I get an error instantiating the captcha: The resource from “https://www.recaptcha.net/recaptcha/enterprise.js?render=<my-key>&render=<my-key>” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff). Here is my nuxt.config.js

recaptcha: {
        siteKey: process.env.RECAPTCHA_SITE_KEY,
        hideBadge: true,
        mode: 'enterprise',
        version: 3
    },

What could be the reason that if fails on production server? Apparently the header X-Content-Type-Options: nosniff is set and google returns a wrong content type? Did anyone else experience this issue? I have cloudflare protecting my domain, can I turn off the headers for this specific request, as I assume we can trust Google?