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

作者: xusx 分类: Web 发布时间: 2020-03-27 16:23

本文介绍一个小技巧,防止机器人通过网页表单,提交垃圾留言。方法是为表单元素<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://xushanxiang.com/that-needs-js/' data-action='https://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了。

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注