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

时间:2016-12-25 05:51:42

标签: html css web-crawler mailto

TL;博士

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

摘要

  • 使用脚本发送模糊处理 或联系表单

  • 电子邮件地址需要完全可见给人类观众维护mailto:功能

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

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

期望的效果:

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

  • 电子邮件地址<显示在页面上,或者可以在某种用户互动后轻松显示,例如打开模式。

  • 用户可以点击电子邮件地址,从而触发mailto:功能。

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

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

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

  • 我没有收件箱里面装满垃圾邮件

NOT 工作

是什么
  • 添加联系表单 - 或类似内容 - 而不是电子邮件地址

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

  • 用地址图像替换地址

    这会给使用屏幕阅读器的人带来巨大的劣势(请记住您未来项目中的视障人士

    除非您使图片可点击,然后将mailto:功能添加为链接mailto:,否则 删除 href功能< strong>击败目的,现在电子邮件对机器人可见。

可能有用:

  • pseudo-elements

  • 中巧妙使用CSS
  • 使用base64编码

  • 的解决方案
  • 分解电子邮件地址并在文档中展开各个部分,然后在用户点击按钮时将它们重新组合在一起(这可能涉及多个CSS类和anchor tags

  • 的用法
  • 通过html

    提升CSS个属性

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

    What if We Could Use CSS to Alter HTML Attributes?

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

类似问题/修正

(这是Joe Maller建议的一个很好的解决方案,它运作良好,但它的基于脚本。这就是它的样子;

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

  • Looking for a php only email address obfuscator function

    (使用PHPCSS使用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。可以改进吗?

    这就是它的样子;

    &#13;
    &#13;
    <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>
    &#13;
    &#13;
    &#13;

  • Does e-mail address obfuscation actually work?

    (此超级用户问题的选定答案很棒,它提供了使用不同混淆方法收到的垃圾邮件数量的研究。

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

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

  • SO还有许多其他问题都有类似的答案。我没有发现任何符合我想要的效果

  • 的内容

问题:

通过合并两个或多个修补程序(甚至添加新的修补程序),是否可以提高上述电子邮件混淆方法的效率(即尽可能少的垃圾邮件) while:

A-维护mailto:功能;和

B-支持屏幕阅读器

修改:

下面的许多答案和评论提出了一个非常好的问题,同时指出在没有某种js的情况下无法做到这一点

询问/暗示的问题是:

  

为什么不使用js

答案是我对js

过敏

开玩笑说,

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

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

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

  • 好奇心(因为我实际上正在使用其中一个js修补程序)我想看看如果讨论此事会导致更好的方法这样做。

12 个答案:

答案 0 :(得分:31)

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

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

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

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

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

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

答案 1 :(得分:26)

击败电子邮件机器人很难。您可以查看维基百科上的Email Address Harvesting countermeasures section

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

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

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

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

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

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

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

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

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

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

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

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

    来自JAWSFreedom Scientific好屏幕阅读器。之前我曾经用它来听取盲人用户如何阅读我的网页。 (如果您听到男性声音同时阅读两个动作[如点击链接]和文本,请尝试将1个声音更改为女性,以便1个声音可以读取动作,而另一个声音可以读取文本。这样可以更轻松地听到网页的声音读取视觉上的暗示。)

    祝你Email Address Harvesting countermeasure努力!

答案 2 :(得分:13)

这是一种使用JavaScript的方法,但脚印相当小。它也非常非常好,并且我不建议在HTML中使用内联JS的方法,除非你极不情愿使用JS。

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

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

没有JS这样做的主要挑战是CSS不能改变HTML属性。 (你所链接的article是一个“天空中的馅饼”,并且对今天或不久的将来可能产生的影响没有任何影响。)

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

通过上面概述的方法,在data-contact属性中使用base64编码的电子邮件地址非常“一次性”#34; - 只要刮刀不是专门为您的网站设计的,它就应该有效。

答案 3 :(得分:7)

简单+很多@ +可编辑而不使用工具

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

答案 4 :(得分:6)

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

我们的想法是,当用户点击复选框(参见下面的nocaptcha)时,会显示完整的电子邮件地址。

虽然recaptcha传统上不仅对于屏幕阅读器而且对人类来说也很难,而google的nocaptcha recaptcha的角色你可以阅读  here因为它们与可访问性测试有关。它似乎对屏幕阅读器有所承诺,因为它从视图中呈现为传统的复选框。 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";
}

注意:在我的示例中,我在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!");
}
});

其中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'; 
}

答案 5 :(得分:3)

编写刮刀的人希望尽可能提高刮刀的效率。因此,他们不会下载样式,脚本和其他外部资源。我不知道使用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是内联和透明的,因此我们只需要设置其边框和尺寸。如果不使用Javascript,您无法使iframe的大小与其内容的大小相匹配,因此我们所能做的最好就是为其提供预定义的维度。

答案 6 :(得分:3)

首先,我认为用CSS做任何事都行不通。所有机器人(谷歌的抓取工具除外)都会忽略网站上的所有样式。任何解决方案都必须与JS或服务器端一起使用。

服务器端解决方案可能会生成一个链接到新标签的<a>,该标签只会重定向到所需的mailto

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

答案 7 :(得分:2)

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

这里回答的一些基于脚本的选项可能适用于某些机器人,但是你想要没有脚本,所以,不,你不能。

答案 8 :(得分:2)

基于 MaanooAk 的代码,这是我的版本:

<a href="mailto: Mike Myers"
onclick="this.href=this.href.replace(' Mike ','MikeMy'); this.href=this.href.replace('Myers','ers@vwx.yz')">&#9993; Send Email</a>

与 MaanookAks 版本的不同之处在于,在悬停时您看不到 mailto: 和损坏的电子邮件地址,而是 mailto: 和联系人姓名。当您点击它时,名称将被电子邮件地址替换。

在代码中,电子邮件地址分为两部分。在代码中没有任何地方可以看到完整的电子邮件地址。

答案 9 :(得分:0)

PHP解决方案

function printEmail($email){
    $email = '<a href="mailto:'.$email.'">'.$email.'</a>';
    $a = str_split($email);
    return "<script>document.write('".implode("'+'",$a)."');</script>";
}

使用

echo printEmail('test@gmail.com');

结果

<script>document.write('<'+'a'+' '+'h'+'r'+'e'+'f'+'='+'"'+'m'+'a'+'i'+'l'+'t'+'o'+':'+'t'+'e'+'s'+'t'+'@'+'g'+'m'+'a'+'i'+'l'+'.'+'c'+'o'+'m'+'"'+'>'+'t'+'e'+'s'+'t'+'@'+'g'+'m'+'a'+'i'+'l'+'.'+'c'+'o'+'m'+'<'+'/'+'a'+'>');</script>

P.S。要求:用户必须启用JavaScript

答案 10 :(得分:0)

这是我的新解决方案。我首先通过添加小块来构建电子邮件地址字符串,然后将此字符串也用作标题:

adress = 'mailt' + 'o:MikeM' + 'yers@v' + 'wx.yz';
document.getElementsByClassName('Email')[0].title = adress;
function mail(){window.location.href = adress;}
<a class='Email' onclick='mail()'>&#9993; Send Email</a>

我在网站的页脚中使用它。许多页面都具有相同的页脚。

答案 11 :(得分:-1)

我发现有效的一种方法是将它与css一起使用,如下所示:

<a href="mailto:myemail@ignore-domain.com">myemail@<span style="display:none;">ignore-</span>domain.com

然后编写一个javascript,使用regex从ignoreme-属性中删除href="mailto:..."个字词。这将隐藏来自机器人的电子邮件,因为它会在真实域之前附加ignore-字,这将在屏幕阅读器上工作,当用户点击链接时,自定义js函数将从{{1}中删除ignore-字词}属性所以它会打开真正的电子邮件。

到目前为止,这种方法对我来说非常有效。你可以阅读更多相关内容 - http://techblog.tilllate.com/2008/07/20/ten-methods-to-obfuscate-e-mail-addresses-compared/