如何在网站上显示电子邮件地址以避免垃圾邮件?

85

我在我的网站上展示电子邮件如下

 <a href="mailto:inf@example.com">Email</a>

但是我在使用woorank.com分析我的网站时读到了以下内容,我应该怎么做以避免这种情况发生?

恶意机器人会扫描网络以寻找电子邮件地址,而明文电子邮件地址更容易被收到垃圾邮件。


1
为了符合Woorank的要求,您可以采取各种措施,从将其制作成图像到使用JavaScript中的document.write并拆分电子邮件地址。但要真正防止垃圾邮件...那就是另一回事了。 - user1932079
1
你会看到许多解决此问题的方案。其中一个是不将其作为链接,而是打印info-AT-example.com,这样如果用户撰写邮件,他们就需要手动输入电子邮件地址。这与将电子邮件放在图像中基本相同--在这两种情况下,您都会删除链接。另一种解决方案是添加一个带有验证码的表单,该表单提交到服务器,验证验证码,如果一切正常,则发送电子邮件。 - Chris Baker
重复的问题:http://stackoverflow.com/questions/19359202/safe-way-to-display-email-address-and-contact-number/19361107#19361107 - John
2
@John,这个问题被标记为PHP,但是这个问题被标记为JSP,可能会有更好的解决方案适用于JSP开发者。 - Jack
2
这可能是关于此信息的最权威和详尽的资源,应该可以回答你所有的问题:http://superuser.com/questions/235937/does-e-mail-address-obfuscation-actually-work - fabianfetik
12个回答

42

过去我看到过使用JavaScript实现这个目的的方法。基本上,您可以将电子邮件地址赋值给JavaScript变量,并使用它们更改元素的内容。如果需要,您还可以为禁用JavaScript的用户提供一个备选方案,指向一个表单。以下是一个示例:

var user = 'foo',
    domain = 'bar.com',
    element = document.getElementById('email');

    element.innerHTML = user + '@' + domain;
    //OR
    //'<a href="mailto:' + user + '@' + domain + '">Email</a>'  

这样机器人就看不到电子邮件地址,因为它们不加载javascript。


但是如果用户禁用了JS,那么他们也看不到链接。需要为此提供备选方案。可以通过<a href="mailto<!--comment-->me@...或者<a href=""><span class="hidden">text</span>来实现。 - Eoin

39

好的,你可以每天想出不同的方法。这里是一个使用jQuery的例子。

<a class="mail" href="mailto:john@badmail.mydomain.com">e-mail</a>

然后使用jQuery处理点击事件。

$('a.mail').on('click', function(){
    var href = $(this).attr('href');
    $(this).attr('href', href.replace('badmail.', ''));
});
我喜欢这个的原因是我可以让垃圾邮件发送者认为他们获取了另一个电子邮件地址。 如果我维护自己的垃圾邮件过滤器,我可以将样本收集到我的坏桶中。
而且,这种方法使您能够使用动态数据轻松地呈现页面,并且只需在整个站点上一次性拥有javascript代码片段即可处理真实用户的点击。
在手机上也可以使用。

1
我认为这种方法非常好。但如果您要显示电子邮件地址而不是“e-mail”,请确保使用图像转换器。 - SigmaSteve
2
我喜欢这种解决方案,你可以给垃圾邮件发送者提供错误的信息。总比让他们接受挑战更好 :p - Davy Baert

31

JavaScript解决方案的问题在于禁用JS的人也看不到电子邮件地址。虽然这只是少数人,但你需要结合多种技术以获得最佳结果。

这里详细介绍了许多技术,但我仅提供了解决方案:https://www.ionos.co.uk/digitalguide/e-mail/e-mail-security/protecting-your-e-mail-address-how-to-do-it/

评论

<p>If you have any questions or suggestions, please write an e-mail to:
us<!-- abc@def -->er@domai<!-- @abc.com -->n.com. 
</p>

隐藏的段落

<style type="text/css">
span.spamprotection {display:none;}
</style>

<p>If you have any questions or suggestions, please write an e-mail to:
user<span class="spamprotection">CHARACTER SEQUENCE</span>@domain.com. 
</p>

反转字符串 这可能不适用于多语言站点。

<style type="text/css">
span.ltrText {unicode-bidi: bidi-override; direction: rtl}
</style>
<p>If you have any questions or suggestions, please write an e-mail to:
<span class="ltrText"> moc.niamod@resu</span>.
</p>

JavaScript(就像其他答案中所述)

<script type="text/javascript">
var part1 = "user";
var part2 = Math.pow(2,6);
var part3 = String.fromCharCode(part2);
var part4 = "domain.com"
var part5 = part1 + String.fromCharCode(part2) + part4;
document.write("If you have any questions or suggestions, please write an e-mail to:
   <href=" + "mai" + "lto" + ":" + part5 + ">" + part1 + part3 + part4 + "</a>.");
</script>

ROT13加密 依赖于JavaScript,但也有助于遵守GDPR,因为它被加密了。

<script type="text/javascript">
function decode(a) {
  return a.replace(/[a-zA-Z]/g, function(c){
    return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) 
                               ? c : c - 26);
  })
}; 
function openMailer(element) {
var y = decode("znvygb:orahgmre@qbznva.qr");
element.setAttribute("href", y);
element.setAttribute("onclick", "");
element.firstChild.nodeValue = "Open e-mail software";
};
</script>
<a id="email" href=" " onclick='openMailer(this);'>E-mail: please click</a>

仅使用CSS 从这里借鉴: 如何仅使用CSS保护电子邮件地址

<!doctype html>
<html>
<head>
    <title>Protect e-mail with only css</title>
    <style type="text/css">
        .e-mail:before {
            content: attr(data-website) "\0040" attr(data-user);
            unicode-bidi: bidi-override;
            direction: rtl;
        }
    </style>
</head>
<body>

<span class="e-mail" data-user="nohj" data-website="moc.liamg"></span>

</body>
</html>

2
我使用了你的纯CSS解决方案,谢谢。如今现在真的有人禁用JS吗?所有的网站都大量使用它(我们可以说这是必须的)。 - AlainIb
1
@AlainIb 很多人禁用它的原因是因为跟踪,例如分析、Facebook、广告等。 - Eoin
1
我觉得反转字符串的想法很有趣。但是对我来说不起作用,因为当你从页面复制时它会再次反转。 - OutstandingBill
2
@OutstandingBill,我们并没有防止复制和粘贴,而是防止机器人。这并不意味着你的观点无效,我真的不知道答案。我想说的是,这些类型的解决方案通常不是最安全的,因为它们更多的是混淆而不是真正的安全性。通常我会选择JavaScript解决方案。 - Eoin
@HermanToothrot 我不是很确定。我不认为这是一个惊人的解决方案,但机器人不会担心 CSS,因为它只是样式,所以它可以工作。 - Eoin
显示剩余2条评论

28
在网站上隐藏电子邮件有多种不同的选择,通常使用电子邮件地址的HTML实体版本(如Aziz-Saleh建议的),但从实际的网页设计角度来看,仅在网站上放置电子邮件地址并不是最用户友好的做法。
例如,mailto:链接会自动触发浏览器打开用户选择的电子邮件应用程序-但请考虑一下。并非每个人都有专用的电子邮件应用程序。例如,我不使用Outlook(我是Windows用户),除非我安装了Windows Live Mail,否则我的计算机无法打开该链接。我认为Chrome可以在您登录后将链接打开到GMail中,但我需要检查一下。
最终,通过使用mailto:,您可能会疏远无法首先使用该链接的用户群体。
我建议使用电子邮件表单,并且有很多易于follow的教程可供PHP和你的JSP语言使用,例如这里的链接:在JSP中发送电子邮件甚至在StackOverflow 通过使用您的服务器发送电子邮件,您可以更加紧密地控制电子邮件的生成方式,用户允许输入的数据以及您甚至可以发送一封由服务器生成的回复电子邮件以确认您已收到他们的消息。这是一种经过验证的现实世界方法,允许客户和访问者与您联系,同时仍然授予您对整个过程的保护和控制。

TL;DR: 原始的 mailto: 链接可能会使没有专用电子邮件程序的人感到陌生,而如果你使用 JSP 表单,你可以控制他们如何联系你、使用哪些信息(你可以使用字段和 HTML5 的 required 属性来强制执行某些输入字段),甚至你还可以回复一个 do-not-reply 电子邮件,这样他们就知道他们的消息被收到了(只要不要忘记索取他们的电子邮件地址)


9
您是正确的,但使用“联系页面”的唯一问题在于用户将无法将我的电子邮件地址添加到他们的通讯录中,因此每次他们想发送电子邮件时都需要访问网站。 - Jack
15
我强烈建议不要使用联系页面。在太小的表单字段中输入内容很麻烦,也无法附加任何内容,而且我想希望将发送的邮件保存在发件箱中的人比不使用邮件程序的人所占的比例更高。 - Guntram Blohm
1
@Socowi 怎么了? - lmenus
2
由于用户必须在表单中输入她的电子邮件地址,因此网站所有者必须确保根据GDPR处理她的电子邮件地址。在发送到服务器之前,用户的电子邮件地址必须进行加密(这应该不是问题。您的网站应该使用https)。用户必须被告知如何使用她的电子邮件地址,存储多长时间等信息。 - Socowi
1
@Eoin 不行。如果你使用mailto链接,你的服务器看不到他们的电子邮件,因此它不受GDPR的约束。 - JustinLovinger
显示剩余5条评论

18

解决方案 1:

您可以使用许多公开可用的电子邮件地址编码器,例如(Google 上的第一个结果):

http://www.wbwip.com/wbw/emailencoder.html

这将把电子邮件编码为其字符实体值,这将需要更多逻辑来解码它。

因此,像test@gmail.com这样的电子邮件会变成&#116;&#101;&#115;&#116;&#064;&#103;&#109;&#097;&#105;&#108;&#046;&#099;&#111;&#109;,也可以在 mailto 中使用。

解决方案 2:

使用在线电子邮件转换为图像的工具(同样是 Google 上的第一个结果):

http://www.email2image.com/Convert-Email-to-Image.aspx

将其转换为图像。其他服务通过 API 自动执行此操作,例如:

https://www.mashape.com/seikan/img4me-text-to-image-service#!endpoint-Main


10
任何一个值得一提的机器人都能够破解编码邮件。令人惊讶的是,并不是所有机器人都能做到这点,但在一般情况下,这不是一个安全的选择。如果你还是要选择这种方式,那么选择一个不那么流行的变体可能会更加持久。 - tripleee

9

个人而言,我想出了一个非常直接和有趣的解决方案。我将以下代码放在我希望我的电子邮件地址出现的位置:

<script>(function whatever(){var s='@',n='nabil',k='kadimi.com',e=n+s+k,l='<a href=mailto:{{spam@uce.gov}}>{{spam@uce.gov}}</a>'.replace(/{{.+?(}})/g,e);document.write(l)})()</script>

说明

使用正则表达式爬取网站并查找电子邮件的机器人将抓取FTC(联邦贸易委员会)的电子邮件地址(spam@uce.gov)。合法的访问者将在使用该代码构建后看到您的电子邮件地址。

##扩展

<script>
    (function whatever() {
        var s = '@'
            , n = 'nabil'
            , k = 'kadimi.com'
            , e = n + s + k
            , l = '<a href=mailto:{{spam@uce.gov}}>{{spam@uce.gov}}</a>'.replace(/{{.+?(}})/g, e)
        ;
        document.write(l);
    })();
</script>

##演示

<script>(function whatever(){var s='@',n='nabil',k='kadimi.com',e=n+s+k,l='<a href=mailto:{{spam@uce.gov}}>{{spam@uce.gov}}</a>'.replace(/{{.+?(}})/g,e);document.write(l)})()</script>


嗨,我不太熟悉JS。你能简要解释一下你的代码吗?我特别关注<a href=mailto:{{spam@cia.gov}}>{{spam@fbi.gov</a>}}这部分。这段代码会让机器人获取CIA/FBI的地址并向他们发送垃圾邮件吗?提前谢谢你。 - A.Alessio
1
@A.Alessio 你好!我添加了一个解释。 - Nabil Kadimi

4
我一直在使用 CloudFlare 的免费电子邮件地址混淆功能:https://support.cloudflare.com/hc/en-us/articles/200170016-What-is-Email-Address-Obfuscation-
电子邮件收割机和其他机器人在互联网上漫游,寻找电子邮件地址,将其添加到垃圾邮件目标收件人列表中。这种趋势导致不断增加的不想要的电子邮件。

网络管理员通过编写电子邮件地址(即help [at] cloudflare [dot] com )或使用嵌入式电子邮件地址图片等巧妙方法来保护网站免受此类攻击。但是,您将失去单击电子邮件地址自动发送电子邮件的便利性。

通过启用Cloudflare电子邮件地址混淆,您网页上的电子邮件地址将被混淆(隐藏),不会被机器人发现,同时仍然对人类可见。实际上,对于访问者,您的网站没有可见变化。

为了防止意外的网站行为,在以下情况下不会混淆电子邮件地址:

  • 任何HTML标记属性,除了 a 标记的 href 属性。
  • 其他HTML标记
  • 任何没有"MIME类型"text/html"或"application/xhtml+xml"的页面
我与CloudFlare无关,只是欣赏他们免费提供的一切。

3
我使用电子邮件编码器,例如http://www.wbwip.com/wbw/emailencoder.html。只需将您的地址输入源代码,并放在“a”标签之间。就像这样。
<a href="mailto:&#105;&#110;&#102;&#111;&#064;&#101;&#120;&#097;&#109;&#112;&#108;&#101;&#046;&#099;&#111;&#109;">&#105;&#110;&#102;&#111;&#064;&#101;&#120;&#097;&#109;&#112;&#108;&#101;&#046;&#099;&#111;&#109;</a>

这是info@example.com的编码


10
这将防止一个不熟练的用户从你网站的源代码中获取电子邮件地址,但根本无法阻止机器人。 - Guntram Blohm

3
谷歌实际上提供了一个相关服务。免费使用且效果不错:邮件验证码

7
不再起作用,因为它依赖于旧版本的人机验证。我希望谷歌的不同部门能够彼此交流。 - Isaac Rabinovitch

3
将您的电子邮件地址放在 PNG 或 GIF 格式的透明图像中,并在网页上显示该图像。只有人类读者才会知道该图像显示了一个电子邮件地址。 这将防止机器人在您的网站上找到您的电子邮件地址。

4
它还将防止残障用户向您发送电子邮件。 - user3546284
1
我同意,除非你的电子邮件非常简单(info@company.com),否则我不会使用图片,因为人们不会费力去打字。或者在此过程中犯错误。 - Davy Baert

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接