Question

我刚在WP Site联系表单上实现了reCaptcha。

它的工作原理如下：

使用$form.submit(function(e) { e.preventDefault(); return false; }
reCaptcha在表单之前动态插入。
如果reCaptcha的AJAX响应成功，请使用$form[0].submit();

HTML

<div id="ny_cf-3" class="footer-ny widget widget_ny_cf"><h2 class="widgettitle">Contact Us</h2>               

    <!-- contact form widget -->
    <p class="response"></p>
    <form method="post" enctype="multipart/form-data" class="ny-footer-contact-form" action="http://wpstage.leadscon.com/leadsconny/" data-submit="return fm_submit_onclick(1)" id="fm-form-1" name="fm-form-1">

        <div class="form-group" id="fm-item-text-53546749dea0d">
            <input type="text" name="text-53546749dea0d" id="text-53546749dea0d" style="width:px;" placeholder="Your name" class="form-control">
        </div>
        <div class="form-group" id="fm-item-text-5354674e4b90b">
            <input type="text" name="text-5354674e4b90b" id="text-5354674e4b90b" style="width:px;" placeholder="Email address" class="form-control">
        </div>
        <div class="form-group" id="fm-item-textarea-5354675009293">
            <textarea name="textarea-5354675009293" id="textarea-5354675009293" style="width:px;height:100px;" placeholder="Your message" class="form-control"></textarea>
        </div>
        <input type="email" class="teddybear" style="display:none">

        <button type="submit" id="fm_form_submit" name="fm_form_submit" class="btn btn-primary btn-block submit">Submit</button>
        <input type="hidden" name="fm_nonce" id="fm_nonce" value="1165f15ac2">
        <input type="hidden" name="fm_id" id="fm_id" value="1">
        <input type="hidden" name="fm_uniq_id" id="fm_uniq_id" value="fm-536b89c742833">
        <input type="hidden" name="fm_parent_post_id" id="fm_parent_post_id" value="4">
    </form>
    <!-- end cf widget -->
</div>

JavaScript代码：

var getRecaptcha = function($form, $frmResponseField) {

    $form.fadeOut();

    // Add the reCaptcha
    // ========================================================================
    var $recaptchaForm = $('<form class="recaptcha_form" style="display:none;"><p><strong>Spam verification (sorry):</strong></p><p class="response"></p><button class="btn btn-success btn-sm" type="submit">Submit</button></form>');
    var recaptcha_el = $('<div id="recaptcha_el"></div>').insertAfter($recaptchaForm.find('.response')).get(0);

    $recaptchaForm.insertBefore($form).slideDown();

    leadsCon.reCaptchaHTML().appendTo($(recaptcha_el));

    Recaptcha.create('6LdUZPASAAAAAGZI_z-qQ7988o0nGouHHtIsh4yX', recaptcha_el, {
        theme : 'custom',
        custom_theme_widget: 'recaptcha_widget',
        callback: Recaptcha.focus_response_field
    });

    // Bind submit action to check it
    $recaptchaForm.submit(function(e) {
        e.preventDefault();

        var challenge = Recaptcha.get_challenge();
        var response = Recaptcha.get_response();

        var $btn = $recaptchaForm.find('button[type="submit"]')
        var btnVal = $btn.html();
        var $responseField = $recaptchaForm.find('.response');

        var data = {
            action: 'verify_recaptcha',
            challenge: challenge,
            response: response
        };

        $btn.html("<i class='dashicons dashicons-clock'></i>");
        $responseField.text('');
        $.post(ajax_object.ajax_url, data, function(response) {

            if ( response.success == true ) {
                $responseField.removeClass('text-danger').addClass('text-success').html('<i class="icon-ok"></i>  You got it. One second...');

                // We're ok.. send.
                Recaptcha.destroy();
                $recaptchaForm.remove();

                $frmResponseField.removeClass('text-danger').addClass('text-success').html('<i class="icon-ok"></i>  Wait while we send your message.');

                $form[0].submit();

            } else {
                $responseField.removeClass('text-success').addClass('text-danger').html('<i class="dashicons dashicons-dismiss"></i>  Oops! Try again.');
                $btn.html(btnVal);

            }
        });

    });
};
$('.ny-footer-contact-form').submit(function (e) {
    e.preventDefault();

    var $form = $(this);
    var $responseField = $form.siblings('.response').removeClass('text-success text-danger').html('');

    var command = $form.attr('data-submit').match(/return (\w+)\((.+)\)/i);
    var fn = window[command[1]];

    var $honeypot = $form.find('input.teddybear');

    if ( fn(command[2]) && $honeypot.val() == '' ) {
        getRecaptcha($form, $responseField);

    } else {
        $responseField.removeClass('text-success').addClass('text-danger').html('<i class="dashicons dashicons-dismiss"></i>  There are missing fields.');
    }

    return false;
});

我的印象是，由于$form[0].submit()没有以任何方式进行过滤，并且没有从jQuery触发提交事件，因此垃圾邮件发送者正在使用它来提交表单并循环使用reCaptcha。

我该怎么办？

Answer 1

垃圾邮件发送者不会执行您的JavaScript代码。他们只会发布到正确的URL。因此，您无法在客户端上可靠地验证任何内容，您也必须在服务器上验证它。

Answer 2

Bots甚至可以不运行你的JS - 他们只是在原始html中找到表单并尝试充当提交表单的用户。您必须在服务器端验证reCaptcha值，请参阅此处：https://developers.google.com/recaptcha/docs/php

实施了reCaptcha ...仍然收到垃圾邮件

HTML

JavaScript代码：

2 个答案: