Protect e-mail address with CSS only-第2页回答

2楼-- · 2019-01-30 03:04

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.

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.

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.

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.

0人赞添加讨论(0) 举报

唯我独甜

3楼-- · 2019-01-30 03:06

I used for some time a similar JavaScript technique that allowed the "mailto" functionality while keeping the HTML valid :

HTML :

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

JavaScript (small jQuery plugin)

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

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 ?

0人赞添加讨论(0) 举报

▲ chillily

4楼-- · 2019-01-30 03:07

You can use Font Awesome:

In <head>:

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

In <body>:

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

0人赞添加讨论(0) 举报

干净又极端

5楼-- · 2019-01-30 03:07

Use the reCAPTCHA Mailhide API

Mail hide using api

Use encoder Formate

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.

How to hide your email address from spammers with 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

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

0人赞添加讨论(0) 举报

三岁会撩人

6楼-- · 2019-01-30 03:15

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.

0人赞添加讨论(0) 举报

Protect e-mail address with CSS only

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间