Best way to obfuscate an e-mail address on a websi

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:[e-mail]">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.

Answer 1

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

> btoa('mailto:[e-mail]')
< "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:[e-mail]") ?>')">E-Mail</a>

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

<a href="javascript:window.location.href=atob('<?= base64_encode("mailto:[e-mail]") ?>')" style="unicode-bidi: bidi-override; direction: rtl;"><?= strrev("[e-mail]") ?></a>