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

老余博客

本文介绍一个小技巧,防止机器人通过网页表单,提交垃圾留言。方法是为表单元素<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>

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

赞(1)
分享
文章版权声明:除非注明,否则均为老余个人博客原创文章,转载或复制请以超链接形式并注明出处。

发表评论

评论列表 (有 0 条评论,2049人围观)
取消
微信二维码
微信二维码
支付宝二维码
取消
老余博客微信公众号二维码