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

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

Answer 2

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.

Answer 3

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.

Answer 4

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)

Answer 5

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);
 }

Answer 6

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.