reCaptcha blocked frame (SOP?)

Question

Got a Typo3 Installation where i've added Googles reCaptcha to a Form.

Did that already successful on other Typo3 installations, but this time, i get the blocked frame error in the Browser.

Blocked frame with origin "https://www.google.com" from accessing a cross-origin frame.
  at um.f.hc (https://www.gstatic.com/recaptcha/api2/....)

This happens two times and after that, i get this massage in the frontend.

Please upgrade to a supported browser to get a reCAPTCHA challenge.

Alternatively if you think you are getting this page in error, please check your internet connection and reload.

Why is this happening to me?

This is happening in all Browsers i checked (Chrome, FF, IE11).

To include the reCaptcha i've adde the following to the Template:

  <script src="//www.google.com/recaptcha/api.js" async defer></script>
  <script type="text/javascript">
    var captchaCallback = function() { document.getElementById("captchaResponse").value = document.getElementById("g-recaptcha-response").value }
    var onSuccess = function(response) {
      var errorDivs = document.getElementsByClassName("recaptcha-error");
      if (errorDivs.length) {
        errorDivs[0].className = "";
      }
      var errorMsgs = document.getElementsByClassName("recaptcha-error-message");
      if (errorMsgs.length) {
        errorMsgs[0].parentNode.removeChild(errorMsgs[0]);
      }
      captchaCallback();
      document.getElementById("fhcallback").submit();
    };
  </script>
  <input type="hidden" id="captchaResponse" name="fhcb[recaptcha]" value="" />
  <div id="recaptcha-demo" class="g-recaptcha" data-sitekey="[MYPUBLICKEY]" data-callback="onSuccess" data-bind="inp-submit"></div>
  <button class="orderButton bold" id="inp-submit" ###submit_nextStep###>Senden</button>

And in PHP:

$secret = '[MYSECRETKEY]';
$url = 'https://www.google.com/recaptcha/api/siteverify';
$apiResponse = json_decode(\TYPO3\CMS\Core\Utility\GeneralUtility::getUrl($url.'?secret='.$secret.'&response='.$this->gp[$this->formFieldName]), true);
if($apiResponse['success'] == FALSE) {
    $checkFailed = $this->getCheckFailed();    
}

The Form is not visible on pageload. Its a slide in at the right side of the page, after clicking its toggle element.

I'am out of ideas and the client is bugging me already.

Answer 1

I found the Issue. On this Installation, the JavaScript Library Mootools was included.

After removing the include of Mootools, no further problems with blocked Frames occurred.