我想保护我在网页上的电子邮件地址。
但我不懂 JavaScript 和 PHP。我只知道 HTML 和 CSS。
所以，请帮助我如何仅使用 CSS 保护我的电子邮件地址。
【问题讨论】：
标签： html css spam-prevention email-address
我倾向于为我的客户使用它：
<a href="mailto:hello@goodbye.com">hello@goodbye.com</a>
根据经验判断，可以肯定它在 90% 的时间内都能正常工作，并且不需要 CSS/JS 即可工作。虽然我认为现在保护电子邮件没有任何意义，因为几乎所有 CDN 都会使用 JS 自动为你做这件事。
【讨论】：
我已经检查了一段时间的技术。虽然我同意混淆不是一个完整的解决方案，但我相信它仍然是实用的，因为我可以通过混淆获得零垃圾邮件来从中受益。
讨论的一些技术：
这里没有建议的另一种技术，即通过使用base64 编码永远不会以纯格式发送您的电子邮件。您只需对您的电子邮件进行编码并使用 JavaScript 将其注入网页。
我在GitHub 上构建了safe-email 项目以结合所有列出的技术。使用免费许可证非常容易使用。您可以查看CodePen 中的示例。随意使用它并挖掘它并做出贡献。
它只是 vanilla-JS，轻量级，没有依赖关系，您可以使用电子邮件的 Base64 编码对其进行配置。
【讨论】：
您可以使用 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>
【讨论】：
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 来指定我们自己的顺序，因此不能使用简单的反向。
不幸的是，这样做会破坏复制/粘贴，因此您的用户将不得不输入地址，但这比收到另一位尼日利亚王子的信件要好。将此与其他技术结合使用，以获得真正防弹的电子邮件地址。
【讨论】：
试试这个代码：
.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 将电子邮件分成两部分。效果很好！
您可以结合上面的两个答案（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>【讨论】：
一段时间以来，我使用了一种类似的 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
但最近谷歌浏览器在网站上显示了网络钓鱼警告。 由于这并非完全错误（从技术上讲，该链接确实是伪造的），因此还有其他简单的解决方案吗？
【讨论】：
您可能知道：混淆技术并非万无一失，收割机机器人将继续改进。有多个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 现在有一个 @ 图标。也许有人在看到这篇文章后建议它;-)。
【讨论】：
要禁止人们复制它，请尝试：
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>
为了防止机器人使用 CSS Codedirection：
<span style="unicode-bidi:bidi-override; direction: rtl;">
moc.elpmaxe@zyx
</span>
【讨论】：
使用 reCAPTCHA Mailhide API
使用编码器甲酸盐
Encode site url to convert data email
Hide email using CSS trick (direction property)
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.
【讨论】：
在 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来生成十六进制代码
【讨论】：
如果可能的话，我建议使用 JavaScript 而不是 CSS 和 JavaScript，因为它可以操纵 dom。你可以很容易地用像
这样的代码来做到这一点<div onclick="document.write('joe@' + 'joemaller.com')">Email Me</div>
这是一个简单但并不理想的解决方案。
JFiddle; http://jsfiddle.net/yFKUD/
【讨论】：
这很简单。您可以仅使用 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网站。
【讨论】：