隐藏Bots的电子邮件地址 - 保留mailto:

70 html css mailto web-crawler

TL;博士

隐藏机器人的电子邮件地址,而不使用脚本和维护mailto:功能.方法还必须支持屏幕阅读器.


摘要

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

  • 电子邮件地址需要对人类观看者完全可见保持mailto:功能

  • 电子邮件地址不得为图像格式.

  • 电子邮件地址必须"完全"隐藏在垃圾邮件爬虫和垃圾邮件机器人以及任何其他收集器类型中


期望的效果:

  • 不要脚本.项目中没有使用脚本,我希望保持这种方式.

  • 电子邮件地址可以显示在页面上,也可以在某种用户交互后轻松显示,例如打开模式.

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

  • 单击该电子邮件将打开用户的电子邮件应用程序.

    换句话说,mailto:功能必须有效.

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

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


什么是工作

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

    我讨厌联系表格.我很少填写联系表格.如果没有电子邮件地址,我会查找电话号码,如果不存在,我会开始寻找替代服务.如果我绝对必须,我只会填写一份联系表格.

  • 用地址图像替换地址

    这对使用屏幕阅读器的人造成了巨大的不利影响(请记住您未来项目中的视障人士)

    它也消除mailto:,除非你使图像可点击,然后添加功能mailto:功能与href您的链接,但失败的目的,现在的电子邮件是机器人可见.


可能有用的:

  • 巧妙地使用pseudo-elementsinCSS

  • 使用base64编码的解决方案

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

  • html通过改变属性CSS

    @MortezaAsadi在下面的评论中优雅地提出了可能性.这是完整的链接 - 文章来自2012年:

    如果我们可以使用CSS来改变HTML属性怎么办?

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


类似的问题/修复

(这是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>
Run Code Online (Sandbox Code Playgroud)

  • 寻找一个只有PHP的电子邮件地址混淆函数

    (一个聪明的解决方案使用两者PHPCSS首先使用PHP 反转电子邮件然后用CSS 反转它)一个非常有前途的解决方案,工作得很好!但它太容易解决了.

  • 这几天是否值得在网上模糊电子邮件地址?

    (Javascript修复)

  • 在网站上混淆电子邮件地址的最佳方法?

    所选答案有效.它实际上工作得很好.它涉及将电子邮件编码为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>
    Run Code Online (Sandbox Code Playgroud)

  • 电子邮件地址混淆实际上有效吗?

    (这个SuperUser问题的选定答案很棒,它提供了一个研究,通过使用不同的混淆方法收到垃圾邮件的数量.

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

    我不确定mailto:修补程序添加功能会对结果产生什么影响.

  • 关于SO还有许多其他问题都有类似的答案.我没有发现任何符合我预期效果的东西


问题:

是否有可能以提高效率上面通过的电子邮件混淆方法(即尽可能少的垃圾邮件越好)将两个或更多的修复程序(甚至增加新的修补程序),而:

A-维护mailto:功能; 和

B-支持屏幕阅读器


编辑:

下面的许多答案和评论提出了一个非常好的问题,同时表明在没有某种情况下这样做是不可能的js

问/暗示的问题是:

为什么不用js

答案是我对此过敏 js

尽管开玩笑,

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

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

  • 如果可以在没有脚本的情况下完成,则应该在没有脚本的情况下完成.

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

k2s*_*n69 31

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

此外,该mailto属性的要点是如何在Web上执行电子邮件地址的标准.询问是否有第二种方法可以询问是否存在第二种标准.

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

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

<a href="mailto:no-one@no-where.com?subject=Something to filter on">Email me</a>
Run Code Online (Sandbox Code Playgroud)

您要求的是标准是否有两种方法可以做某事,一种用于机器人,另一种用于非机器人.答案是它没有,你必须尽可能地对抗机器人.

  • 它糟透了机器人的战斗,但有一天我们将赢得战争......或者灭绝 (7认同)
  • “我们的想法是隐藏电子邮件,直到用户采取某种操作,例如按下按钮打开模式”。如果该用户操作没有更改 DOM(这是屏幕阅读器实际读取的内容),那么屏幕阅读器仍然能够看到它。由于用户操作而更改 DOM 的最佳方法是通过 JavaScript。网页是松散的 MVC 模式,其中 HTML、CSS 和 JavaScript 分别类似于模型、视图和控制器。这意味着任何修改实际上都是通过 JavaScript 进行的,而在其他地方进行修改则有点困难甚至不可能。 (2认同)

Clo*_*omp 30

击败电子邮件机器人是一个艰难的机器人.您可能想查看维基百科上的电子邮件地址收集对策部分.

我的背景故事是我写了一个搜索机器人.它在多年前的初始运行期间抓取了105,000多个URL.从我从中学到的是,网络抓取机器人字面上看到一切都是文本,它出现在网页上.机器人读取除了图像之外的所

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

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

  2. 如果一个页面崩溃了一个机器人,那么机器人作者将调整机器人来修复该页面的崩溃,这样僵尸程序将来不会再次崩溃.从而使他们的机器人更聪明.

  3. Bot作者可以编写机器人,它可以生成所有已知的电子邮件地址变体......无需抓取页面,也不会使用任何初始电子邮件地址.虽然这样做可能不太可行,但今天的高核计数CPU(超线程和4 GHz以上运行)以及使用分布式云计算甚至超级计算机的可用性并不是不可想象的.可以想象,现在有人可以在不知道任何人的电子邮件地址的情况下创建一个垃圾邮件农场来向所有人发送邮件.20年前,那将是不可理解的.

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

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

我不认为在使用传统电子邮件服务器时可以阻止100%的垃圾邮件,而不使用电子邮件服务器上的过滤器并可能使用图像.

还有一个替代方案......您还可以构建一个类似聊天的电子邮件客户端,该客户端在网站上运行.这就像Facebook的聊天客户端.它有点像电子邮件,但不是真正的电子邮件.它只是一对一的即时消息,具有归档功能......在登录时自动加载.由于它有文档附件+链接功能,它有点像电子邮件...但没有垃圾邮件.只要您不构建外部可访问的API,那么它就是一个封闭的系统,人们无法在其中发送垃圾邮件.

如果您打算坚持使用严格的传统电子邮件,那么最好的办法就是在公司的电子邮件服务器上运行Apache的SpamAssassin.

您还可以尝试组合上面列出的多种策略,以使电子邮件收集者更难从您的网页收集电子邮件地址.它们不会100%停止100%的垃圾邮件......同时还允许100%的屏幕阅读器为盲人访问者工作.

你已经创造了一个非常好的开始看看传统电子邮件的错误!感谢你!

一个好的屏幕阅读器是JAWS自由科学.之前我曾经用它来听取盲人用户如何阅读我的网页.(如果您听到男性声音读取两个动作[如点击链接]和文本,请尝试将1个声音更改为女性,以便1个声音读取动作而另一个声音读取文本.这样可以更轻松地听到网页的读取方式视觉上受到了影响.)

祝您的电子邮件地址收获对策努力!

  • 非常感谢你给出了非常彻底的答复.您分享了大量信息.这些信息有助于进一步磨练问题,并可能最终找到解决问题的方法. (2认同)

tif*_*fon 16

这是一种使用JavaScript的方法,但脚本相当小.它也非常"贫民窟",通常我不建议在HTML中使用内联JS的方法,除非你极不情愿使用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>
Run Code Online (Sandbox Code Playgroud)

data-contact是base64编码的电子邮件地址.并且,data-subj是一个可选的base64编码主题.

没有JS这样做的主要挑战是CSS不能改变HTML属性.(你链接的文章是一种"天上掉馅饼",并且对今天或不久的将来可能产生的影响没有任何影响.)

您提到的HTML实体方法或其中的一些变体可能是具有一定功效的最简单选项.此外,该iframe方法很聪明,服务器重定向方法非常棒.但是,这三个都很容易受到机器人的攻击:

  • HTML实体只需要转换(检测很简单)
  • 可能只会遵循 iframe引用的文档
  • 也可以简单地遵循服务器重定向

通过上面概述的方法,在data-contact属性中使用base64编码的电子邮件地址非常"一次性" - 只要剪贴板不是专门为您的网站设计的,它就应该有效.

  • 我喜欢这个。如果他们没有启用 js,他们可以向其他人发送邮件。 (2认同)

Maa*_*oAk 8

简单+很多@ +可编辑而无需工具

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

  • 移动设备没有运气虽然对吗? (9认同)
  • @goleon onclick 可以在移动设备上工作,onmouseover 不会,因为移动设备没有悬停状态 (4认同)
  • 喜欢这个小东西,@AndyHolmes 我为此使用了 onclick="...",也适用于移动设备(在 android/mobile chrome 上测试),不知道这样会不会变得更没用,因为机器人可能会检查更多的 onclick比鼠标悬停。 (3认同)

Bri*_*ian 7

您是否考虑过使用谷歌的recaptcha mailhide? https://www.google.com/recaptcha/admin#mailhide

我们的想法是,当用户单击复选框时(请参阅下面的nocaptcha),将显示完整的电子邮件地址.

虽然recaptcha传统上不仅对于屏幕阅读器而且对人类来说也很难,而谷歌的nocaptcha recaptcha的角色可以在这里阅读, 因为它们与可访问性测试有关.它似乎对屏幕阅读器有所承诺,因为它从视图中呈现为传统的复选框. Nocaptcha reCAPTCHA

示例#1 - 不安全,但为了便于说明这个想法

下面是一些代码作为示例,不使用mailhide,而是使用recaptcha实现一些事情:https://jsfiddle.net/43fad8pf/36/

<div class="container">
    <div id="recaptcha"></div>
</div>
<div id="email">
    Verify captcha to get e-mail
</div>

function createRecaptcha() {
    grecaptcha.render("recaptcha", {sitekey: "6LcgSAMTAAAAACc2C7rc6HB9ZmEX4SyB0bbAJvTG", theme: "light", callback: showEmail});
}
 createRecaptcha();

function showEmail() {
    // ideally you would do server side verification of the captcha and then the server would return the e-mail
  document.getElementById("email").innerHTML = "email@something.com";
}
Run Code Online (Sandbox Code Playgroud)

注意:在我的示例中,我在javascript函数中有电子邮件.理想情况下,您将在服务器端验证recaptcha,并返回电子邮件,否则机器人可以简单地在代码中获取它.

示例#2 - 服务器端验证和电子邮件返回

如果我们使用更像这样的示例,我们将获得额外的安全性:https://designracy.com/recaptcha-using-ajax-php-and-jquery/

function showEmail() {
    /* Check if the captcha is complete */
    if ($("#g-recaptcha-response").val()) {
        $.ajax({
            type: ‘POST’,
            url: "verify.php", // The file we’re making the request to
            dataType: ‘html’,
            async: true,
            data: {
                captchaResponse: $("#g-recaptcha-response").val() // The generated response from the widget sent as a POST parameter
        },
        success: function (data) {
            alert("everything looks ok. Here is where we would take 'data' which contains the e-mail and put it somewhere in the document");
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert("You’re a bot");
        }
    });
} else {
    alert("Please fill the captcha!");
}
});
Run Code Online (Sandbox Code Playgroud)

verify.php在哪里:

$captcha = filter_input(INPUT_POST, ‘captchaResponse’); // get the captchaResponse parameter sent from our ajax

/* Check if captcha is filled */
if (!$captcha) {
    http_response_code(401); // Return error code if there is no captcha
}
$response =     file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=YOUR-SECRET-KEY-HERE&amp;amp;response=" . $captcha);
if ($response . success == false) {
echo ‘SPAM’;
http_response_code(401); // It’s SPAM! RETURN SOME KIND OF ERROR
} else {
// Everything is ok, should output this in json or something better, but this is an example
    echo 'email@something.com'; 
}
Run Code Online (Sandbox Code Playgroud)