如何在网站上安全地分享你的电子邮件地址

如今，垃圾邮件发送者是一个巨大的问题。如果您想分享您的联系信息，而不被垃圾邮件淹没，则需要一个解决方案。几个月前我遇到了这个问题。在我研究如何解决它时，我发现了许多有趣的解决方案。其中只有一个非常适合我的需求。

在这篇文章中，我将向您展示如何使用多种解决方案轻松地保护您的电子邮件地址免受垃圾邮件机器人的攻击。您可以根据自己的需求选择合适的技术。

传统案例

假设您有一个网站。您想分享您的联系方式，并且不希望只分享您的社交链接。电子邮件地址必须在那里。很简单，对吧？您可以输入类似以下内容

<a href="mailto:[email protected]">Send me an Email</a>

然后，您可以根据自己的喜好对其进行样式设置。

好吧，即使此解决方案有效，它也存在一个问题。它会使您的电子邮件地址对所有人可见，包括网站爬虫和各种垃圾邮件机器人。这意味着您的收件箱可能会被大量的垃圾邮件淹没，例如促销优惠甚至一些网络钓鱼活动。

我们需要一个折衷方案。我们希望让机器人难以获取我们的电子邮件地址，但对普通用户尽可能简单。

解决方案是混淆处理。

混淆处理是指将事物变得难以理解的做法。此策略出于多种原因应用于源代码。其中之一是隐藏源代码的目的，以使篡改或逆向工程变得更加困难。首先，我们将研究所有基于混淆处理概念的不同解决方案。

HTML 方法

我们可以将机器人视为在网络上浏览并爬取网页的软件。机器人获取 HTML 文档后，会解释其中的内容并提取信息。此提取过程称为 网络抓取。如果机器人正在查找与电子邮件格式匹配的模式，我们可以尝试使用不同的格式对其进行伪装。例如，我们可以使用 HTML 注释

<p>If you want to get in touch, please drop me an email at<!-- fhetydagzzzgjds --> email@<!-- sdfjsdhfkjypcs -->addr<!-- asjoxp -->ess.com</p>

它看起来很乱，但用户会看到这样的电子邮件地址

If you want to get in touch, please drop me an email at [email protected]

优点

• 易于设置。
• 它在 JavaScript 被禁用时也能正常工作。
• 辅助技术可以读取它。

缺点

• 垃圾邮件机器人可以跳过已知的序列，例如注释。
• 它不适用于 mailto: 链接。

HTML & CSS 方法

如果我们使用 CSS 的样式能力来删除仅用于欺骗垃圾邮件机器人的内容，会怎么样？假设我们拥有与之前相同的内容，但这次我们放置了一个 span 元素在里面

<p>If you want to get in touch, please drop me an email at <span class="blockspam" aria-hidden="true">PLEASE GO AWAY!</span> email@<!-- sdfjsdhfkjypcs -->address.com</p>.

然后，我们使用以下 CSS 样式规则

span.blockspam {
  display: none;
}

最终用户只会看到以下内容

If you want to get in touch, please drop me an email at [email protected].

…即我们真正关心的内容。

优点

• 它在 JavaScript 被禁用时也能正常工作。
• 机器人更难获取电子邮件地址。
• 辅助技术可以读取它。

缺点

• 它不适用于 mailto: 链接。

JavaScript 方法

在此示例中，我们使用 JavaScript 使我们的电子邮件地址不可读。然后，在页面加载时，JavaScript 会再次使电子邮件地址可读。这样，我们的用户就可以获取电子邮件地址。

最简单的解决方案是使用 Base64 编码算法解码电子邮件地址。首先，我们需要将电子邮件地址编码为 Base64。我们可以使用一些网站（例如 Base64Encode.org）来执行此操作。输入您的电子邮件地址，如下所示

然后，单击按钮进行编码。使用以下几行 JavaScript，我们可以解码电子邮件地址并设置 HTML 链接中的 href 属性

var encEmail = "ZW1haWxAYWRkcmVzcy5jb20=";
const form = document.getElementById("contact");
form.setAttribute("href", "mailto:".concat(atob(encEmail)));

然后，我们必须确保电子邮件链接在标记中包含 id="contact"，如下所示

<a id="contact" href="">Send me an Email</a>

我们使用 atob 方法解码 Base64 编码数据的字符串。另一种方法是使用一些基本的加密算法，例如 凯撒密码，这在 JavaScript 中很容易实现。

优点

• 机器人更难获取电子邮件地址，尤其是如果您使用加密算法。
• 它适用于 mailto: 链接。
• 辅助技术可以读取它。

缺点

• 浏览器必须启用 JavaScript，否则链接将为空。

嵌入式表单方法

联系表单随处可见。您肯定至少使用过其中一个。如果您希望人们能够直接与您联系，则可以考虑在您的网站上实施联系表单服务。

Formspree 是一个服务示例，它为您提供了联系表单的所有优势，而无需担心服务器端代码。 Wufoo 也是如此。事实上， 这里有很多您可以考虑的选项，可帮助您处理联系表单提交。

使用任何表单服务的第一步是注册并创建一个帐户。定价各不相同，当然，服务之间提供的功能也不同。但它们大多数都会为您提供一个 HTML 代码片段，用于将您在任何网站或应用程序中创建的表单嵌入其中。以下是我从我在 Formspring 帐户中创建的一个表单中直接提取的一个示例

<form action="https://formspree.io/f/[my-key]" method="POST">
  <label> Your email:
    <input type="email" name="email" />
  </label>
  <label> Your message:
    <textarea name="message"></textarea>
  </label>
  <!-- honeypot spam filtering -->
  <input type="text" name="_gotcha" style="display:none" />
  <button type="submit">Send</button>
</form>

在第一行中，您应该根据您的端点自定义 action。此表单非常基本，但您可以根据需要添加任意多个字段。

请注意第 9 行的隐藏输入标记。此输入标记可帮助您过滤普通用户和机器人提交的内容。实际上，如果 Formspree 的后端看到包含该输入的提交，则会将其丢弃。普通用户不会这样做，因此一定是机器人。

优点

• 您的电子邮件地址是安全的，因为它不会公开。
• 它在 Javascript 被禁用时也能正常工作。

缺点

• 依赖于第三方服务（这可能是优点，具体取决于您的需求）

此解决方案还有一个缺点，但我没有将其列出，因为它是相当主观的，并且取决于您的用例。使用此解决方案，您不会分享您的电子邮件地址。您只是为人们提供了一种联系您的方式。如果人们希望向您发送电子邮件怎么办？如果人们正在寻找您的电子邮件地址，而他们不想要联系表单怎么办？在那种情况下，联系表单可能是一个过于强硬的解决方案。

结论

我们已经到达了结尾！在本教程中，我们讨论了在线电子邮件共享问题的不同解决方案。我们讨论了不同的想法，包括 HTML 代码、JavaScript，甚至一些在线服务（如 Formspree）来构建联系表单。在本教程结束时，您应该了解所展示策略的所有优缺点。现在，您可以根据自己的特定用例选择最合适的策略。