html - 对机器人隐藏电子邮件地址 - 保持邮件地址为 :

Question

tl;博士

在不使用脚本的情况下隐藏机器人的电子邮件地址并维护 mailto:功能。方法还必须支持屏幕阅读器。

总结

邮箱 无混淆 使用 脚本或联系表格

邮箱地址必须是完全可见 给人类观众和 维护 mailto:功能

邮箱地址 不得采用图像形式 .

邮箱地址 必须对垃圾邮件爬虫和垃圾邮件机器人“完全”隐藏 和 任何其他收割机类型

预期效果:

没有脚本 ，请。元素中没有使用脚本和我想保持这种方式 .

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

用户可以点击电子邮件地址 这反过来会触发 mailto:功能。

单击电子邮件将打开用户的电子邮件应用程序。

换句话说，mailto:功能必须工作。

电子邮件地址不可见或未被识别为机器人的电子邮件地址 (包括页面来源)

我没有一个充满垃圾邮件的收件箱

什么不起作用

添加联系表 - 或任何类似的 - 而不是电子邮件地址

我讨厌联系表格 .我很少填写联系表格。如果没有电子邮件地址，我会查找电话号码，如果没有，我会开始寻找替代服务。我只会在绝对必要的情况下填写联系表格。

用地址的图像替换地址

这将创建一个 巨使用屏幕阅读器的人的劣势( 请记住您 future 元素中的视障人士)

它还删除 mailto:除非您使图像可点击然后添加 mailto:功能如 href对于链接，但是挫败目的现在电子邮件对机器人可见。

什么可能有效:

pseudo-elements的巧妙用法在 CSS

利用 base64 的解决方案编码

分手电子邮件地址并在整个文档中展开部分，然后在用户单击按钮时将它们重新组合在一起(这可能涉及多个 CSS 类和 anchor tags 的用法)

retrofit html属性通过 CSS
@MortezaAsadi 在下面的评论中优雅地提出了这种可能性。这是全文的链接 - 该文章来自 2012 年:

What if We Could Use CSS to Alter HTML Attributes?

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

类似问题/修复

JavaScript: Protect your email address by Joe Maller

(这是 Joe Maller 建议的一个很好的修复，它运行良好，但它是 基于脚本的 。这是它的样子；

<SCRIPT TYPE="text/javascript">

  emailE = 'emailserver.com'

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

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

</script>



<NOSCRIPT>

  Email address protected by JavaScript

</NOSCRIPT>

Looking for a php only email address obfuscator function

(同时使用 PHP 和 CSS 到第一个 反向 使用 PHP 的电子邮件然后 反向它 返回与 CSS 的巧妙解决方案)一个非常有前途的解决方案，效果很好!但它是太容易解决 .

Is it worth obfuscating email addresses on the web these days?

(Javascript 修复)

Best way to obfuscate an e-mail address on a website?

所选答案有效 .它实际上工作得很好。它涉及将电子邮件编码为 html entities .可以改进吗？

这是它的样子；

<A HREF="mailto:

&#121;&#111;&#117;&#114;&#110;&#097;&#109;&#101;&#064;&#100;&#111;&#109;&#097;&#105;&#110;&#046;&#099;&#111;&#109;">

&#121;&#111;&#117;&#114;&#110;&#097;&#109;&#101;&#064;&#100;&#111;&#109;&#097;&#105;&#110;&#046;&#099;&#111;&#109;

</A>

Does e-mail address obfuscation actually work?

(这个 super 用户问题的选定答案很好，它提供了对使用不同混淆方法收到的垃圾邮件数量的研究。

似乎用 CSS 操纵电子邮件地址使其成为rtl确实有效。这与我在本节中链接的第一个问题中使用的方法相同。

我不确定添加什么效果mailto:修复的功能会对结果产生影响。

SO上还有很多其他问题都有相似的答案。我没有找到任何适合的东西 我想要的效果

问题:

有没有可能提高效率 (即尽可能少的垃圾邮件)上述电子邮件混淆方法来自 结合两个或多个修复(甚至添加新修复)同时:

A- 维护 mailto:功能；和

B- 支持屏幕阅读器

编辑:

很多下面的回答和评论提出一个很好的问题，同时表明如果没有某种 js 就不可能做到这一点。

提出/暗示的问题是:

Why not use js?

答案是我对js过敏

一边开玩笑，

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

联系表格作为替代品越来越被接受
用于提供电子邮件地址 - 他们不应该这样做。

如果是 可以做如果没有脚本，那么它 应该做 没有
脚本。

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

Answer 1

您请求的问题特别是“支持屏幕阅读器”，因为根据定义，屏幕阅读器是某种“机器人”。如果屏幕阅读器需要能够解释电子邮件地址，那么页面爬虫也能够解释它。

还有点mailto属性将成为如何在网络上处理电子邮件地址的标准。询问是否有第二种方法可以做到这一点，就像在询问是否有第二个标准。

通过脚本执行此操作仍然会遇到与加载页面后相同的问题，脚本将已运行并且电子邮件地址在 DOM 中呈现(除非您填充电子邮件地址 on click 或其他内容)。无论哪种方式，屏幕阅读器仍然会遇到此问题，因为它尚未加载。

老实说，只需获得一个带有一半不错的垃圾邮件过滤器的电子邮件服务，并指定一个默认主题行，以便您在收件箱中进行排序。

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

您要问的是标准是否有两种方式来做某事，一种用于机器人，另一种用于非机器人。答案是不会，您必须尽最大努力与机器人战斗。