Tutorial :Best way to obfuscate an e-mail address on a website?



Question:

I've spent the past few days working on updating my personal website. The URL of my personal website is (my first name).(my last name).com, as my last name is rather unusual, and I was lucky enough to pick up the domain name. My e-mail address is (my first name)@(my last name).com. So really, when it comes down to guessing it, it's not very hard.

Anyways, I want to integrate a mailto: link into my website, so people can contact me. And, despite my e-mail address not being very hard to guess, I'd rather not have it harvested by spam bots that just crawl websites for e-mail address patterns and add them to their database.

What is the best way for me to obfuscate my e-mail address, preferably in link form? The methods I know of are:

<a href="mailto:x@y.com">e-mail me</a>  

It works, but it also means that as soon as my website hits Google, I'll be wading through spam as spam bots easily pick out my e-mail address.

<img src="images/e-mail.png" />  

This is less desirable, because not only will visitors be unable to click on it to send me an e-mail, but smarter spam bots will probably be able to detect the characters that the image contains.

I know that there is probably no perfect solution, but I was just wondering what everyone thought was best. I'm definitely willing to use JavaScript if necessary, as my website already makes use of tons of it.


Solution:1

I encode the characters as HTML entities (something like this). It doesn't require JS to be enabled and seems to have stopped most of the spam. I suppose a smart bot might still harvest it, but I haven't had any problems.


Solution:2

Personally, I've given up on hiding my email address. I find it easier to look into better spam-filtering solutions than worry about obfuscating. You could spend days trying to find the best way to obfuscate your address, and then all it takes is one person to sell your address to a spammer and all that work was useless.


Solution:3

The current accepted solution is to create a contact form that allows users to email you. If you receive a lot of spam from that (I don't on my site), then you can add a captcha for good measure, and you'll be far from the "low hanging fruit" at that point.

The fact of the matter is that if you are providing a link that a user can click on to pop open their email client with your address in the To: field, then the computer is able to decipher the email address from the page and so can a spam bot.


Solution:4

reCAPTCHA offers a simple email obfuscation service. You don't need to set up an account and can start using it immediately. You can use the service as a link or as a popup.

After the captcha is solved, your email address appears as an href/mailto, so that it can be clicked/followed by users who have configured their email clients to work with their browsers.


Solution:5

You mentioned this is for your personal website. On my personal site (for example, bobsomers.com) I just have a paragraph that says this:

The best way to get in contact with me before the new site is up is to send me an email. My email address is my first name at this website. If you can't figure it out from that hint, well, you might find email more of a challenge than figuring out my address.

People seem to be able to figure that out just fine, as I get legitimate email all the time. Sometimes the best solutions don't require writing any code. :)


Solution:6

Apparently using CSS to change the direction of your text works pretty well. That link has a test of a bunch of other obfuscation methods as well.

Whatever you use is inevitably going to be defeated. Your primary aim should be to avoid annoying the heck out of your users.


Solution:7

Don't use any obfuscation techniques here because it's probably the first place the email harvesters will look to find out how people are obfuscating emails. If you have to have your email address visible on the site don't just copy verbatim someone else's method; obfuscate it in some unique way that no other site has used so that your method won't be known to harvesters before they visit your site.


Solution:8

You could do as Google do on Google Code (and Groups). Display a par tof the email, and a clickable portion ("..."). Clicking that indicates you want to know the email, and you are asked to fill in a captcha. Afterwards the email (and others?) are visible to you.


Solution:9

A lightweight way to obfuscate the href of an anchor is to base64-encode it:

> btoa('mailto:email@example.com')  < "bWFpbHRvOmVtYWlsQGV4YW1wbGUuY29t"  

And then include it hardcoded:

<a href="javascript:window.location.href=atob('bWFpbHRvOmVtYWlsQGV4YW1wbGUuY29t')">E-Mail</a>  

Or dynamically server-side e.g. in PHP:

<a href="javascript:window.location.href=atob('<?= base64_encode("mailto:email@example.com") ?>')">E-Mail</a>  

In combination with string reversion it could be pretty spam-save:

<a href="javascript:window.location.href=atob('<?= base64_encode("mailto:email@example.com") ?>')" style="unicode-bidi: bidi-override; direction: rtl;"><?= strrev("email@example.com") ?></a>  


Solution:10

One website I maintain uses a somewhat simplistic JavaScript means of (hopefully) keeping spambots out.

Email links call a JS function:

  function sendEmail(name, domain) {      location.href = 'mailto:' + name + '@' + domain;  }  

To make sure only users who have JS enabled can see the link, write them out with this:

  function writeEmailLink(realName, name, domain) {      document.write('<a href="javascript:sendEmail(\''        + name + '\', \'' + domain + '\')">');      document.write(realName);      document.write('</a>');  }     

The use of one JS function to write out a link that calls another means that there are two layers of protection.


Solution:11

I use JavaScript obfuscation, take a look at this one for example:

http://www.jottings.com/obfuscator/


Solution:12

mine is actually simple:

<h3 id="email">hello@gmail.com</h3><!-- add a fake email -->          $(document).ready(function(){  //my email in reverse :)              var s = 'moc.elibomajninbew@htiek';              var e = s.split("").reverse().join("");              $('#email').html('<a href="mailto:'+e+'">'+e+'</a>');      });  


Solution:13

As a poster above said, I also use JavaScript obfuscation from the jottings website.

The web page generates some JavaScript which can be improved on. The mailto: text string is in the clear and identifiable by robots (which could spot this and unobfuscate this string), but if one enters into the jottings.com webpage an email address of the form mailto:addr@site.tld instead of addr@site.tld and then removes the text mailto: from the JavaScript that is generated, one suddenly has some JavaScript that does not look as though it has anything to do with email at all - just random JavaScript of which the web is full. One can improve this still further by getting rid of the link text - I replaced mine by an image of my email address that is in a fairly obscure font. Then just in case this method on jottings.com becomes popular, I randomized the variable names in the output JavaScript to make it hard for a robot to spot an instance of jottings generated JavaScript code.

Obviously some of these improvements could be built into the mechanism on jottings itself, and since the code is openly available this would be relatively easy.

An example may make this a bit more clear. I used the Jottings Obfuscator at the link above to obscure mailto:foo@bar.com (note I am cheating on the original intent of the jottings website by entering the string mailto:foo@bar.com instead of foo@bar.com) with text "Send Me Email", which jottings turned into this Javascript:

<script type="text/javascript" language="javascript">  <!--  // Email obfuscator script 2.1 by Tim Williams, University of Arizona  // Random encryption key feature by Andrew Moulden, Site Engineering Ltd  // This code is freeware provided these four comment lines remain intact  // A wizard to generate this code is at http://www.jottings.com/obfuscator/  { coded = "3A1OTJ:rJJ@VAK.GJ3"    key = "J0K94NR2SXLupIGqVwt8EZlhznemfaPjs7QvTB6iOyWYo3rAk5FHMdxCg1cDbU"    shift=coded.length    link=""    for (i=0; i<coded.length; i++) {      if (key.indexOf(coded.charAt(i))==-1) {        ltr = coded.charAt(i)        link += (ltr)      }      else {         ltr = (key.indexOf(coded.charAt(i))-shift+key.length) % key.length        link += (key.charAt(ltr))      }    }  document.write("<a href='mailto:"+link+"'>Send Me Email</a>")  }  //-->  </script><noscript>Sorry, you need Javascript on to email me.</noscript>  

After I get that back, I paste it into an editor and:

  1. remove the mailto:
  2. replace link text with pointer to an image of my email address
  3. rename all the variables
  4. replace the "noscript" section with another link to the email address image

I end up with this:

<script type="text/javascript" language="javascript">  <!--  // Email obfuscator script 2.1 by Tim Williams, University of Arizona  // Random encryption kkeoy feature by Andrew Moulden, Site Engineering Ltd  // This kudzu is freeware provided these four comment lines remain intact  // A wizard to generate this kudzu is at http://www.jottings.com/obfuscator/  { kudzu = "3A1OTJ:rJJ@VAK.GJ3"    kkeoy = "J0K94NR2SXLupIGqVwt8EZlhznemfaPjs7QvTB6iOyWYo3rAk5FHMdxCg1cDbU"    shift=kudzu.length    klonk=""    for (variter=0; variter<kudzu.length; variter++) {      if (kkeoy.indexOf(kudzu.charAt(variter))==-1) {        lutu = kudzu.charAt(variter)        klonk += (lutu)      }      else {        lutu = (kkeoy.indexOf(kudzu.charAt(variter))-shift+kkeoy.length) % kkeoy.length        klonk += (kkeoy.charAt(lutu))      }    }  document.write("<a href='"+klonk+"'><img src='contactaddressimage.png' alt='Send Me Email' border='0' height='62' width='240'></a>")  }  //-->  </script>  <noscript>      <img src="contactaddressimage.png" border="0" height="62" width="240">      <font face="Arial" size="3"><br>&nbsp;</font></p>  </noscript>  


Solution:14

I don't how well this would work. Could you not leave your email address out and make it load using an AJAX call once the page has finished loading. Not sure if spam bots can pick up the altered HTML or if they are clever enough to listen on other HTTP traffic to try and pick email addresses or if they just scan the page as it is received the first time.


Solution:15

One guy tested nine different ways of presenting an email address on a page and then published results on his blog.

His three best ways were:

  1. Changing the code direction with CSS
  2. Using CSS display:none
  3. ROT13 Encryption

Caveat -- this was posted two years ago. Spam bots might've gotten smarter.


Solution:16

Another approach could be by using a JavaScript framework and binding the data/model to the HTML elements. In the case of AngularJS, the HTML elements would be written as:

<a href="mailto:{{contactEmail}}"><span>{{contactEmail}}</span></a>  

The interpolation {{data}} binding uses a scope variable that contains the actual email value. In addition, a filter could also be used that handles the decoding of the email as follows:

<a href="mailto:{{contactEmail | decode}}"><span>{{contactEmail | decode}}</span></a>  

The benefits are in the way the HTML is written. The downside is that it requires scripting support which some for may be a no no.

just another approach.


Solution:17

The Ajax call solution

The best is to have a form on the website and not to show email address, because all robots are more intelligent day after day, but if you need to show email address on the website, so, you can make it with ajax call on your server, and show it on click.

HTML

<a class="obfmail" href="#" rel="info">click here to show email address</a>  

or

<a class="obfmail" href="#" rel="info">      <img src="img/click-to-show-email.jpg">  </a>  

jQuery

$(document).one'click', '.obfmail', function(e) {      e.preventDefault();      a = $(this);      addr = a.attr('rel');      $.ajax({          data: {               email: addr          },          url : "/a/getemail",          type: "POST",          dataType: 'json',          success: function(data) {              a.html(data.addr);              a.attr('href', 'mailto:' + data.addr);          }      });  });  

PHP

if($_POST['email']) {      ...      return json_encode(array(          code     => '200',          response => 'success',          addr     => 'info@domain.ltd'      ));  }  

For more security, you can change .on by .one like this $(document).one('click', '.obfmail', function(e) { or even work with a PHP generated token that you pass into data on ajax call, to accept only one call of the ajax function like this :

html: <a class="obfmail" href="#" rel="info" token="w3487ghdr6rc">

jquery:

...  addr = a.attr('rel');  tkn  = a.attr('token');  $.ajax({      data: {           email: addr,          token: tkn      }, ...  

.

It is possible to encode the returned email address too or invert it.

.

Working fine for phone numbers too !


Solution:18

Honestly, your problem may be moot if you asked the question of whether or not a mailto is really what you want to use. A lot of people who use web mail, for example, or do not have the proper mail client setup in their browser are not going to benefit from a mailto. You are exposing your email address for a function that isn't going to work for a large portion of your users.

What you could do instead is use a form to send the e-mail behind the scenes so that the e-mail address is hidden and you don't have to worry about the poor saps who won't benefit from a mailto.


Solution:19

If you say on your site that "My e-mail address is (my first name)@(my last name).com.", and your first name and last name are pretty darn obvious, that seems to be the best spam protection you're going to get.


Solution:20

If you work with PHP, you can grab a free script that does that automatically. It's called "Private Daddy" and we use it for our own online audio streaming service. Just one line of code and it works out of the box... you can grab it here


Solution:21

If anyone's using Rails, they can use the actionview-encoded_mail_to gem. (https://github.com/reed/actionview-encoded_mail_to)

There are a few options:

:encode - This key will accept the strings "javascript" or "hex". Passing "javascript" will dynamically create and encode the mailto link then eval it into the DOM of the page. This method will not show the link on the page if the user has JavaScript disabled. Passing "hex" will hex encode the email_address before outputting the mailto link.

:replace_at - When the link name isn't provided, the email_address is used for the link label. You can use this option to obfuscate the email_address by substituting the @ sign with the string given as the value.

:replace_dot - When the link name isn't provided, the email_address is used for the link label. You can use this option to obfuscate the email_address by substituting the . in the email with the string given as the value.


Solution:22

<!-- Multi-Email Obfuscator  -->  <!-- step 1: &#064; = @  -->  <!-- step 2: a scrap element  -->  <!-- step 3: ROT13 encode for .com  -->  info<!-- step 1 -->&#064;<!-- step 2 --><b style="display:none">my</b>domain<!-- step 3 --><script>document.write(".pbz".replace(/[a-zA-Z]/g,function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);}));</script>  


Solution:23

Using JQuery, but can easily be ported to plain JS if needed. Will take the following HTML block. This example I provided is also for tel: links for phone calls.

<a class="obfuscate"    href="mailto:archie...trajano...net">   archie...trajano...net  </a>  <a class="obfuscate"   href="tel:+One FourOneSix-EightFiveSix-SixSixFiveFive">   FourOneSix-EightFiveSix-SixSixFiveFive  </a>  

and convert it to the proper links using Javascript.

  $(".obfuscate").each(function () {    $(this).html($(this).html()  .replace("...", "@").replace(/\.\.\./g, ".")  .replace(/One/g, "1")  .replace(/Two/g, "2")  .replace(/Three/g, "3")  .replace(/Four/g, "4")  .replace(/Five/g, "5")  .replace(/Six/g, "6")  .replace(/Seven/g, "7")  .replace(/Eight/g, "8")  .replace(/Nine/g, "9")  .replace(/Zero/g, "0"))    $(this).attr("href", $(this).attr("href")  .replace("...", "@").replace(/\.\.\./g, ".")  .replace(/One/g, "1")  .replace(/Two/g, "2")  .replace(/Three/g, "3")  .replace(/Four/g, "4")  .replace(/Five/g, "5")  .replace(/Six/g, "6")  .replace(/Seven/g, "7")  .replace(/Eight/g, "8")  .replace(/Nine/g, "9")  .replace(/Zero/g, "0"))    })  

I documented it in more detail here https://trajano.net/2017/01/obfuscating-mailto-links/

The de/obfuscation algorithm is pretty simple so its not too taxing to write either (no need for base64 parsing)


Solution:24

I use a PHP function to generate some javascript to output the email on page load. Note that you don't need PHP to generate the JS at runtime, you can generate the JS once locally and then include the static JS in your page.

You can also use the linked function with this snippet below to automatically obfuscate email addresses in some given HTML (where $processedContent is the HTML):

 $emailMatches = array();   $matchCount = preg_match_all('/(?:[a-zA-Z0-9_\.\-])+\@(?:(?:[a-zA-Z0-9\-])+\.)+(?:[a-zA-Z0-9]{2,4})+/', $processedContent, $emailMatches);     if($matchCount > 0) {      $emailMatches = $emailMatches[0];        foreach($emailMatches as $email) {      $replacement = createJSMailLink($email);        $processedContent = str_replace($email, createJSMailLink($email), $processedContent);   }  


Solution:25

Check this out.

The 'Enkoder Form' will encrypt your Email address and convert the result to a self evaluating JavaScript, hiding it from Email-harvesting robots which crawl the web looking for exposed addresses. Your address will be displayed correctly by web-browsers, but will be virtually indecipherable to Email harvesting robots.


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »