Recaptcha - Uncaught DOMException: заблокирован доступ к кросс-исходному фрейму - PullRequest
Новая
       83

Recaptcha - Uncaught DOMException: заблокирован доступ к кросс-исходному фрейму

0 голосов
/ 05 ноября 2018

Я динамически внедрил невидимую recaptcha в веб-форму. Все отлично работает За исключением одного: приведенное ниже сообщение об ошибке появляется в Chrome каждый раз:

Uncaught DOMException: заблокирован фрейм с источником "https://www.google.com" от доступа к фрейму перекрестного происхождения.

Это сообщение об ошибке появляется

Uncaught DOMException: заблокирован кадр с источником "https://www.google.com" от доступа к фрейму перекрестного происхождения.

каждый раз, когда выполняется функция .render (): 

recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, inheritFromDataAttr);

Большое спасибо за ваши идеи и советы: o)

Laurent

Javascript код: 

   window.onScriptLoad = function () {

        var htmlEl = document.querySelector('.g-recaptcha');

        var captchaOptions = {

          'sitekey': 'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
          'size': 'invisible',
          'badge': 'inline',
          callback: window.onUserVerified

         };

        var inheritFromDataAttr = true;

        recaptchaId = window.grecaptcha.render(htmlEl, captchaOptions, inheritFromDataAttr);

    };

    window.onUserVerified = function (token) {

      $.ajax({

            url: 'process.php',
            type: 'post',
            dataType: 'json',
            data : {

                'lastname'   : $("#lastnameField").val(),
                'firstname'  : $("#firstnameField").val(),
                'city'       : $("#cityField").val(),
                'postalCode' : $("#postalcodeField").val(),
                'g-recaptcha-response' : token

            },

            success:function(data) {

                // informs user that form has been submitted
                // and processed

                },

            error: function(xhr, textStatus, error){

                // informs user that there was a problem
                // processing form on server side

           }

       });

    };


    function onSubmitBtnClick () {

      window.grecaptcha.execute;

    }

HTML код: 

<html>

  <head>

    <script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onScriptLoad" async defer></script>    

    <script type="text/javascript" src="js/petition.js"></script>

    ...

  </head>

  <body>

     <form id="petitionForm" onsubmit="return false;">

         <input id="lastnameField" type="text" name="lastname" placeholder="Lastname" required value="Doe">
         <input id="firstnameField" type="text" name="firstname" placeholder="Firstname" required value="John">
         <input id="postalcodeField" type="text" name="postalCode" placeholder="Postal Code" required value="ABCDEF">
         <input id="cityField" type="text" name="city" placeholder="City" value="Oslo">
         ....

         <input type="submit" name="login" class="g-2" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxx" id="signButton" data-callback='' value="Signer" onclick="onSubmitBtnClick();">

         <div class="g-recaptcha" id="recaptchaElement" style="align-content: center"></div>

       </form>

       ...

  </body>
</html>
...