仅使用 CSS 保护电子邮件地址

Question

I want to protect my e-mail address on webpages.我想在网页上保护我的电子邮件地址。

But I don't know JavaScript and PHP.但我不懂 JavaScript 和 PHP。 I know only HTML and CSS.我只知道 HTML 和 CSS。

So, please help me how to protect my email address with CSS only.所以，请帮助我如何仅使用 CSS 保护我的电子邮件地址。

Answer 1

It's very simple.这很简单。 You can protect your email address with only HTML & CSS.您可以仅使用 HTML 和 CSS 来保护您的电子邮件地址。 You don't need to know about PHP or Java script.您不需要了解 PHP 或 Java 脚本。 Try below code.试试下面的代码。

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) "\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>

Output of above code:上面代码的输出：

jhon@gmail.com

Please note:请注意：

Here I'm just used two extra attributes.这里我只使用了两个额外的属性。

1) data-user write your e-mail id user name in reverse . 1) data-user把你的e-mail id 用户名反写。

2) data-website write your e-mail id website in reverse . 2) data-website把你的e-mail id 网站倒过来写。

Answer 2

Try this code:试试这个代码：

 .e-mail:before { content: "\\006a\\0068\\006f\\006e\\0040\\0067\\006d\\0061\\0069\\006c\\002e\\0063\\006f\\006d"; }

 <span class="e-mail"></span>

This is just the email encoded in hexadecimal.这只是以十六进制编码的电子邮件。

Answer 3

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 signs or substituting html entities has some years ago already been shown to be a pretty weak approach .使用html 注释标志或替换html 实体在几年前已经被证明是一种非常弱的方法。
Using an image instead 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 .不久前有人提出了一种允许使用超链接的有趣的纯 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 techniques: These are of course not fool proof either. CSS 技术：这些当然也不是万无一失的。 Besides what you've mentioned already:除了你已经提到的：

Using CSS display:none is also useful.使用 CSS display:none 也很有用。 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 @ icon and it's possible to do this in a way that won't trip up screen readers.可以使用 Web 图标字体来拉入 @图标，并且可以以不会绊倒屏幕阅读器的方式执行此操作。 I've not seen a web icon font with an @ icon for obvious reasons, but this would work.由于显而易见的原因，我还没有看到带有@ 图标的网络图标字体，但这会起作用。

Update: Font Awesome now has an @ icon.更新： Font Awesome现在有一个 @ 图标。 Maybe someone suggested it after seeing this post ;-).也许有人在看到这篇文章后建议它;-)。

Answer 4

One of the simple and effecting ways of embedding emails in html is by using hex values!在 html 中嵌入电子邮件的一种简单而有效的方法是使用十六进制值！ for example hex value for john@smith.me is:例如 john@smith.me 的十六进制值为：

%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 代码中使用以下标签

<a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;%6A%6F%68%6E%40%73%6D%69%74%68%2E%6D%65">email me</a>

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 tool to generate the %64 hex code您可以使用此工具生成 %64 十六进制代码

you can also use this tool to generate the hex code您也可以使用此工具生成十六进制代码

Answer 5

You can combine the two answers above ( Ans1 & Ans2 ) to make the mailto works with the css for usability.您可以结合上面的两个答案（ 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="&#109;&#97;&#105;&#108;&#116;&#111;&#58;%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>

Answer 6

You can use Font Awesome:您可以使用字体真棒：

In <head> :在<head> ：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

In <body> :在<body> ：

<p>john<i class="fa fa-at"></i>hotmail.com</p>

Answer 7

I would recommend using JavaScript if possible over CSS and JavaScript as it can manipulate the dom.如果可能，我会建议使用 JavaScript，而不是 CSS 和 JavaScript，因为它可以操纵 dom。 Easily you could do it with code like你可以很容易地用像这样的代码来做到这一点

<div onclick="document.write('joe@' + 'joemaller.com')">Email Me</div>

This a simple but not ideal solution.这是一个简单但并不理想的解决方案。

JFiddle; JFiddle; http://jsfiddle.net/yFKUD/ http://jsfiddle.net/yFKUD/

Answer 8

Use the reCAPTCHA Mailhide API使用 reCAPTCHA Mailhide API
Mail hide using api使用 api 隐藏邮件

Use encoder Formate使用编码器格式

Encode site url to convert data email编码站点 url 以转换数据电子邮件

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.

How to hide your email address from spammers with JavaScript如何使用 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:

Basic Email Script基本电子邮件脚本

<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>

External JavaScript file外部 JavaScript 文件

<script language="JavaScript" src="email-encoding.js"></script>
The external javascript contains the code mentioned in 2 above.

Answer 9

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 中我们电子邮件地址的部分，但将它们作为一个清晰的整体呈现给用户。

 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:&nbsp;</span> </div>

Here we use flex-direction: row-reverse to 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.为了更彻底的尝试，我们可以手动指定顺序。

 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:&nbsp;</span> <span style="order: 2">user</span> </div>

Here we use order to 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.将此与其他技术结合使用以获得真正防弹的电子邮件地址。

Answer 10

I used for some time a similar JavaScript technique that allowed the "mailto" functionality while keeping the HTML valid :我使用了一段时间类似的 JavaScript 技术，它允许“mailto”功能同时保持 HTML 有效：

HTML : HTML :

<a href="http://www.domain.com" class="js-contact">user</a>

JavaScript (small jQuery plugin) 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);

Usage用法

// protect inline e-mails 
$('.js-contact').mailTo();

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 ?由于这并非完全错误（从技术上讲，该链接确实被欺骗了），是否有另一个简单的解决方案？

Answer 11

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)使电子邮件仅对人类可见的 CSS 技巧（请参阅@user3087089 的已接受答案）
Add HTML garbage to trick scrapers (see answer from @fzzylogic)添加 HTML 垃圾来欺骗刮刀（见@fzzylogic 的回答）
Inject e-mail using JS (as suggested by @Dean and others)使用 JS 注入电子邮件（如@Dean 和其他人所建议的那样）

Another technique that was not suggested here to never have your e-mail in plain form through using base64 encoding.此处未建议的另一种技术是通过使用base64编码永远不会以纯格式发送电子邮件。 You simply encode your e-mail and use JavaScript to inject it to the webpage.您只需对电子邮件进行编码并使用 JavaScript 将其注入网页。

I built safe-email project on GitHub to combine all of the listed techniques.我在GitHub 上构建了safe-email项目以结合所有列出的技术。 It's pretty easy to use with free license.使用免费许可证非常容易。 You can check examples in CodePen .您可以在CodePen 中查看示例。 Feel free to use it & dig it and contribute.随意使用它并挖掘它并做出贡献。

It's vanilla-JS only, lightweight with no dependencies and you configure it with Base64 encoding of your e-mail.它只是 vanilla-JS，轻量级没有依赖项，您可以使用电子邮件的 Base64 编码对其进行配置。

Answer 12

I tend to use this for my clients:我倾向于为我的客户使用这个：

<a href="mailto:hello&commat;goodbye&period;com">hello&commat;goodbye&period;com</a>

Pretty sure it works 90% of the time judging by the experience and requires no CSS/JS to work.可以肯定的是，根据经验判断，它在 90% 的时间内都可以工作，并且不需要 CSS/JS即可工作。 Though I don't think there is any point of protecting emails nowadays anyway as almost all CDN-s do it for you automatically using JS.尽管我认为现在无论如何都没有任何保护电子邮件的意义，因为几乎所有 CDN-s 都会使用 JS 自动为您做到这一点。

Answer 13

To disable people to copy it try like:要禁止人们复制它，请尝试：

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;
}

And HTML:和 HTML：

<span class="email">jack@gmail.com</span>

JSFIDDLE JSFIDDLE

And to protect against bots use CSS Codedirection:为了防止机器人使用 CSS Codedirection：

<span style="unicode-bidi:bidi-override; direction: rtl;">
moc.elpmaxe@zyx
</span>

仅使用 CSS 保护电子邮件地址

问题描述

13 个解决方案

解决方案1
73 已采纳

解决方案2
19 2014-04-04 03:31:59

解决方案3
12 2014-03-31 19:40:27

解决方案4
12 2014-04-01 11:46:20

解决方案5
10 2015-07-13 22:53:22

解决方案6
3 2017-06-15 12:33:07

解决方案7
2 2014-03-28 13:05:01

解决方案8
1 2014-04-02 07:45:59

解决方案9
1 2018-02-01 18:45:47

解决方案10
0 2015-03-09 08:30:34

解决方案11
0 2020-04-19 13:11:14

解决方案12
0 2021-01-25 17:54:36

解决方案13
-1 2014-04-02 07:14:02

仅使用 CSS 保护电子邮件地址

问题描述

13 个解决方案

解决方案1 73 已采纳

解决方案2 19 2014-04-04 03:31:59

解决方案3 12 2014-03-31 19:40:27

解决方案4 12 2014-04-01 11:46:20

解决方案5 10 2015-07-13 22:53:22

解决方案6 3 2017-06-15 12:33:07

解决方案7 2 2014-03-28 13:05:01

解决方案8 1 2014-04-02 07:45:59

解决方案9 1 2018-02-01 18:45:47

解决方案10 0 2015-03-09 08:30:34

解决方案11 0 2020-04-19 13:11:14

解决方案12 0 2021-01-25 17:54:36

解决方案13 -1 2014-04-02 07:14:02

解决方案1
73 已采纳

解决方案2
19 2014-04-04 03:31:59

解决方案3
12 2014-03-31 19:40:27

解决方案4
12 2014-04-01 11:46:20

解决方案5
10 2015-07-13 22:53:22

解决方案6
3 2017-06-15 12:33:07

解决方案7
2 2014-03-28 13:05:01

解决方案8
1 2014-04-02 07:45:59

解决方案9
1 2018-02-01 18:45:47

解决方案10
0 2015-03-09 08:30:34

解决方案11
0 2020-04-19 13:11:14

解决方案12
0 2021-01-25 17:54:36

解决方案13
-1 2014-04-02 07:14:02