蜜罐不过滤机器人

Question

我收到了来自我网站表单的垃圾邮件抨击。所以我在两种形式上都设置了蜜罐，但似乎只有一个在工作。在我收到蜜罐后的垃圾邮件提交中，蜜罐字段全部填写...

这是一个静态站点（将信息存储在 yaml 文件中）。表单使用 formspree。

这是处理表单的 js - 蜜罐代码在提交函数中：

window.addEventListener("DOMContentLoaded", function() {
// get the form elements defined in your form HTML above

 var forms = document.getElementsByClassName("contact-form");

 Array.from(forms).forEach(function(form) {
 var status = $(form).find(".contact-form-status")[0];

// Success and Error functions for after the form is submitted

function success() {
  form.reset();
  status.innerHTML = "Thanks!";
}

function error() {
  status.innerHTML = "Fill out all fields!";
}

// handle the form submission event

form.addEventListener("submit", function(ev) {
  ev.preventDefault();
  var data  = new FormData(form),
      honey = $(form).find('.honey'),
      bot   = false;
  // weed out the bots
  honey.each(function(){
    var input = $(this),
        type  = input.attr('type');

    if ('checkbox' === type) {
      if (input.is(':checked')) {
        bot = true;
      }
    }
    if ('text' === type || 'email' === type) {
      if (input.val() !== '') {
        bot = true;
      }
    }
  });

  if (bot) { return false; } // exit function upon finding a bot
  ajax(form.method, form.action, data, success, error);
 });
});
  // helper function for sending an AJAX request

  function ajax(method, url, data, success, error) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.setRequestHeader("Accept", "application/json");
    xhr.onreadystatechange = function() {
      if (xhr.readyState !== XMLHttpRequest.DONE) return;
      if (xhr.status === 200) {
        success(xhr.response, xhr.responseType);
      } else {
        error(xhr.status, xhr.response, xhr.responseType);
      }
    };
    xhr.send(data);
  }
});

这是有问题的表格：

<form id="contact-form"
              class="contact-form"
              action="https://formspree.io/f/xqkgpllv"
              method="POST">
            <input type="email" name="email" class="input" placeholder="email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'email'" validate="email">
            <input type="hidden" name="message" value="sign me up for emails">
            <input type="checkbox" name="contact_me_by_fax_only" value="1" tabindex="-1" autocomplete="off" class="honey">
            <input type="text" name="name_2" tabindex="-1" autocomplete="off" class="honey input">
            <input type="email" name="email_2" tabindex="-1" autocomplete="off" class="honey input">
            <textarea type="text" name="message_2" tabindex="-1" autocomplete="off" class="honey input"></textarea>
            <input type="checkbox" name="contact_me_by_fax_only" value="1" autocomplete="off" class="honey input">
            <button type="submit" class="contact-form-button btn" value="-_-"></button>
            <p class="contact-form-status"></p>
        </form>

它有一百万个蜜罐，因为我真的希望它能够工作。

还有蜜罐字段的 css：

  input.honey {
    position: fixed;
    left: -100px;
    bottom: 100px;
    pointer-events: none;
    background-color: transparent !important;
    color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
    resize: none;
  }

我避免使用 display: none 或 visibility: hidden 或 opacity: 0，因为我听说机器人可以识别出来。

如果您有任何错误或可疑之处，请告诉我！

Answer 1

您应该使用后端代码验证https://formspree.io/f/xqkgpllv 的表单，而不是使用 js 阻止事件。