防止机器人通过网页表单提交垃圾留言

本文介绍一个小技巧，防止机器人通过网页表单，提交垃圾留言。方法是为表单元素<form>加上一个data-action属性，真正的提交地址放在这个属性里面。

怎样防止机器人通过网页表单提交垃圾留言，可以像Drupal运用反垃圾模块 honeypot 蜜罐技术（蜜罐元素，honeypot element），知道在哪里有 <input> 文本，该文本使用 CSS 以某种方式隐藏了，如果被填充了该文本，则会丢弃提交。

最好还添加一个aria-label，aria-label =“不要填写这项，它是垃圾邮件蜜罐之一”，这样，有视觉障碍的人仍然可以向我发送消息，而不会因填了此项而提交失败。

https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

但是，做好了上面的任然不能100%的防止机器人通过网页表单提交垃圾留言。下面的思路是在提交表单之前，让浏览器代替该数据操作中的常规操作。

<form id='myContactForm' action='https://www.xushanxiang.com/that-needs-js/' data-action='https://www.xushanxiang.com/your/actual/form/submit/url'>

<script>
    function updateContactFormDestination() {
        var contactForm = document.getElementById("myContactForm");
        var realSubmitUrl = contactForm.getAttribute('data-action');

        contactForm.setAttribute('action', realSubmitUrl);
    }

    document.addEventListener("DOMContentLoaded", function(event) { 
        updateContactFormDestination();
    });
</script>

https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded

好了，接下来静静的观察一个星期，看看垃圾留言数量是不是变为0了。