Making email addresses safe from bots on a webpage?

Question

When placing email addresses on a webpage do you place them as text like this:

joe.somebody@company.com

or use a clever trick to try and fo

Answer 1

I make mine whateverDOC@whatever.com and then next to it I write "Remove the capital letters"

Answer 2

I've written an encoder (source) that uses all kinds of parsing tricks that I could think of (different kinds of HTML entities, URL encoding, comments, multiline attributes, soft hyphens, non-obvious structure of mailto: URL, etc)

It doesn't stop all harvesters, but OTOH it's completely standards-compliant and transparent to the users.

Another IMHO good approach (which you can use in addition to tricky encoding) is along lines of:

<a href="mailto:userhatestogetspam@example.com" 
   onclick="this.href=this.href.replace(/hatestogetspam/,'')">

Answer 3

HTML:

<a href="#" class="--mailto--john--domain--com-- other classes goes here" />

JavaScript, using jQuery:

// match all a-elements with "--mailto--" somehere in the class property
$("a[class*='--mailto--']").each(function ()
{
    /*
    for each of those elements use a regular expression to pull
    out the data you need to construct a valid e-mail adress
    */
    var validEmailAdress = this.className.match();

    $(this).click(function ()
    {
        window.location = validEmailAdress;
    });
});

Answer 4

A response of mine on a similar question:

I use a very simple combination of CSS and jQuery which displays the email address correctly to the user and also works when the anchor is clicked:

HTML:

<a href="mailto:me@example.spam" id="lnkMail">moc.elpmaxe@em</a>

CSS:

#lnkMail {
  unicode-bidi: bidi-override;
  direction: rtl;
}

jQuery:

$('#lnkMail').hover(function(){
  // here you can use whatever replace you want
  var newHref = $(this).attr('href').replace('spam', 'com');
  $(this).attr('href', newHref);
});

Here is a working example.

Answer 5

For your own email address I'd recommend not worrying about it too much. If you have a need to make your email address available to thousands of users then I would recommend either using a gmail address (vanilla or via google apps) or using a high quality spam filter.

However, when displaying other users email addresses on your website I think some level of due diligence is required. Luckily, a blogger named Silvan Mühlemann has done all the difficult work for you. He tested out different methods of obfuscation over a period of 1.5 years and determined the best ones, most of them involve css or javascript tricks that allow the address to be presented correctly in the browser but will confuse automated scrapers.

Answer 6

Font-awesome works!

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

<p>myemail<i class="fa fa-at" aria-hidden="true"></i>mydomain.com</p>

http://fontawesome.io/