仅使用 CSS 保护电子邮件地址
Posted
技术标签:
【中文标题】仅使用 CSS 保护电子邮件地址【英文标题】：Protect e-mail address with CSS only 【发布时间】：2014-02-20 17:12:23 【问题描述】：我想保护我在网页上的电子邮件地址。
但我不懂 javascript 和 php。我只知道 html 和 CSS。
所以，请帮助我如何仅使用 CSS 保护我的电子邮件地址。
【问题讨论】：
“我想保护我在网页上的电子邮件地址……”所以不要将您的电子邮件地址放在任何可公开访问的文档中！其他一切都与“默默无闻的安全性”一样有用和有用。 您可以使用使用 reCAPTCHA Mailhide API 这有点过时了，但我想它仍然相关...superuser.com/q/235937/309091 【参考方案1】：我倾向于为我的客户使用它：
<a href="mailto:hello@goodbye.com">hello@goodbye.com</a>
根据经验判断，可以肯定它在 90% 的时间内都能正常工作，并且不需要 CSS/JS 即可工作。虽然我认为现在保护电子邮件没有任何意义，因为几乎所有 CDN 都会使用 JS 自动为你做这件事。
【讨论】：
【参考方案2】：我已经检查了一段时间的技术。虽然我同意混淆不是一个完整的解决方案，但我相信它仍然是实用的，因为我可以通过混淆获得零垃圾邮件来从中受益。
讨论的一些技术：
使电子邮件仅对人类可见的 CSS 技巧（请参阅来自@user3087089 的已接受答案） 将 HTML 垃圾添加到欺骗抓取工具（请参阅@fzzylogic 的回答） 使用 JS 注入电子邮件（由 @Dean 和其他人建议）这里没有建议的另一种技术，即通过使用base64 编码永远不会以纯格式发送您的电子邮件。您只需对您的电子邮件进行编码并使用 JavaScript 将其注入网页。
我在GitHub 上构建了safe-email 项目以结合所有列出的技术。使用免费许可证非常容易使用。您可以查看CodePen 中的示例。随意使用它并挖掘它并做出贡献。
它只是 vanilla-JS，轻量级，没有依赖关系，您可以使用电子邮件的 Base64 编码对其进行配置。
【讨论】：
【参考方案3】：您可以使用 Font Awesome：
在<head>：
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
在<body>：
<p>john<i class="fa fa-at"></i>hotmail.com</p>
【讨论】：
【参考方案4】：Flexbox 允许您更改包含元素内的项目的顺序，我们可以使用它在 html 中分离和重新排列我们电子邮件地址的部分，但将它们作为一个清晰的整体呈现给用户。
div
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
<div>
<span>example.com</span>
<span>@</span>
<span>george</span>
<span>Email me at the following address: </span>
</div>这里我们使用flex-direction: row-reverse 来颠倒元素的顺序。
如果诈骗者努力尝试，他可能会解决这个问题，他所要做的就是反转元素以重新创建地址。为了更彻底的尝试，我们可以手动指定顺序。
div
display: flex;
<div>
<span style="order: 3">@</span>
<span style="order: 4">example.com</span>
<span style="order: 1">Email me at the following address: </span>
<span style="order: 2">user</span>
</div>这里我们使用order 来指定我们自己的顺序，因此不能使用简单的反向。
不幸的是，这样做会破坏复制/粘贴，因此您的用户将不得不输入地址，但这比收到另一位尼日利亚王子的信件要好。将此与其他技术结合使用，以获得真正防弹的电子邮件地址。
【讨论】：
【参考方案5】：试试这个代码：
.e-mail:before
content: "\006a\0068\006f\006e\0040\0067\006d\0061\0069\006c\002e\0063\006f\006d";
<span class="e-mail"></span>这只是以十六进制编码的电子邮件。
【讨论】：
为了增加更多保护，我使用.e-mail:before 和.e-mail:after 将电子邮件分成两部分。效果很好！
更正：是“十六进制编码”，不是“加密”。【参考方案6】：
您可以结合上面的两个答案（Ans1 和 Ans2）使 mailto 与 css 一起使用以提高可用性。
<style type="text/css">
.e-mail:before
content: attr(data-website) "\0040" attr(data-user);
unicode-bidi: bidi-override;
direction: rtl;
</style>
<a href="mailto:%6A%6F%68%6E%40%67%6D%61%69%6C%2E%63%6F%6D">
<span class="e-mail" data-user="nhoj" data-website="moc.liamg"></span>
</a>【讨论】：
这适用于页面上现有的代码和图标。谢谢！ 很好的解决方案，但是避免在页面上显示电子邮件地址不是更好吗？机器人不也收获页面上的明文吗？ @HermanToothrot 页面上没有“明文”之类的东西。任何爬虫/机器人/脚本/程序只能看到它在标记中的内容——如果它被混淆了，或者在这个解决方案的情况下不存在，那么对于爬虫来说，那里根本就没有文本。例外情况是，如果爬虫使用 OCR 来抓取网页，这样它就可以像人类一样看到该页面，但我不确定这有多普遍。【参考方案7】：一段时间以来，我使用了一种类似的 JavaScript 技术，它允许“mailto”功能同时保持 HTML 有效：
HTML：
<a href="http://www.domain.com" class="js-contact">user</a>
JavaScript（小型 jQuery 插件）
// mailto anti-spam
;(function($)
$.fn.mailTo = function()
this.each(function()
var user = $(this).html() || false,
domain = $(this).attr('href')
.replace('http://www.', '')
.replace('www.', '')
.replace('http://', '')
.replace('/', '') || false;
if (user && domain)
$(this).html(user + '@' + domain).attr('href', 'mailto:' + user + '@' + domain);
);
return this;
;
)(jQuery);
用法
// protect inline e-mails
$('.js-contact').mailTo();
http://codepen.io/ced-anamorphik/pen/QwVrKZ
但最近谷歌浏览器在网站上显示了网络钓鱼警告。 由于这并非完全错误（从技术上讲，该链接确实是伪造的），因此还有其他简单的解决方案吗？
【讨论】：
【参考方案8】：您可能知道：混淆技术并非万无一失，收割机机器人将继续改进。有多个arguments against obfuscation。
话虽如此，对于您已经提到的相当有趣的技术，这里有一些额外的技术。
HTML 技术：
使用 html 注释符号 或替换 html 实体 在几年前就已经是 shown to be a pretty weak approach。
使用图像代替文字对大多数用户来说都是一种痛苦，包括非视障人士，因为他们无法剪切和粘贴。不过效果很好。
suggested a while back 是一种有趣的纯 HTML 方法，它允许使用超链接。
<a href="mailto:jhonnotspam@gmail.com?subject=EMAIL ADDRESS NEEDS EDITING&body=Please remove the text 'notspam' from the address before sending your email.">Email me.</a>
CSS 技术： 这些当然也不是万无一失的。除了你已经提到的：
使用 CSS display:none 也很有用。简单地去除样式标签的机器人将在收获的地址中包含隐藏的文本。
jhon<span style="display:none">-anti-bot-bit</span>@gmail.com.
可以使用网络图标字体来拉入@ 图标，并且可以通过不会绊倒屏幕阅读器的方式来执行此操作。由于显而易见的原因，我没有看到带有@图标的网络图标字体，但这会起作用。
更新： Font Awesome 现在有一个 @ 图标。也许有人在看到这篇文章后建议它;-)。
【讨论】：
【参考方案9】：要禁止人们复制它，请尝试：
span.email
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
还有 HTML：
<span class="email">jack@gmail.com</span>
JSFIDDLE
为了防止机器人使用 CSS Codedirection：
<span style="unicode-bidi:bidi-override; direction: rtl;">
moc.elpmaxe@zyx
</span>
【讨论】：
【参考方案10】：使用 reCAPTCHA Mailhide API
Mail hide using api
使用编码器甲酸盐
Encode site url to convert data email
Hide email using CSS trick (direction property)
Demo
Scramble the email - While coding HTML, jumble and write the email address in reverse direction. (a@b.com should be written as moc.b@a). We can then use CSS stylesheet to reverse the email address againwhen rendering. Here's the sample HTML code with CSS.
<style type="text/css">
.backwards
unicode-bidi:bidi-override;
direction: rtl;
</style>
<span class="backwards">moc.b@a</span>
If someone copies your email address, it will available in the reverse direction. Would not work on older browsers.
如何使用 JavaScript 向垃圾邮件发送者隐藏您的电子邮件地址
Let's look at more advanced methods that use javascipt to hide the email (name@domain.com). Remember to use noscript tags since some users prefer to disable javascript in browsers:
基本电子邮件脚本
<script language=JavaScript>
<!--
document.write("name" + "@" + "domain.com");
//--> </script>
2. Basic Mailto: Email Script with Link Text
<script language=JavaScript>
<!--
var user = "name";
var host = "domain.com";
var link = user + "@" + host;
document.write("<a hre" + "f=ma" + "ilto:" + user + "@" + host + ">" + link + "</a>");
//--> </script>
3. Inline JavaScript
<a href="#" onclick="JavaScript:window.location='mailto:'+'name'+'@'+'domain'+'.com'" >Send me an email</a>
外部 JavaScript 文件
<script language="JavaScript" src="email-encoding.js"></script>
The external javascript contains the code mentioned in 2 above.
【讨论】：
【参考方案11】：在 html 中嵌入电子邮件的一种简单有效的方法是使用十六进制值！ 例如 john@smith.me 的十六进制值是：
%6A%6F%68%6E%40%73%6D%69%74%68%2E%6D%65
您可以在 HTML 代码中使用以下标签
<a href="mailto:%6A%6F%68%6E%40%73%6D%69%74%68%2E%6D%65">email me</a>
这是在网页中嵌入电子邮件的一种非常简单有效的方法。
你以这种方式隐藏了“maito：”和电子邮件。
您可以使用此tool 生成 %64 十六进制代码
你也可以使用这个tool来生成十六进制代码
【讨论】：
【参考方案12】：如果可能的话，我建议使用 JavaScript 而不是 CSS 和 JavaScript，因为它可以操纵 dom。你可以很容易地用像
这样的代码来做到这一点<div onclick="document.write('joe@' + 'joemaller.com')">Email Me</div>
这是一个简单但并不理想的解决方案。
JFiddle; http://jsfiddle.net/yFKUD/
【讨论】：
我只想使用 CSS。 你可以混淆它，但恕我直言，无论你做什么，总有一天垃圾邮件发送者会得到你的电子邮件地址。未来在于垃圾邮件过滤器，而不是试图对电子邮件地址保密。一种可能的解决方法是装饰电子邮件，依靠用户键入或更正它们： foo (at) example.com 或 foo-NOSPAM@REMOVE-THIS-example.com 是常见的方案（希望垃圾邮件发送者不会尝试破译这些常见的方案！），图形电子邮件地址是另一种方式。【参考方案13】：这很简单。您可以仅使用 HTML 和 CSS 保护您的电子邮件地址。您不需要了解 PHP 或 Java 脚本。试试下面的代码。
简单的 HTML 和 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>
以上代码的输出：
jhon@gmail.com
请注意：
这里我只是使用了两个额外的属性。
1)data-user在reverse中写下你的电子邮件ID用户名。
2)data-website在reverse中写下你的电子邮件ID网站。
【讨论】：
优秀 - 好主意！ +1 值得注意的是 DOM 中不存在伪元素。你应该指出这一点。您也不能复制/粘贴突出显示/选择它们.. 聪明，但屏幕阅读器用户无法使用该内容。 @NicholasHazel 但对于抓取电子邮件的机器人来说，这将是逾越节……希望不要认为这是一个电子邮件地址。与 string'@'string'.'string 相反 @Chandra：如果您无法弄清楚“kcarc ot ysae ytterp si taht kniht I”的含义，那么您需要重新阅读自己发布的解决方案并按照其建议解码用户名和网站! 文本不可选择。以上是关于仅使用 CSS 保护电子邮件地址的主要内容，如果未能解决你的问题，请参考以下文章
如何保护网站上的电子邮件地址免受现代支持 JS 的机器人的攻击？