How to spamproof a mailto link?

user_56761 0
Viewed 70082

I want visitors to be able to click on (or copy) an email address directly on my webpage. However, if I could make it (a little bit) harder for bots and other crawlers to get said email address and register it in a spam list, it would be awesome.

I found different ways of doing this (i.e. encoding mailto HTML links), either with JavaScript or in pure HTML, but what do you guys recommend ? The JavaScript techniques seem more complicated, but this may potentially affect users that have it turned off, and legit crawlers like Google.

On the other hand, the HTML one seems a bit basic, the bot writers should have figured it out by now...

Should I bother at all doing this, or will the spammers get my email anyway ? I know that antispam filters are getting better and better, but if I can do something more to slow spammers down, I will.

obfuscation encoding mailto spam html
8 Answers

My version generates the link on the fly from a base64-encoded email string when the user hovers over the link, or if on a mobile device, touches it. All links with the attribute 'data-gen-email' will work.

// The string is your base64-encoded email
const emailAddress = atob("bWFpbHRvOnlvdUBkb21haW4uY29t");

// Select all links with the attribute 'data-gen-email'
const emailLinks = document.querySelectorAll('[data-gen-email]');

emailLinks.forEach(link => {
    link.onmouseover = link.ontouchstart = () => link.setAttribute('href', emailAddress);
});

You can encode your email to base64 by using btoa('mailto:you@domain.com'), or elsewhere on the web:

btoa('mailto:you@domain.com'); // "bWFpbHRvOnlvdUBkb21haW4uY29t"

Example link in html:

<a href="#" target="_blank" data-gen-email>Email Me!</a>
user_13751680 
//This sets the mailto link when clicked. 
//As the link is followed, the focus is also lost and the link reset to # 
//html should look like this :
//<a class="courriel" data-courriel="john" data-objet="Just a test" href="#">Some text</a>

$('.courriel').click(function() { 
  var sA = $(this).attr('data-courriel'); // get nickname
  var sO = $(this).attr('data-objet');    // get subject
//Adresses are hard coded here; a nick name is used; 
//this to prevent having a potentially decypherable encoded adress  in the <a> tag
  switch (sA) { 
    case 'john': 
      $(this).attr('href', 'mailto:john@lennon.com?subject=' + sO);
      break;
    case 'paul':
      $(this).attr('href', 'mailto:paul@mccartney.com?subject=' + sO);
      break;
    default:
        $(this).attr('href', '#');
  }


})
$('.courriel').focusout(function() { //reset the link to # on focus loss
    $(this).attr('href', '#');
})
user_136737390
Related