问题描述

长话短说

从机器人隐藏电子邮件地址，而不使用脚本并维护 mailto: 功能。方法也必须支持 screen-readers 。

总结

  • 电子邮件混淆，不使用脚本或联系表单

  • 电子邮件地址需要对人类观察者完全可见，并维护 mailto: 功能

  • 电子邮件地址不得为图像形式。

  • 电子邮件地址必须是从 spam-crawlers 和 spam-bots 和任何其他收割机类型中隐藏的”completely”

理想效果：

  • 没有脚本。在项目中没有使用脚本，我想保持这样的方式。

  • 电子邮件地址显示在页面上，或者可以在某种用户交互之后轻松显示，如打开模态。

  • 用户可以点击电子邮件地址，这又会触发 mailto: 功能。

  • 点击电子邮件将打开用户的电子邮件应用程序。换句话说，mailto: 功能必须工作。

  • 电子邮件地址不可见或未标识为漫游器的电子邮件地址 (包括页面源)

  • 我没有收到垃圾邮件的收件箱

什么不工作

  • 添加联系表单 – 或任何类似的 – 而不是我讨厌联系表单的电子邮件地址。我很少填写联系表。如果没有电子邮件地址，我会寻找一个电话号码，如果没有电话号码，我会开始寻找替代服务。我只会填写一个联系表格，如果我绝对必须。

  • 使用地址的图像替换地址对于使用屏幕阅读器的人来说，这造成了一个巨大的缺点 (请记住您未来的项目中的视障者)，除非您将图像可点击，还可以将 mailto: 功能添加为 mailto: 功能，还可以删除 mailto: 功能 href 用于链接，但是失败的目的，现在的电子邮件是可见的机器人。

什么可能工作：

  • pseudo-elements 在 CSS 中的巧妙使用

  • 使用 base64 编码的解决方案

  • 打破电子邮件地址并将文件传播到文档中，然后在用户单击按钮时将其重新组合在一起 (这可能涉及多个 CSS 类和 anchor tags 的使用)

  • 通过 CSS @MortezaAsadi 更改 html 属性优雅地提出了以下评论的可能性。这是到完整的链接 – 文章是从 2012 年：What if We Could Use CSS to Alter HTML Attributes?

  • 其他创造性的解决方案超出了我的知识范围。

类似问题/修复

(这是 Joe Maller 建议的一个很好的修复，它的效果很好，但它是基于脚本的，这就是它的样子;



<SCRIPT TYPE="text/javascript">

  emailE = 'emailserver.com'

  emailE = ('yourname' + '@' + emailE)

  document.write('<A href="mailto:'%20+%20emailE%20+%20'">' + emailE + '</a>')

</script>



<NOSCRIPT>

  Email address protected by JavaScript

</NOSCRIPT>

问题：

通过组合两个或多个修复 (或甚至添加新的修补程序)，可以提高上述电子邮件混淆方法的效率 (即尽可能少的垃圾邮件)，同时

A-维护 mailto: 功能; 和

B-支持 screen-readers

编辑：

下面的许多答案和评论构成了一个非常好的问题，同时指出不可能做到这一点没有某种 js

问题/暗示是：

Why not use js?

答案是我对 js 过敏

开玩笑说，

我问这个问题的三个主要原因是：

  • 联系表格越来越被接受为替代提供电子邮件地址 – 他们不应该。

  • 如果可以在没有脚本的情况下完成，那么应该没有脚本。

  • 好奇：(实际上我正在使用 js 修复程序之一)，我想看看讨论这个问题是否会导致更好的方法。

最佳解决方法

您的请求的问题特别是 “支持 screen-readers”，如定义屏幕阅读器是一种”bot” 。如果一个 screen-reader 能够解释电子邮件地址，那么 page-crawler 也可以解释它。

此外，mailto 属性的要点是如何在网络上执行电子邮件地址的标准。询问是否有第二种方法可以提出是否有第二种标准。

通过脚本进行操作仍然会出现与页面加载相同的问题，脚本将被运行，并且在 DOM 中呈现的电子邮件地址 (除非您在点击或某些东西上填写电子邮件地址) 。无论哪种方式，屏幕阅读器仍然会有问题，因为它还没有加载。

老实说，只需要获得一个电子邮件服务，一个体面的垃圾邮件过滤器，并指定一个默认的主题行，您可以轻松地在收件箱中进行排序。

<a href="mailto:no-one@no-where.com?subject=Something%20to%20filter%20on">Email me</a>

你所要求的是如果标准有两种方式来做某事，一种是机器人，另一种用于 non-bots 。答案是没有，你必须尽可能最好地打僵尸。

次佳解决方法

击败电子邮件机器人是一个艰难的。你可能想查看维基百科上的 Email Address Harvesting countermeasures section 。

我的 back-story 是我写了一个搜索机器人。它在多年前的初始运行期间抓取了 105,000 多个 URL 。从我从中学到的知识是，网页抓取机器人可以看到一切都是网页上出现的文字。机器人读取除图像之外的一切

由于以下原因，垃圾邮件无法通过代码轻松停止：

  1. CSS&使用 mailto：标签时，JS 是无关紧要的。机器人专门查看该”mailto:” 关键字的 HTML 页面。从冒号到下一个单引号或双引号 (以先到者为准) 的所有内容都被视为电子邮件地址。 HTML 实体电子邮件地址 (如上面的示例) 可以使用反向 ASCII 方法/函数快速翻译。运行上面的 JavaScript 代码片段，可以快速地将以&＃121;&＃111;&＃117;&＃114; … 开头的字符串转换为… “yourname@domain.com” 。 (我的搜索机器人用 mailto：电子邮件地址丢弃 hrefs，因为我想要网页和不是电子邮件地址的 URL)

  2. 如果一个页面崩溃机器人，机器人作者将调整机器人以修复与该页面的崩溃，以便将来该机器人不会再次崩溃在该页面。从而使他们的机器人更聪明。

  3. Bot 作者可以编写机器人，这些机器人可以产生所有已知的电子邮件地址变化，而无需抓取页面和从不使用任何起始地址。虽然这样做可能不可行，但今天的 high-core 计数 CPU(即 hyper-threaded 和运行在 4+ GHz 以上) 并不是不可想象的，加上使用分布式 cloud-based 计算 CPU 的可用性。甚至超级电脑。可以想象，有人现在可以创建一个 bot-farm 来垃圾邮件，无需知道任何人的电子邮件地址。 20 年前，这是不可理解的。

  4. 免费电子邮件提供商有向其广告客户销售免费用户帐户的历史。过去，只需注册一个免费的电子邮件帐户，就可以自动保证他们有一个绿灯，开始向该电子邮件地址发送垃圾邮件，而无需在线使用该电子邮件地址。我已经看到发生了多次，有着名的公司名称。 (我不会提到任何名字。)

  5. mailto：关键字是此 IETF RFC 的一部分，其中构建浏览器以自动启动默认电子邮件客户端，其中包含该关键字的链接。必须使用 JavaScript 来中断该应用程序的启动过程。

我不认为可以在使用传统电子邮件服务器的同时停止 100％的垃圾邮件，而不需要在电子邮件服务器上使用过滤器，也可能使用图像。

还有一个选择… 您还可以建立一个 chat-like 电子邮件客户端，它在网站内部运行。这将像 Facebook 的聊天客户端。这是 “像电子邮件”，但不是真正的电子邮件。这是简单的 1 对 1 即时通讯与归档功能… auto-loads 登录时。由于它具有文档附件+链接功能，它的工作原理就像电子邮件… 但没有垃圾邮件。只要您不构建外部可访问的 API，那么它是一个封闭的系统，人们无法向其发送垃圾邮件。

如果您打算严格遵守传统的电子邮件，那么您最好的选择就是在公司的电子邮件服务器上运行 Apache 的 SpamAssassin 。

您也可以尝试结合上面列出的多种策略，使电子邮件收集器更难从网页中收集电子邮件地址。他们不会在 100％的时间内停止 100％的垃圾邮件，同时还允许 100％的屏幕阅读器为盲人访问。

您已经创建了一个非常好的开始，看看传统电子邮件有什么问题！为你做这件事！

一个很好的屏幕阅读器是 Freedom Scientific 的 JAWS 。以前我曾经使用过这种方式来听我的网页是如何被盲人用户阅读的。 (如果您听到男性声音同时阅读两个动作 (例如点击链接) 和文本，请尝试将 1 个声音更改为女性，以便 1 个语音读取动作，另一个读取文本，这样可以更容易地了解网页是如何为视觉上看不到)

祝你好运与你的 Email Address Harvesting countermeasure 一起努力！

第三种解决方法

这是一种使用 JavaScript 的方法，但具有相当小的 foot-print 。它也是非常”ghetto”，一般来说，我不会推荐使用内联 JS 在 HTML 中的方法，除非你非常不情愿使用 JS 。



<a
  href="#"
  data-contact="bGUtZW1haWxAdGhlLWRvbWFpbi5jb20="
  data-subj="QW4gQW1hemluZyBTdWJqZWN0"
  onfocus="this.href = 'mailto:' + atob(this.dataset.contact) + '?subject=' + atob(this.dataset.subj || '')"
  >
  Send an email
</a>

data-contact 是 base64 编码的电子邮件地址。而且，data-subj 是一个可选的 base64 编码对象。

在没有 JS 的情况下执行此操作的主要挑战是 CSS 不能更改 HTML 属性。 (您链接的 article 是一个”pie-in-the-sky”，并且对今天或将来的可能性没有任何影响。)

您提到的 HTML 实体方法或其中的一些变体可能是具有一定功效的最简单的选项。此外，iframe 方法很聪明，server redirect approach 非常棒。但是，这三个机器人都容易受到机器人攻击：

通过上述方法，在 data-contact 属性中使用 base64 编码的电子邮件地址是非常”one-off” – 只要刮刀不是专门为您的站点设计的，它应该可以工作。

第四种方法

写刮刀的人希望使刮刀尽可能高效。因此，它们不会下载样式，脚本和其他外部资源。我没有办法使用 CSS 设置 mailto 链接。另外，你具体说你不想使用 Javascript 设置链接。

如果您考虑其他类型的资源，还有外部文档 (即使用 iframe 的 HTML 文档) 。几乎没有刮刀会麻烦下载 iframe 的内容。所以你可以简单地做：

index.html 的：

<iframe src="frame.html" style="height: 1em; width: 100%; border: 0;"></iframe>

frame.html：

My email is <a href="mailto:me@example.com" target="_top">me@example.com</a>

对于人类用户，iframe 看起来就像普通文本。默认情况下，iframe 是内联和透明的，所以我们只需要设置其边框和尺寸。您不能使 iframe 的大小与其内容的大小匹配，而不使用 Javascript，因此我们可以做的最好是给它预定义的维度。

第五种方法

首先，我不认为任何与 CSS 有关的工作。所有机器人 (Google 的抓取工具除外) 只会忽略网站上的所有样式。任何解决方案必须与 JS 或 server-side 一起使用。

server-side 解决方案可能正在制作一个链接到新标签的<a>，它只是重定向到所需的 mailto：

这就是我现在所有的想法。希望它有帮助。

第六种方法

简单+很多 @ +可编辑没有工具



<a href="mailto:user@domain@@com"
   onmouseover="this.href=this.href.replace('@@','.')">
   Send email
</a>

第七种方法

满足您所有要求的简短答案是，这是不可能的

一些在这里回答的 script-based 选项可能适用于某些机器人，但是您想要 no-script，所以不，你不能。

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。