If you are a front-end developer, there is a high chance that you've been asked to integrate contact details on the website at least once. It might be social media links, phone numbers, emails, etc.

And it sounds easy, right? What could go wrong? It should be simple - just use the "a" element and you should be good.

<a href="mailto:randomemail@address.com">Email</a>


Let's say you do that and a month later you end up having dozens of spam emails coming from random places that you never signed up for.
Well, do not be surprised cause the approach we used has one problem - our email address became an easy target for crawlers, spam bots and phishing attacks.

What should you do instead?

To avoid this problem, there is a working (not 100%) solution called email obfuscation.

What is that?
So, let's start with the concept of obfuscation.
If you've never heard of it, basically the idea behind it is to make the code difficult for computers / human beings to understand.
In case of email obfuscation, we try to confuse those bots & crawlers and make our email unreadable for them or difficult to understand.

But as I mentioned previously, it not only makes it difficult for computers but also for users as well and can result in a worse user experience.

That's why our solutions should be relatively effective against bots but at the same time accessible for the end-users and not worsen overall UX.

What are the techniques?

Before looking into that, I need to mention that sometimes we do not need email to be a link. Sometimes it can be just part of the plain text and not clickable at all.
Nevertheless, we have to protect these email addresses as well, but just using different techniques.

First, let's start with the clickable emails.

One way would be to use HTML (Character) Entities. An HTML entity is a piece of text ("string") that begins with an ampersand ( & ) and ends with a semicolon ( ; ). For example, this s entity represents "s".
Usually, they are used to display reserved characters (which would otherwise be interpreted as HTML code), or invisible characters (like non-breaking spaces).
In our case, we use entities to display the email address. Almost any web browser should be able to translate it back into readable format.

As an example, example@gmail.com would look like this: example@gmail.com

You can do this manually or using online tools (https://www.hcidata.info/obfuscate-email-address.htm)

While it might help against simple scrapers and bots, it is not the best solution as it is super easy to decode.

Another way to obfuscate our email would be to involve JavaScript in the process.
Let's say we have the following HTML element:

<a id="emailLinkID" href="">Send me an Email</a>

Then we can run the JS script to find that tag by ID and modify its href attribute by decoding base64 encoded string.

const emailForm = document.getElementById("emailLinkID");
emailForm?.setAttribute("href", "mailto:".concat(window.atob(window.btoa("example@gmail.com"))));

So, now when the browser finishes loading and the script above executes, the href attribute is populated with the actual email address.

You can use other encryption algorithms like ROT13 or Caesar cipher.

The only major downside of this approach is that it involves JavaScript and if the user disables JS on their browser, the link will be empty.

Now let's consider those cases where email does not need to be clickable.

The simplest but at the same time almost worthless solution would be to use HTML comments.

<p>Email address: <!-- randomcomment--> email@<!-- anothercomment-->gma<!-- asjoxp -->il.com</p>

For the end-user comments won't show up and regular email address will be seen.

A more effective solution would be to use CSS.
<p>Email Address example@<b>hiddentexthere</b>.com </p>

Then using CSS hide the content of the "b" tag.

p.b {
  display: none;
}

Again the final user will not see "hiddentexthere" part.

Another solution would be to put an email address into an image which will make bots' lives more difficult but at the same time from a usability point of view, it is super inconvenient for the user as he/she won't be able to just copy it.

Another quite effective way of obfuscation is the simple replacement of “@” with “AT” and “.” with “DOT”. But again, not good for the final user.

And that's it, guys.

I hope that you have learned something new today!
I would appreciate it if you could like this post or leave a comment below!

Also, feel free to follow me on GitHub and Medium!

Adios, mi amigos)