Hide Email Address from Bots - Keep mailto:

Question

tl;dr

Hide email address from bots without using scripts and maintain mailto: functionality. Method must also support screen-readers.

---

S

Answer 1

Here is an approach that does make use of JavaScript, but with a rather small foot-print. It's also very "ghetto", and generally I would not recommend an approach with inline JS in the HTML except you have an extreme reluctance to use JS, at all.

<a
  href="#"
  data-contact="bGUtZW1haWxAdGhlLWRvbWFpbi5jb20="
  data-subj="QW4gQW1hemluZyBTdWJqZWN0"
  onfocus="this.href = 'mailto:' + atob(this.dataset.contact) + '?subject=' + atob(this.dataset.subj || '')"
  >
  Send an email
</a>

data-contact is the base64 encoded email address. And, data-subj is an optional base64 encoded subject.

The main challenge with doing this without JS is that CSS can't alter HTML attributes. (The article you linked is a "pie-in-the-sky" musing and does not have any bearing on what is possible today or in the near future.)

The HTML entities approach you mentioned, or some variation of it, is likely the simplest option that will have some efficacy. Additionally, the iframe approach is clever and the server redirect approach is pretty awesome. But, all three are vulnerable to bots:

• The HTML entities just need to be converted (and detecting that is simple)
• The document referenced by the iframe might simply be followed
• The server redirect might simply be followed, as well

With the approach outlined above, the use of a base64 encoded email address in a data-contact attribute is very "one-off" – as long as the scrapper is not specifically designed for your site, it should work.

Answer 2

Short answer to fulfill all your requirements is that it's impossible

Some of the script-based options answered here may work for certain bots, but you wanted no-script, so, no, you can't.

Answer 3

The one method I found effective is using it with css like below:

<a href="mailto:myemail@ignore-domain.com">myemail@<span style="display:none;">ignore-</span>domain.com

and then write a javascript to remove the ignoreme- word from the href="mailto:..." attribute with regex. This will hide email from bot as it will append ignore- word before real domain and this will work on screen reader and when user clicks on the link custom js function will remove the ignore- word from href attribute so it will open the real email.

This method has been working very effectively for me till date. you can read more on this - http://techblog.tilllate.com/2008/07/20/ten-methods-to-obfuscate-e-mail-addresses-compared/

Answer 4

Simple + Lot of @ + Editable without tools

<a href="mailto:user@domain@@com"
   onmouseover="this.href=this.href.replace('@@','.')">
   Send email
</a>