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

如今，垃圾邮件泛滥成灾。如果您想分享您的联系信息，又不希望被垃圾邮件淹没，则需要一个解决方案。几个月前，我遇到了这个问题。在研究如何解决这个问题时，我发现了一些有趣的解决方案。其中只有一个完美地满足了我的需求。

本文将向您展示如何使用多种方法轻松保护您的电子邮件地址免受垃圾邮件机器人的侵害。您可以根据自己的需求选择合适的方法。

目录

html { scroll-behavior: smooth; } - 传统方法

• HTML 方法
• HTML 和 CSS 方法
• JavaScript 方法
• 内嵌表单方法
• 结论

传统方法

假设您有一个网站。您想分享您的联系方式，而不仅仅是分享您的社交链接。电子邮件地址必须存在。很简单，对吧？您可以输入如下内容：

<code><a href="https://www.php.cn/link/7c3b08f1b6142bceb956851f1a45442b">发送电子邮件给我</a></code>

然后根据您的喜好对其进行样式设置。

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

我们正在寻找一种折衷方案。我们希望让机器人难以获取我们的电子邮件地址，但对普通用户来说尽可能简单。

解决方案是混淆。

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

HTML 方法

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

<code><p>如果您想联系我，请发送电子邮件至 email@address.com</p></code>

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

<code>如果您想联系我，请发送电子邮件至 [email protected]</code>

优点：

• 易于设置。
• 它可以在禁用 JavaScript 的情况下工作。
• 辅助技术可以读取它。

缺点：

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

HTML 和 CSS 方法

如果我们使用 CSS 的样式功能来删除仅用于愚弄垃圾邮件机器人的某些内容会怎么样？假设我们有与之前相同的内容，但这次我们在其中放置一个 span 元素：

<code><a href="https://www.php.cn/link/7c3b08f1b6142bceb956851f1a45442b">发送电子邮件给我</a></code>

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

<code><p>如果您想联系我，请发送电子邮件至 email@address.com</p></code>

最终用户只会看到：

<code>如果您想联系我，请发送电子邮件至 [email protected]</code>

……这就是我们真正关心的内容。

优点：

• 它可以在禁用 JavaScript 的情况下工作。
• 机器人更难获取电子邮件地址。
• 辅助技术可以读取它。

缺点：

• 它不适用于 mailto: 链接。

JavaScript 方法

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

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

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

<code><p>如果您想联系我，请发送电子邮件至 PLEASE GO AWAY! email@address.com</p>。</code>

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

<code>span.blockspam {
  display: none;
}</code>

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

优点：

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

缺点：

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

内嵌表单方法

联系表单随处可见。您肯定至少使用过其中一个。如果您希望人们直接与您联系，可能的解决方案之一是在您的网站上实现联系表单服务。

Formspree 是一个提供联系表单所有优势而无需担心服务器端代码的服务示例。Wufoo 也是如此。事实上，您可以考虑使用许多服务来处理您的联系表单提交。

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

<code>如果您想联系我，请发送电子邮件至 [email protected]。</code>

您的电子邮件： 您的消息： 发送在第一行，您应该根据您的端点自定义操作。此表单非常基本，但您可以根据需要添加任意数量的字段。

请注意第 9 行中的隐藏输入标记。此输入标记可帮助您过滤常规用户和机器人提交的内容。事实上，如果 Formspree 的后端看到填写了该输入的提交，它将将其丢弃。普通用户不会这样做，所以它一定是一个机器人。

优点：

• 您的电子邮件地址是安全的，因为它不是公开的。
• 它可以在禁用 Javascript 的情况下工作。

缺点：

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

此解决方案还有一个缺点，但我将其从列表中删除了，因为它非常主观，并且取决于您的用例。使用此解决方案，您不会共享您的电子邮件地址。您正在为人们提供与您联系的方式。如果人们想要给您发电子邮件怎么办？如果人们正在寻找您的电子邮件地址，而他们不需要联系表单怎么办？在这种情况下，联系表单可能是一个过于强硬的解决方案。

结论

我们到达了终点！在本教程中，我们讨论了在线电子邮件共享问题的不同解决方案。我们介绍了不同的想法，包括 HTML 代码、JavaScript 甚至 Formspree 等在线服务来构建联系表单。在本教程结束时，您应该了解所显示策略的所有优缺点。现在，您可以根据您的具体用例选择最合适的策略。

以上是如何在网站上安全地分享您的电子邮件地址的详细内容。更多信息请关注PHP中文网其他相关文章！