Aquí hay un código de ejemplo de Google sobre cómo inicializar de forma segura su servicio de recaptcha 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> Como puede ver, grecaptcha.ready es una función y nuevamente verifica if(typeof grecaptcha === 'undefined') . Pero, ¿cómo puede grecaptcha no estar undefined en el momento en que se llama a grecaptcha.ready ? Según tengo entendido, grecaptcha ya se ha inicializado como una propiedad del objeto global y su valor es {} , por lo tanto, su tipo debe ser "object"
Tendría que ser un código en otro lugar, pero claro, es un objeto global, por lo que un actor malicioso podría sobrescribirlo, por ejemplo, podría tener algo como:
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)Creo que el código está mal: https://jsfiddle.net/657b1gso/
Reportado: https://github.com/google/recaptcha/issues/485
y funciona con algunas pequeñas modificaciones: 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>