Html 仅使用 CSS 保护电子邮件地址
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21421948/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Protect e-mail address with CSS only
提问by
I want to protect my e-mail address on webpages.
我想在网页上保护我的电子邮件地址。
But I don't know JavaScript and PHP. I know only HTML and CSS.
但我不懂 JavaScript 和 PHP。我只知道 HTML 和 CSS。
So, please help me how to protect my email address with CSS only.
所以，请帮助我如何仅使用 CSS 保护我的电子邮件地址。
回答by
It's very simple. You can protect your email address with only HTML & CSS. You don't need to know about PHP or Java script. Try below code.
这很简单。您可以仅使用 HTML 和 CSS 来保护您的电子邮件地址。您不需要了解 PHP 或 Java 脚本。试试下面的代码。
Simple HTML and CSS code:
简单的 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) "[email protected]
40" 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>
Output of above code:
上面代码的输出：
.e-mail:before {
content: "<span class="e-mail"></span>
6a<a href="mailto:%6A%6F%68%6E%40%73%6D%69%74%68%2E%6D%65">email me</a>
68<style type="text/css">
.e-mail:before {
content: attr(data-website) "<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
40" 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>
6f<p>john<i class="fa fa-at"></i>hotmail.com</p>
6e<div onclick="document.write('joe@' + 'joemaller.com')">Email Me</div>
40div {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
67<div>
<span>example.com</span>
<span>@</span>
<span>george</span>
<span>Email me at the following address: </span>
</div>
6ddiv {
display: flex;
}
61<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>
69<a href="http://www.domain.com" class="js-contact">user</a>
6c// 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);
2e// protect inline e-mails
$('.js-contact').mailTo();
63##代码##6f##代码##6d";
}Please note:
请注意：
Here I'm just used two extra attributes.
这里我只使用了两个额外的属性。
1) data-userwrite your e-mail id user name in reverse.
1)data-user把你的e-mail id 用户名反写。
2) data-websitewrite your e-mail id website in reverse.
2)data-website将您的电子邮件 ID 网站反向写入。
回答by Chandra Nakka
Try this code:
试试这个代码：
This is just the email encoded in hexadecimal.
这只是以十六进制编码的电子邮件。
回答by fzzylogic
As you likely know: Obfuscation techniques can't be foolproof and harvester bots will continue to improve. There are a number of arguments against obfuscation.
您可能知道：混淆技术不可能万无一失，收割机机器人将继续改进。有许多反对混淆的论据。
That being said, here are some additional techniques to the rather interesting ones you already mentioned.
话虽如此，这里有一些额外的技术，而不是你已经提到的相当有趣的技术。
HTML techniques:
HTML 技术：
Using html comment signsor substituting html entitieshas some years ago already been shown to be a pretty weak approach.
Using an imageinstead of text is a pain for most users, including the non-visually impaired as they can't cut and paste. It works well though.
One interesting pure HTML approach that allows for using a hyperlink was suggested a while back.
<a href="mailto:[email protected]?subject=EMAIL ADDRESS NEEDS EDITING&body=Please remove the text 'notspam' from the address before sending your email.">Email me.</a>
使用html 注释标志或替换html 实体在几年前已经被证明是一种非常弱的方法。
对于大多数用户来说，使用图像而不是文本是一种痛苦，包括无法剪切和粘贴的非视力障碍者。不过效果很好。
不久前有人提出了一种允许使用超链接的有趣的纯 HTML 方法。
<a href="mailto:[email protected]?subject=EMAIL ADDRESS NEEDS EDITING&body=Please remove the text 'notspam' from the address before sending your email.">Email me.</a>
CSS techniques:These are of course not fool proof either. Besides what you've mentioned already:
CSS 技术：这些当然也不是万无一失的。除了你已经提到的：
Using CSS display:none is also useful. Bots that simply strip out style tags will include the hidden text in the harvested address.
jhon<span style="display:none">-anti-bot-bit</span>@gmail.com.A web icon font could be used to pull in an @ iconand it's possible to do this in a way that won't trip up screen readers. I've not seen a web icon font with an @ icon for obvious reasons, but this would work.
使用 CSS display:none 也很有用。简单地去除样式标签的机器人将在获取的地址中包含隐藏文本。
jhon<span style="display:none">-anti-bot-bit</span>@gmail.com.可以使用 Web 图标字体来拉入 @图标，并且可以以不会绊倒屏幕阅读器的方式执行此操作。由于显而易见的原因，我还没有看到带有@ 图标的网络图标字体，但这会起作用。
Update:Font Awesomenow has an @ icon. Maybe someone suggested it after seeing this post ;-).
更新：Font Awesome现在有一个 @ 图标。也许有人在看到这篇文章后建议它;-)。
回答by Hbirjand
One of the simple and effecting ways of embedding emails in html is by using hex values! for example hex value for [email protected] is:
在 html 中嵌入电子邮件的一种简单而有效的方法是使用十六进制值！例如 [email protected] 的十六进制值为：
%6A%6F%68%6E%40%73%6D%69%74%68%2E%6D%65
%6A%6F%68%6E%40%73%6D%69%74%68%2E%6D%65
and you can use the following tag in your HTML Code
您可以在 HTML 代码中使用以下标签
##代码##This is a really simple and effective way of embedding email in a webpage.
这是在网页中嵌入电子邮件的一种非常简单有效的方法。
you have hided the "maito:" and the email in this way.
您以这种方式隐藏了“maito：”和电子邮件。
you can use this toolto generate the %64 hex code
您可以使用此工具生成 %64 十六进制代码
you can also use this toolto generate the hex code
您也可以使用此工具生成十六进制代码
回答by Yeo
回答by veuncent
You can use Font Awesome:
您可以使用字体真棒：
In <head>:
在<head>：
In <body>:
在<body>：
回答by Dean Meehan
I would recommend using JavaScript if possible over CSS and JavaScript as it can manipulate the dom. Easily you could do it with code like
如果可能，我会建议使用 JavaScript，而不是 CSS 和 JavaScript，因为它可以操纵 dom。你可以很容易地用像这样的代码来做到这一点
##代码##This a simple but not ideal solution.
这是一个简单但并不理想的解决方案。
JFiddle; http://jsfiddle.net/yFKUD/
JFiddle; http://jsfiddle.net/yFKUD/
回答by George Richardson
Flexbox allows you to change the order of items inside a containing element, we can use this to separate and reorder parts of our email address in the html but present them to the user as a legible whole.
Flexbox 允许您更改包含元素内项目的顺序，我们可以使用它在 html 中分隔和重新排序我们电子邮件地址的部分，但将它们作为一个清晰的整体呈现给用户。
Here we use flex-direction: row-reverseto reverse the order of the elements.
这里我们flex-direction: row-reverse用来颠倒元素的顺序。
A scammer could probably work this out if he tried hard, all he has to do is reverse the elements to recreate the address. For a more thorough attempt we can specify the order manually.
如果骗子努力尝试，他可能会解决这个问题，他所要做的就是反转元素以重新创建地址。为了更彻底的尝试，我们可以手动指定顺序。
Here we use orderto specify our own order so a simple reverse cannot be used.
这里我们order用来指定我们自己的顺序，所以不能使用简单的反向。
Unfortunately doing any of this breaks copy/paste so your user will have to type out the address, but it is better than receiving correspondence from another Nigerian prince. Use this in conjunction with other techniques for a truly bulletproof email address.
不幸的是，这样做会破坏复制/粘贴，因此您的用户必须输入地址，但这比接收另一位尼日利亚王子的信件要好。将此与其他技术结合使用以获得真正防弹的电子邮件地址。
回答by U. Bulle
I was checking for techniques for a while now. While I agree that obfuscation is not a total solution, I believe it's still pragmatical as I benefit it by getting get zero spam with obfuscation.
我检查了一段时间的技术。虽然我同意混淆不是一个完整的解决方案，但我相信它仍然是实用的，因为我通过混淆获得零垃圾邮件而受益。
Some of the techniques discussed:
讨论的一些技术：
- CSS trick to make e-mail only visible to humans (see accepted answer from @user3087089)
- Add HTML garbage to trick scrapers (see answer from @fzzylogic)
- Inject e-mail using JS (as suggested by @Dean and others)
- 使电子邮件仅对人类可见的 CSS 技巧（请参阅@user3087089 的已接受答案）
- 添加 HTML 垃圾来欺骗刮刀（见@fzzylogic 的回答）
- 使用 JS 注入电子邮件（如@Dean 和其他人所建议的那样）
Another technique that was not suggested here to never have your e-mail in plain form through using base64encoding. You simply encode your e-mail and use JavaScript to inject it to the webpage.
此处未建议的另一种技术是通过使用base64编码永远不会以纯格式发送电子邮件。您只需对电子邮件进行编码并使用 JavaScript 将其注入网页。
I built safe-emailproject on GitHubto combine all of the listed techniques. It's pretty easy to use with free license. You can check examples in CodePen. Feel free to use it & dig it and contribute.
我safe-email在GitHub 上构建了项目以结合所有列出的技术。使用免费许可证非常容易。您可以在CodePen 中查看示例。随意使用它并挖掘它并做出贡献。
It's vanilla-JS only, lightweight with no dependencies and you configure it with Base64 encoding of your e-mail.
它只是 vanilla-JS，轻量级没有依赖项，您可以使用电子邮件的 Base64 编码对其进行配置。
回答by Cedric Anamorphik
I used for some time a similar JavaScript technique that allowed the "mailto" functionality while keeping the HTML valid :
我使用了一段时间类似的 JavaScript 技术，它允许“mailto”功能同时保持 HTML 有效：
HTML :
HTML :
##代码##JavaScript (small jQuery plugin)
JavaScript（小型 jQuery 插件）
##代码##Usage
用法
##代码##http://codepen.io/ced-anamorphik/pen/QwVrKZ
http://codepen.io/ced-anamorphik/pen/QwVrKZ
But lately Google Chrome displayed a phishing warning on the website. As this is not entirely wrong (technically the link is spoofed indeed), is there another simple solution to this ?
但最近谷歌浏览器在网站上显示了网络钓鱼警告。由于这并非完全错误（从技术上讲，该链接确实被欺骗了），是否有另一个简单的解决方案？
