Why is this JQuery click function not working? (Recaptcha verify button)

Question

I don't understand why it is not working.

• Open link https://www.google.com/recaptcha/api2/demo
• Inject jquery in this webpage
• Given ReCAPTCHA, select checkbox for “I'm not a robot” and choose photos
• Open Chrome console and run code:

$('iframe[src*="frame"]').contents().find('#recaptcha-verify-button').click();

I don't understand why click function (on verify button from js) not working (nothing happens, no error, nothing).

Edit: Inject jQuery:

if (typeof jQuery == 'undefined') {
    loadScript('https://code.jquery.com/jquery-1.11.3.min.js', jQueryReady);
}
function loadScript(url, callback){
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    if(!callback) callback = function(){};
    if(script.addEventListener) {
      script.addEventListener("load", callback, false); // IE9+, Chrome, Firefox
    } 
    else if(script.readyState) {
      script.onreadystatechange = callback;
    }
    head.appendChild(script);
}

Click on “I'm not a robot” working perfect:

$('iframe[src*="anchor"]').contents().find('.recaptcha-checkbox-checkmark').click();

Edit2:

//https://www.google.com/recaptcha/api2/demo
if (typeof jQuery == 'undefined') {
  loadScript('https://code.jquery.com/jquery-1.11.3.min.js', jQueryReady);
}

function loadScript(url, callback) {
  var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;
  if (!callback) callback = function() {};
  if (script.addEventListener) {
    script.addEventListener("load", callback, false); // IE9+, Chrome, Firefox
  } else if (script.readyState) {
    script.onreadystatechange = callback;
  }
  head.appendChild(script);
}

function jQueryReady() {
  //working perfect
  //$('iframe[src*="anchor"]').contents().find('.recaptcha-checkbox-checkmark').click();
  //not working
  $('iframe[src*="frame"]').contents().find('#recaptcha-verify-button').click();
}

Answer 1

As Jaromanda X mentions in the comments, it would obviously not work because the jQuery library isn't loaded on that page.

---

Following your edit, your code throws a security error:

if (typeof jQuery == 'undefined') {
  loadScript('https://code.jquery.com/jquery-1.11.3.min.js', jQueryReady);
}

function loadScript(url, callback) {
  var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = url;
  if (!callback) callback = function() {};
  if (script.addEventListener) {
    script.addEventListener("load", callback, false); // IE9+, Chrome, Firefox
  } else if (script.readyState) {
    script.onreadystatechange = callback;
  }
  head.appendChild(script);
}

function jQueryReady() {
  $('iframe[src*="anchor"]').contents().find('.recaptcha-checkbox-checkmark').click();
}

jquery-1.11.3.min.js:2 Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin " http://www.google.com " from accessing a frame with origin " https://www.google.com ". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.

The iframe is the secure https, whereas the actual demo is on a http location.