T

TIP: Never leave your email address raw in the mailto link! Here's what to do instead This is how email harvesting works Encode your email address Let's do it!

2025-06-07

提示:切勿在 mailto 链接中保留您的电子邮件地址!以下是建议

电子邮件收集的工作原理

对您的电子邮件地址进行编码

我们开始做吧!

通常,当您在网站上留下电子邮件地址供人们点击时,您可能会执行以下操作:

<a href="mailto:name@example.com">name@example.com</a>
Enter fullscreen mode Exit fullscreen mode

正确的?

然而,这是将垃圾邮件发入您的电子邮件的完美方法!

电子邮件收集的工作原理

垃圾邮件机器人为了获取大量电子邮件列表,诱骗用户点击可疑链接,会使用电子邮件收集器来整理这些列表。这些电子邮件通常出现在用户留下联系方式的网站上。

有些人认为这个问题很容易解决,只需像 那样屏蔽邮箱地址即可name[AT]example[DOT]com。然而,这并不能解决任何问题,原因有二:

  1. mailto 链接仍然包含实际的电子邮件地址,因为您无法将其替换为上面的地址。由于电子邮件收集者会查看您网站的源代码,因此他们仍然能够获取您的电子邮件。
  2. 大多数电子邮件收集器都足够先进,可以检测到 [AT] 和 (AT) 等常见模式,因此它们不会做太多事情。

那么,现在怎么办?

对您的电子邮件地址进行编码

幸运的是,有一种方法可以让你的电子邮件地址无法被电子邮件收集器读取!

您可能以前在 HTML 中见过像&amp;和 这样的字符&gt;。这些被称为HTML 实体。这些符号经过编码,因此不会被误认为是 HTML 标签。

然而,很多人可能不知道,你可以将每个字符编码成一个 HTML 实体。更妙的是,将这些字符放入 href 中,普通访客访问你的网站时,无需查看源代码,就能将其转换为常规文本。这非常适合这种情况!

常规字母的 HTML 实体由十六进制编码组成。HTML 实体看起来像这样&#HEXCODE;

我们开始做吧!

使用这款便捷的工具进行转换!请务必复制整个 href 链接,而不仅仅是您的电子邮件地址!

如何转换链接的示例屏幕截图

之后,将该字符串复制粘贴到你的 href 中,就完成了!它应该如下所示:

<a href="&#x6d;&#x61;&#x69;&#x6c;&#x74;&#x6f;&colon;&#x6e;&#x61;&#x6d;&#x65;&commat;&#x65;&#x78;&#x61;&#x6d;&#x70;&#x6c;&#x65;&period;&#x63;&#x6f;&#x6d;">My email</a>
Enter fullscreen mode Exit fullscreen mode

这使得大多数电子邮件收集者更难解密。同时,链接仍然可供其他人点击!最重要的是,即使源代码已经编码,使用检查元素检查 HTML 也能得到解码后的电子邮件!

devtools 与源代码的比较

这意味着它最终仍可被人类阅读。

如果您使用一些非传统的方式在实际文本中掩盖您的电子邮件地址,或者根本不使用您的电子邮件(如上面的示例),那就更好了。

现在一切都好起来了!再也不会因为以为刚收到客户却发现是垃圾邮件而感到失望了!

干得好,开发者同仁


Thalita 徽标

Twitter |网站

文章来源:https://dev.to/thalitadev/tip-never-leave-your-email-address-raw-in-the-mailto-link-here-s-what-to-do-instead-1c70
PREV
在你的 React 中构建此分页
NEXT
分步指南: 使用 JavaScript 将光标位置传递给 CSS 变量 设置 HTML 和 CSS 制作事件监听器并在 JavaScript 中传递变量 将带有 CSS 变量的转换添加到您的 CSS 中 为什么要使用 CSS 变量来传递事件行为 一个新世界刚刚开启!