保护您的联系信息免受网络爬虫侵害

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

在德国，所有商业网站都必须公开联系方式，包括电子邮件地址和电话号码。我以前从未重视过保护这些数据，但最近我的一些公共邮箱地址开始收到越来越多的垃圾邮件。虽然目前使用合适的垃圾邮件过滤器还能勉强应付，但我还是决定采取一些应对措施，比如在更新agty.de 网站时，防止机器人程序获取我的联系方式。

侧面约束

解决方案应易于使用且二氧化碳排放量极低（了解更多）。因此，它不应依赖 jQuery 或其他框架，而应尽可能仅使用纯 JavaScript。此外，不应简单地将地址显示在图片上，因为这会增加页面大小，并给依赖辅助功能的用户带来不便。

当然，它至少应该看起来还不错，而且使用起来要简单。

简化

由于我的项目规模很小，而且没有使用真正的数据库，所以我决定不自动检测联系信息，例如电子邮件地址或电话号码。相反，我选择手动搜索这些信息。

假设

虽然我并非实体识别或信息提取方面的专家，但我对这些任务做出了一些有根据的猜测：

1. 如果像这样使用，检测电子邮件地址就很容易<a href="mailto:hi@test.de">hi@test.de</a>。
2. 你或许可以创建一个简单的正则表达式来查找未嵌入<a>标签的电子邮件地址。因此，仅仅在普通段落中直接写入电子邮件地址（不带任何标签）并没有什么实际帮助。
3. 大多数爬虫程序只会加载 HTML 文件，而不会在启动时执行任何 JavaScript 代码。
4. 如果 JavaScript 与用户操作（例如点击按钮）绑定，则更多爬虫程序将不会执行 JavaScript。
5. 然而，很多爬虫程序也会将正则表达式应用于 JavaScript 和 CSS 文件。

一个简单的解决方案

基于我的假设、限制条件和简化考虑，我提出了以下解决方案：

无论您在哪里填写电子邮件地址，请改为粘贴这段代码。button使用此标签旨在提高可访问性，但需要启用 JavaScript。

<button class="show-email">Display E-Mail-Address <noscript>(requires JavaScript)</noscript></button>

为文档中所有可能出现的电子邮件按钮添加事件监听器。虽然我们也可以使用onclick按钮的 action 属性，但这种方法可以简化电子邮件按钮的代码。

document.addEventListener("DOMContentLoaded", function(e) {
    let emailButtons = document.getElementsByClassName("show-email");
    for (let i = 0; i < emailButtons.length; i++) {
        emailButtons[i].addEventListener("click", showEmail);
    }
});

这个函数负责实际操作：每当点击电子邮件按钮时，按钮文本就会更改为电子邮件地址。为了防止机器人从 JavaScript 代码中获取地址，我将其拆分成几个部分。

function showEmail(evt) {
    let target = evt.target;
    let email = "test";
    email = email.concat("@");
    email = email.concat("test");
    email = email.concat(".de");
    target.innerHTML = email;
}

有些风格总是不错的选择，当然，它的设计应该与你网站的整体设计相匹配。

.show-email {
    border: none;
    outline: none;

    padding: 0;
    margin: 0;

    box-shadow: none;
    background-color: white;

    font-size: 10pt;
    font-weight: bold;

    cursor: pointer;
}

.show-email:hover {
    text-decoration: underline;
}

当然，你也可以用这种方法处理其他类型的信息，比如你的姓名、电话号码、社交媒体个人资料等等。使用这种方法，我认为信息很可能只会对人类可见，而不会被网络爬虫抓取。至少这种方法应该能让网络爬虫更难自动检测到你的信息。

行动呼吁

虽然我提出的解决方案有望奏效，但我还是想邀请您分享您对此问题的看法。很可能，您的想法会比我好得多！