堆栈内存溢出
  繁体   English   中英

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

[英]Protect e-mail address with CSS only

 原文  2014-01-29 04:14:28  0   13    html/ css/ spam-prevention/ email-address

问题描述

我想在网页上保护我的电子邮件地址。

但我不懂 JavaScript 和 PHP。 我只知道 HTML 和 CSS。

所以，请帮助我如何仅使用 CSS 保护我的电子邮件地址。

13 个解决方案

解决方案1
 73 已采纳  

这很简单。 您可以仅使用 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把你的e-mail id 用户名反写。

2) data-website把你的e-mail id 网站倒过来写。

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

试试这个代码： 

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

这只是以十六进制编码的电子邮件。

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

您可能知道：混淆技术不可能万无一失，收割机机器人将继续改进。 有许多反对混淆的论据。

话虽如此，这里有一些额外的技术，而不是你已经提到的相当有趣的技术。

HTML 技术：

  1. 使用html 注释标志或替换html 实体在几年前已经被证明是一种非常弱的方法。

  2. 对于大多数用户来说，使用图像而不是文本是一种痛苦，包括无法剪切和粘贴的非视力障碍者。 不过效果很好。

  3. 不久前有人提出了一种允许使用超链接的有趣的纯 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 技术：这些当然也不是万无一失的。 除了你已经提到的：

  1. 使用 CSS display:none 也很有用。 简单地去除样式标签的机器人将在获取的地址中包含隐藏文本。

    jhon<span style="display:none">-anti-bot-bit</span>@gmail.com.

  2. 可以使用 Web 图标字体来拉入 @图标，并且可以以不会绊倒屏幕阅读器的方式执行此操作。 由于显而易见的原因，我还没有看到带有@ 图标的网络图标字体，但这会起作用。

更新： Font Awesome现在有一个 @ 图标。 也许有人在看到这篇文章后建议它;-)。

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

在 html 中嵌入电子邮件的一种简单而有效的方法是使用十六进制值！ 例如 john@smith.me 的十六进制值为：

%6A%6F%68%6E%40%73%6D%69%74%68%2E%6D%65

您可以在 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>

这是在网页中嵌入电子邮件的一种非常简单有效的方法。

您以这种方式隐藏了“maito：”和电子邮件。

您可以使用此工具生成 %64 十六进制代码

您也可以使用此工具生成十六进制代码

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

您可以结合上面的两个答案（ 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>

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

您可以使用字体真棒：

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

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

如果可能，我会建议使用 JavaScript，而不是 CSS 和 JavaScript，因为它可以操纵 dom。 你可以很容易地用像这样的代码来做到这一点

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

这是一个简单但并不理想的解决方案。

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

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

使用编码器格式

编码站点 url 以转换数据电子邮件

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:
  1. 基本电子邮件脚本
<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>
  1. 外部 JavaScript 文件
<script language="JavaScript" src="email-encoding.js"></script>
The external javascript contains the code mentioned in 2 above.

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

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>

这里我们使用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:&nbsp;</span> <span style="order: 2">user</span> </div>

这里我们使用order来指定我们自己的顺序，所以不能使用简单的反向。

不幸的是，这样做会破坏复制/粘贴，因此您的用户必须输入地址，但这比接收另一位尼日利亚王子的信件要好。 将此与其他技术结合使用以获得真正防弹的电子邮件地址。

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

我使用了一段时间类似的 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

但最近谷歌浏览器在网站上显示了网络钓鱼警告。 由于这并非完全错误（从技术上讲，该链接确实被欺骗了），是否有另一个简单的解决方案？

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

我检查了一段时间的技术。 虽然我同意混淆不是一个完整的解决方案，但我相信它仍然是实用的，因为我通过混淆获得零垃圾邮件而受益。

讨论的一些技术：

  • 使电子邮件仅对人类可见的 CSS 技巧（请参阅@user3087089 的已接受答案）
  • 添加 HTML 垃圾来欺骗刮刀（见@fzzylogic 的回答）
  • 使用 JS 注入电子邮件（如@Dean 和其他人所建议的那样）

此处未建议的另一种技术是通过使用base64编码永远不会以纯格式发送电子邮件。 您只需对电子邮件进行编码并使用 JavaScript 将其注入网页。

我在GitHub 上构建了safe-email项目以结合所有列出的技术。 使用免费许可证非常容易。 您可以在CodePen 中查看示例。 随意使用它并挖掘它并做出贡献。

它只是 vanilla-JS，轻量级没有依赖项，您可以使用电子邮件的 Base64 编码对其进行配置。

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

我倾向于为我的客户使用这个：

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

可以肯定的是，根据经验判断，它在 90% 的时间内都可以工作，并且不需要 CSS/JS即可工作。 尽管我认为现在无论如何都没有任何保护电子邮件的意义，因为几乎所有 CDN-s 都会使用 JS 自动为您做到这一点。

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

要禁止人们复制它，请尝试：

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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在 Gatsby 生成的 static 站点上保护电子邮件地址不被抓取 贝宝按钮中的贝宝电子邮件地址 如何使用CSS向预先安装的wordpress主题添加电子邮件和地址 Evolution电子邮件客户端中的CSS支持 在“联系人”表单中输入无效的电子邮件地址后，电子邮件跨度下降 一种在内联css中隐藏HTML电子邮件中的表的方法 - 以后通过媒体查询显示它们 HTML电子邮件模板：是否可以仅为移动设备添加特定的CSS规则，这也适用于Gmail 在网站上混淆电子邮件地址的最佳方法？ 使用JavaScript或JQuery验证电子邮件地址 有没有办法在 HTML 模式中确认电子邮件地址
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM