OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

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


分享到
分类 编程技巧   发布 ourjs  1390020669000
注意 转载须保留原文链接,译文链接,作者译者等信息。  
作者:Amit Agarwal  翻译:newghost

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

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

1. 通过CSS隐藏邮件地址

1a. 使用CSS伪类(pseudo-classes)
你可以使用CSS中的::before 和 ::after伪元素插入email的用户名和@另一边的域名。网络蜘蛛,一般是看不到CSS的,直到浏览器渲染前,他都只能看到一个@符号。在这个例子里,我们将隐藏 john@gmail.com

<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地址(john@abc.com 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变成&#97; 而且符号 @ 会变成&#64;)这些字符都是可以在网页上直接显示的。

<?php echo antispambot("john@abc.com"); ?>

你也可以在浏览上编码。

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

原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 你不知道的JavaScript用法,Hacker是这样写JS的
  2. QQ邮箱是如何泄密的:JSON劫持漏洞攻防原理及演练
  3. 那些用JavaScript写的操作系统
  4. 为什么大神级程序员的C语言代码里到处都是goto?
  5. 下一阶段的NodeJS:TJ负责Node,NPM可能要收费
  6. Web标准化正在消灭HTML程序员
  7. 告诉大家一个好消息,我被炒了!
  8. PayPal为什么从Java迁移到Node.js,性能提高一倍,文件代码减少44%
  9. NPM开始招人了
  10. 一名靠谱的JavaScript程序员应备的素质
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 编程技巧
  1. Ruby己死?NodeJS能否取代Ruby?
  2. 永远不要在Linux执行的10个最危险的命令
  3. 代码审查:写出好的 commit message
  4. 性能测评:Ngix_Lua, Node.JS Python三者性能相当,均比php快近一倍
  5. 技术干货:Nginx 战斗准备 — 优化指南
  6. 高级JavaScript调试—— console.table()
  7. NodeJS on Nginx: 使用nginx反向代理处理静态页面
  8. 优秀工具推荐:超实用的 CSS 库,样板和框架
  9. 写给 Node.js 学徒的 7 个建议
  10. 一些达成共识的JavaScript编码风格约定

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号