Can type of defined variable be undefined in javascript?

Question

Here is an example code from Google about how to safely initialize its recaptcha service https://developers.google.com/recaptcha/docs/loading

<script async src="https://www.google.com/recaptcha/api.js"></script>

<script>    
  if(typeof grecaptcha === 'undefined') {
    grecaptcha = {};
  }

  grecaptcha.ready = function(cb){
    //How is it possible for grecaptcha to be undefined here?
    if(typeof grecaptcha === 'undefined') {
      
      const c = '___grecaptcha_cfg';
      window[c] = window[c] || {};
      (window[c]['fns'] = window[c]['fns']||[]).push(cb);
    } else {
      cb();
    }
  }

  grecaptcha.ready(function(){
    grecaptcha.render("container", {
      sitekey: "ABC-123"
    });
  });
</script>

As you can see grecaptcha.ready is a function and it again checks if(typeof grecaptcha === 'undefined'). But how can grecaptcha be undefined at the time when grecaptcha.ready is called? As I understand grecaptcha has already been initialized as a property of global object and it's value is {} hence it's type should be "object"

Naturally, it doesn't make a whole lot of sense but it would seem like a huge oversight on Google's part if it was wrong. My guess is it's going to be related to something happening within Google's api.js and how it works with the grecaptcha variable. It's possible right after the ready function is triggered, their code does something with it, but I honestly can't say for certain. — EssXTee
– EssXTee, Commented Dec 13, 2021 at 20:46
Well, they mention to prevent race conditions on that page, so my best guess is that it could be that the global variable grecaptcha gets re-initialized at a certain point of time. So this must be done on purpose to make it rock solid and therefore not a mistake. — Alex Demidoff
– Alex Demidoff, Commented Dec 13, 2021 at 20:59

Simon Benjámin · Accepted Answer · 2022-02-17 17:27:58Z

I think the code is wrong: https://jsfiddle.net/657b1gso/

Reported: https://github.com/google/recaptcha/issues/485

and works with a few small modifications: https://jsfiddle.net/p6ubwLme/

<script async src="https://www.google.com/recaptcha/api.js"></script>
<script>
  // How this code snippet works:
  // This logic overwrites the default behavior of `grecaptcha.ready()` to
  // ensure that it can be safely called at any time. When `grecaptcha.ready()`
  // is called before reCAPTCHA is loaded, the callback function that is passed
  // by `grecaptcha.ready()` is enqueued for execution after reCAPTCHA is
  // loaded.
  if(typeof grecaptcha === 'undefined') {
    grecaptcha = {};
  }
  grecaptcha.asyncready = function(cb){
    if(typeof grecaptcha.render === 'undefined') {
      // window.__grecaptcha_cfg is a global variable that stores reCAPTCHA's
      // configuration. By default, any functions listed in its 'fns' property
      // are automatically executed when reCAPTCHA loads.
      const c = '___grecaptcha_cfg';
      window[c] = window[c] || {};
      (window[c]['fns'] = window[c]['fns']||[]).push(cb);
    } else {
      cb();
    }
  }

  // Usage
  grecaptcha.asyncready(function(){
    grecaptcha.render("container", {
      sitekey: "ABC-123"
    });
  });
</script>
<div id="container">

</div>

dave · Accepted Answer · 2021-12-13 20:50:57Z

It'd have to be code elsewhere, but sure, it's a global object, so a malicious actor could potentially overwrite it, e.g. you could have something like:

var grecaptcha = { 
     start() {
         var that = this;
         return new Promise((resolve, reject) => {
             setTimeout(() => {
                 if (that.ready) {
                     that.ready(that)
                 }
                 resolve(true);
             }, 5000);
             let remaining = 4;
             let interval = setInterval(() => {
                 console.log(remaining--);
                 if (remaining == 0) {
                     clearInterval(interval);
                 }
             }, 1000);
         });
     }
 
};

grecaptcha.start().then(() => console.log('But we still do stuff with it'));

if(typeof grecaptcha === 'undefined') {
    grecaptcha = {};
}

grecaptcha.ready = function(cb){
    console.log(typeof grecaptcha);
}

setTimeout(() => grecaptcha = undefined, 1000)

Collectives™ on Stack Overflow

Can type of defined variable be undefined in javascript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related