当前位置: 首页 > 网站建设 > 正文

通过JS或CSS隐藏你的电子邮件地址

作者:Amit Agarwal 翻译:newghost

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

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

1.通过CSS隐藏邮件地址

1a.使用CSS伪类(pseudo-classes)

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

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

上面的解决方案有一个缺陷,用户无法在你的网页上选择和复制你email地址,他们只能手动地写下来。如果想让这个用户体验变得好一点,即允许用户选择到这些伪元素,你也可以用下面这种方式,仅”@”是不可选择的:

1b. 倒序输出

你可以倒序输出你的email地址(john@abc.com as moc.cba@nhoj)然后通过unicode-bidi和direction CSS属性让浏览器倒序输出文字。这些文字是可选择的,但是复制出来是倒序的。

1c. 关闭显示(display)

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

2. 通过JavaScript混淆电子邮件

2a. 使用’onclick’事件

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

2b. 乱序数组

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

3. WordPress + PHP

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

你也可以在浏览上编码。

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

 

来自http://ben-lab.com/share/2071.html

本文固定链接: http://web.wqz.me/509.html | 网络手抄本

该日志由 网络手抄本 于2016年01月27日发表在 网站建设 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 通过JS或CSS隐藏你的电子邮件地址 | 网络手抄本
关键字: , ,

通过JS或CSS隐藏你的电子邮件地址:等您坐沙发呢!

发表评论

快捷键:Ctrl+Enter