Question

我有以下代码。

提交表单时，如果分数大于0.8，我将不执行reCaptcha，也不会提交表单。我在控制台中没有任何错误，无论我尝试如何，表单都不会提交。但是它确实可以到达

console.log("Success ! Submitting data");

所以我知道代码在那之前一直在工作。

<script src="https://www.google.com/recaptcha/api.js?render=KEYXXX"></script>
<script>
  $(function(){
    grecaptcha.ready(function () {
        $( "#EnquiryForm" ).submit(function( e ) {
          e.preventDefault();
          var $this = $(this);
          grecaptcha.execute('KEYXXX', { action: 'contact' }).then(function (token) {

             fetch('https://SOMEDOMAIN.com/process.php?&recaptcha_response='+token).then(function(response) {
                 response.json().then(function(data) {
                    if (data.success && (data.score > 0.8)) {
                        console.log("Success ! Submitting data");

                        // HOW DO I SUBMIT THE FORM HERE ?
                        // I HAVE TRIED THE FOLLOWING 

                        // $this.submit();
                        // $this.unbind('submit').submit();
                        // $( "#EnquiryForm" ).submit();
                        // $(e.target).submit();
                    }
                  }).catch(function(){
                     console.log("Captcha error, no response");
                  });
              });

          });
    });
    });
  });
</script>

请确保后端脚本可以正常运行。

我刚刚尝试过e.target.submit()，现在收到一条错误消息： Uncaught (in promise) TypeError: e.target.submit is not a function

如果那可以帮助任何人

Answer 1

您仍然应该能够使用form.submit()（本机DOM方法而不是jQuery方法）提交表单。

因此，请尝试使用$(e.target).submit();而不是e.target.submit();。

Answer 2

您应该一次完成所有操作，而不是进行两个不同的ajax调用。通过单独提交验证码令牌，您仍然可以使提交表单的端点不受保护。

$(function() {
  grecaptcha.ready(function() {
    $("#EnquiryForm").submit(function(e) {
      e.preventDefault();
      var $this = $(this);
      grecaptcha.execute('KEYXXX', {
        action: 'contact'
      }).then(function(token) {

        var url = new URL('https://SOMEDOMAIN.com/process.php');

        var params = {
            recaptcha_response: token,

            // sample parameters
            name: $("#name").val(),
            date: $("#date").val()
        };

        Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))

        fetch(url).then(function(response) {
          response.json().then(function(data) {
            if (data.success && (data.score > 0.8)) {
              console.log("Success ! Submitting data");
              // $this.submit();
              // $this.unbind('submit').submit();
              // $( "#EnquiryForm" ).submit();
              // $(e.target).submit();
            }
          }).catch(function() {
            console.log("Captcha error, no response");
          });
        });

      });
    });
  });
});

或者，如果您不通过ajax提交，则应将该令牌放入隐藏的表单输入中，并与表单一起处理。通过单独检查验证码，您可以使攻击者完全跳过验证码，这完全破坏了验证码的目的。

使用jQuery为Google reCaptcha v3提交表单

2 个答案: