Protect e-mail address with CSS only

Question

I want to protect my e-mail address on webpages.

But I don't know JavaScript and PHP. I know only HTML and CSS.

So, please help me how to protect my email address with CSS only.

"I want to protect my e-mail address on webpages ..." so don't put your email address anywhere in any publicly reachable document! Everything else is as use- and helpful as "security by obscurity". — Netsurfer, Mar 28 '14 at 23:08
This is a little out of date, but I imagine that its still relevant... http://superuser.com/q/235937/309091 — apaul, Apr 02 '14 at 23:16

score 75 · Accepted Answer · answered Jan 29 '14 at 04:14

75

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.

Simple HTML and CSS code:

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

2) data-website write your e-mail id website in reverse.

answered Jan 29 '14 at 04:14

3

Excellent - great idea! +1 It's worth noting that pseudo elements don't exist in the DOM. You should point that out. You also can't copy/paste highlight/select them.. – Josh Crozier Jan 29 '14 at 04:16
12

Clever, but that content won't be available to a screenreader user. – steveax Jan 29 '14 at 04:44
1

@NicholasHazel but to bots scraping emails, it would passover.. hopefully not thinking it was an email address. opposed to string'@'string'.'string – Dean Meehan Mar 28 '14 at 13:00
1

Hi friends! What's the meaning of _kcarc ot ysae ytterp si taht kniht I_ – Apr 01 '14 at 12:44
3

@Chandra: If you cannot figure out the meaning of "kcarc ot ysae ytterp si taht kniht I", then you need to reread your own posted solution and follow its advice on decoding the user name and website! – ScottS Apr 01 '14 at 14:45
this didn't worked in my work computer's ie9 ! I couldn't understand the reason. – Andre Chenier Jul 23 '14 at 17:40
a cross-browser solution is here: http://css-tricks.com/almanac/properties/d/direction/ – Andre Chenier Jul 23 '14 at 18:06
4

Text is not selectable. – kursus May 31 '15 at 20:22
Can't use mailto either – Eoin Sep 06 '19 at 12:03

score 22 · Answer 2 · edited Sep 20 '17 at 13:32

22

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.

edited Sep 20 '17 at 13:32

Jack Wilsdon

6,706
11
44
87

answered Apr 04 '14 at 03:31

Temüjin

15,371
8
35
57

2

To add more protection I split the email in two parts by using `.e-mail:before` and `.e-mail:after`. It works great! – May 23 '16 at 09:42
5

correction: it is "encode with Hex", not "encrypt". – Yeo Sep 07 '16 at 12:28

fzzylogic · Answer 3 · 2014-09-19T17:36:27.990

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:

Using html comment signs or substituting html entities has some years ago already been shown to be a pretty weak approach.
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.

<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. Besides what you've mentioned already:

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 @ icon and 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.

Update: Font Awesome now has an @ icon. Maybe someone suggested it after seeing this post ;-).

score 13 · Answer 4 · edited Apr 01 '14 at 12:02

One of the simple and effecting ways of embedding emails in html is by using hex values! for example hex value for john@smith.me is:

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

and you can use the following tag in your HTML Code

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

you can use this tool to generate the %64 hex code

you can also use this tool to generate the hex code

score 11 · Answer 5 · edited May 23 '17 at 12:02

11

You can combine the two answers above (Ans1 & Ans2) to make the mailto works with the css for usability.

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

edited May 23 '17 at 12:02

Community

1
1

answered Jul 13 '15 at 22:53

Yeo

11,416
6
63
90

This works well with existing code and icons on the page. Thanks ! – Aindriú Nov 20 '17 at 17:44
Great solution, but wouldn't it be better to avoid having the email address displayed on the page? Don't bots also harvest the clear text on the page? – Herman Toothrot May 28 '19 at 01:08
1

@HermanToothrot There's no such thing as "clear text" on the page. Any crawler/bot/script/program can only see what it's in the markup - if that is obfuscated or, in the case of this solution, non-existent, then to a crawler there simply is no text there. The exception to this is if crawlers were using OCR to scrape a webpage, such that it's seeing the page just like a human would, but I'm unsure how common that is. – Hashim Aziz Dec 28 '21 at 20:23

score 4 · Answer 6 · edited May 23 '18 at 02:21

4

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>

edited May 23 '18 at 02:21

bren

4,176
3
28
43

answered Jun 15 '17 at 12:33

veuncent

1,599
1
20
17

score 4 · Answer 7 · answered Feb 01 '18 at 18:45

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.

score 2 · Answer 8 · answered Mar 28 '14 at 13:05

2

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

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

This a simple but not ideal solution.

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

answered Mar 28 '14 at 13:05

Dean Meehan

2,511
22
36

I want to use only CSS. – Mar 28 '14 at 13:35
You can obfuscate it but IMHO whatever you do, one day spammers will get your email address. The future is in spam filters, not trying to keep email addresses secret. A possible workaround is to decorate e-mails, relying on users to type or correct them: foo (at) example.com or foo-NOSPAM@REMOVE-THIS-example.com are common schemes (hoping spammers doesn't try to decipher these common schemes!), graphical e-mail addresses are another way. – Dean Meehan Mar 28 '14 at 14:47

pendingfox · Answer 9 · 2021-01-30T10:49:29.387

2

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

edited Jan 30 '21 at 10:49

answered Jan 25 '21 at 17:54

pendingfox

528
6
7

1

Thank you, I spent an hour or so looking for an appropriate solution to this before your comment about CDNs made me look into my host - Cloudflare - and realise that they automatically obfuscate all email addresses on sites they host, for free. – Hashim Aziz Jun 09 '22 at 00:40

Ravi Patel · Answer 10 · 2014-04-02T07:51:34.680

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.

score 1 · Answer 11 · answered Apr 19 '20 at 13: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)
Add HTML garbage to trick scrapers (see answer from @fzzylogic)
Inject e-mail using JS (as suggested by @Dean and others)

Another technique that was not suggested here to never have your e-mail in plain form through using base64 encoding. You simply encode your e-mail and use JavaScript to inject it to the webpage.

I built safe-email project on GitHub to 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.

It's vanilla-JS only, lightweight with no dependencies and you configure it with Base64 encoding of your e-mail.

score 0 · Answer 12 · answered Mar 09 '15 at 08:30

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 ?

Jake 404 · Answer 13 · 2014-04-04T06:09:49.200

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:

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

JSFIDDLE

And to protect against bots use CSS Codedirection:

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

Protect e-mail address with CSS only

13 Answers13

Linked