如何在网页上隐藏你的Email邮件地址

　　作者：Amit Agarwal  翻译：newghost

　　你有一个网站，你想把email地址放在上面，让别人可以很方便地联系你，但是你又担心一旦公开邮箱地址，垃圾邮件可能会像洪水一样涌来。

　　你的担心是对的。现在网上抓取邮件地址的蜘蛛爬虫仅仅通过一条简单的正则表达式，就可以轻易地获取到你的邮件。但是你可能通过一些简单的css和 JavaScript来欺骗一些不太聪明的爬虫。（注* 网络爬虫确实已经充斥了互联网，参见：人类只占到互联网流量的40%不到）

　　1. 通过CSS隐藏邮件地址

　　1a. 使用CSS伪类（pseudo-classes）

　　你可以使用CSS中的::before 和 ::after伪元素插入email的用户名和@另一边的域名。网络蜘蛛，一般是看不到CSS的，直到浏览器渲染前，他都只能看到一个@符号。在这个例子里，我们将隐藏 [email protected]

 <style>   my-email::after {     content: attr(data-domain);   }   my-email::before {     content: attr(data-user);   } </style>   <!--通过 data-user 和 data-domain 设置email的用户名和域名-->   <my-email data-user="john" data-domain="gmail.com">@</my-email>

　　更新：这是@orlie建议的另一个版本，这个对爬虫来说更加的晦涩，因为它将@也隐藏起来了。

 <style>   my-email::after {     content: attr(data-domain);   }   my-email::before {     content: attr(data-user) "/0040";   } </style>   <!--通过 data-user 和 data-domain 设置email的用户名和域名-->  <my-email data-user="john" data-domain="gmail.com"></my-email>

　　上面的解决方案有一个缺陷，用户无法在你的网页上选择和复制你email地址，他们只能手动地写下来。

　　如果想让这个用户体验变得好一点，即允许用户选择到这些伪元素，你也可以用下面这种方式，仅"@"是不可选择的：

 <style>   .domain::before {     content: "/0040";    /* Unicode character for @ symbol */   } </style>   john<span class="domain">abc.com</span>

　　1b. 倒序输出

　　你可以倒序输出你的email地址（[email protected] as moc.cba@nhoj）然后通过unicode-bidi和direction CSS属性让浏览器倒序输出文字。这些文字是可选择的，但是复制出来是倒序的。

 <style>   .reverse {     unicode-bidi: bidi-override;     direction: rtl;   } </style>   <!-- 在HTML里倒序输出你的邮件地址。--> <span class="reverse">moc.cba@nhoj</span>

　　1c. 关闭显示（display）

　　你可以在你的邮件地址里输出一些多余的字符，然后使用display属性隐藏这些字符，来显示真实的邮件地址。

 <style>   #dummy {     display: none;   } </style>   <!-- 你可以添加任意数量的z标签 --> john<span id="dummy">REMOVE</span>@abc<span id="dummy">REMOVE</span>.com

　　2. 通过javaScript混淆电子邮件

　　2a. 使用'onclick'事件

　　你然后可以在mailto的链接中输出你的邮件地址，你仅需要替换到一些字提示符：像'.'和'@'字符可以使用文字代替。然后添加一个onclick事件将这些特殊转换过来。

 <a href = "mailto:johnATgmailDOTcom"     onclick = "this.href=this.href               .replace(/AT/,'&#64;')               .replace(/DOT/,'&#46;')" >联系我</a>

　　2b. 乱序数组

　　将你的邮件地址分割成多个部分的数组，然后使用JavaScript输出正确的顺序再使用.innerhtml属性添加到网页上。

 <span id="email"></span>  〈script〉   var parts = ["john", "abc", "com", "&#46;", "&#64;"];   var email = parts[0] + parts[4] + parts[1] + parts[3] + parts[2];   document.getElementById("email").innerHTML=email; 〈/script〉

　　3. WordPress + php

　　如果你使用的是WordPress，你也可以考虑使用内置的反爬虫插件来编码（加密）你的邮件地址。这个插件会将字符转换成HTML格式的编码（如字母a变成a 而且符号 @ 会变成@）这些字符都是可以在网页上直接显示的。

 <?php echo antispambot("[email protected]"); ?>

　　你也可以在浏览上编码。

　　最后，如果你真的不希望网络爬虫看到你的邮件地址，不要将它放到网页上，你可以试一试Google的reCAPTCHA服务。它会将你的邮件隐藏在验证码（CAPTCHA）后面，人们只有输入正确的验证码才可以看到邮件地址。

　　原文 labnol.org

欢迎大家阅读《如何在网页上隐藏你的Email邮件地址》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

喜欢 (0)赏

[搞代码]

分享 (0)