告别 CloudFlare 邮件地址混淆功能

什么是 CloudFlare 邮件地址混淆？

Cloudflare Email Address Obfuscation 是一项帮助防止垃圾邮件的服务，它可以对页面中显示的邮件地址进行隐藏，使邮件采集器和其他机器人无法获取，同时让网站访客仍然可以正常看到。

邮件采集器和其他机器人在互联网上四处搜寻邮件地址，将其添加到垃圾邮件目标列表中。这一趋势导致垃圾邮件数量不断增加。

网站管理员想出了各种巧妙的方法来防范此类问题，例如将邮件地址拼写出来（如 help [at] cloudflare [dot] com）或使用邮件地址的嵌入图片。然而，这样做会失去点击邮件地址即可自动发送邮件的便利性。启用 Cloudflare Email Address Obfuscation 后，网页上的邮件地址将对机器人进行混淆（隐藏），同时保持对人类可见。实际上，您的网站对访客来说不会有任何可见的变化。

.

快速回顾：是什么让页面变快？

快速的页面几乎可以立即渲染。在首次渲染周期中，确保仅下载关键资源。任何对渲染不重要的资源都应推迟到页面渲染完成之后再加载。

为什么 CloudFlare 邮件地址混淆对 Core Web Vitals 有害？

.

CloudFlare Email Address Obfuscation 会注入一小段 JavaScript 来解码邮件地址。你可能会想这有什么危害？请考虑以下 4 点：

1. 脚本 email-decode.min.js 在渲染过程的早期就被加载，甚至在其他脚本和重要图片之前。
2. 你要隐藏的邮件地址很可能根本不在可见视口中。
3. 邮件解码并不是页面上最重要的事情。

这使得邮件解码成为一项应以最低优先级处理的任务。你当然不希望在渲染过程的早期就注入解码脚本。

如何正确地解码邮件！

有更好的方法来隐藏邮件地址，而不需要在渲染过程早期执行脚本。大多数情况下，更好的做法是使用 intersection observer 并在需要时即时加载 Email Address Obfuscation 脚本。

创建混淆后的邮件地址

<a 
 class="email-hidden" 
 href="#" 
 data-email="aW5mb0BleGFtcGxlLmNvbQ==">
 [email-hidden]
<a>

添加 intersection observer，将以下 JavaScript 代码放在页面底部。

<script>
const emailtag = document.querySelector('.email-hidden');
let observer = new IntersectionObserver((entries) => {
  entries.map((entry) => {
    if (entry.isIntersecting) {
      let script = document.createElement('script');
      script.onload = function () {
        emaildecode(entry.target)
      };
      script.src = 'decode-email.js';
      document.head.appendChild(script);
    }
  });
}).observe(emailtag);
</script>

上传邮件解码脚本 decode-email.js，并将邮件解码函数替换为您选择的解码库。

const emaildecode = (e) => {
	let email = atob(e.dataset.email);
	e.href = 'mailto:'+email;
	e.innerHTML = email;
}

检查结果

<a href="mailto:info@example.com">info@example.com</a>

这就是全部了，完美的 Core Web Vitals 和邮件地址混淆！