Obfuscate email address to hide from scrapers?

Question

I want to hide my personal data (email and phone) from scrapers and bots. This data is in the href of anchor tags. Of course, actual users should still be able to have functional clickable links.

I was thinking to use a simple JavaScript function to encrypt and decrypt the data so that patterns matchers (*@*.* etc) who only get the HTML code won't find the actual email address.

So my encryption function is to convert the string to a list of character codes, incrementing all list elements by 1, and converting it back to a string. See below for the code.

My question: Is this an adequate way to hide data from scrapers? Or does every scraper render JS nowadays?

The code:

JSFiddle

function stringToCharCodes(string) {
  // Returns a list of the character codes of a string
  return [...string].map(c => c.charCodeAt(0))
}

function deobfuscate(obfString) {
  // String to character codes
  let obfCharCodes = stringToCharCodes(obfString);

  // Deobfuscate function (-1)
  let deobfCharCodes = obfCharCodes.map(e => e -= 1);

  // Character codes back to string 
  // Use spread operator ...
  return String.fromCharCode(...deobfCharCodes);
}

// Result of obfuscate("[email protected]")
let obfEmail = "fybnqmfAfybnqmf/dpn";
document.getElementById("email").href = "mailto:" + deobfuscate(obfEmail);

// Result of obfuscate("31612345678")
let obfPhone = "42723456789";
document.getElementById("whatsapp").href = "https://wa.me/" + deobfuscate(obfPhone);

function obfuscate(string) {
  // Obfuscate - Use developer tools F12 to run this once and then use the obfuscated string in your website

  // String to character codes
  let charCodes = stringToCharCodes(string);

  // Obfuscate function (+1)
  let obfCharCodes = charCodes.map(e => e += 1);

  // Character codes back to string 
  // Use spread operator ...
  return String.fromCharCode(...obfCharCodes);
}

<h1>Obfuscate Email And Phone</h1>

<p>Scrapers without Javascript will not be able to harvest your personal data.</p>

<ul>
  <li><a id="email">Mail</a></li>
  <li><a id="whatsapp">WhatsApp</a></li>
</ul>

Answer 1

The question is hard to answer, because there is no absolute truth, but let me try it.

---

You'll never get your email hidden 100% securely. Anything that renders the email address in a way that the user can read it, can also be rendered by sophisticated email scraper programs.

Once we accept that, what remains is the challenge to find a reasonable balance between the effort to hide the email address and the damage caused by a scraped email address.

In my experience, obfuscating the email and the href=mailto tag using html character encoding for a few characters is extremely simple but still effective in most cases. In addition to that, it renders without Javascript.

Example:

<a href="mailto:[email protected]">[email protected]</a>

may become something like

<a href="&#x6d;ailto&#58;p&#x65;ter.pan&#x40;neverland&#46;org">p&#x65;ter.pan&#x40;neverland&#46;de</a>

It's supposedly even enough to hide the mailto: and the @.

I would guess that, because there are so many email addresses that can be collected too easily, email scrapers don't tend to use a lot of highly sophisticated techniques for that purpose. It's just not necessary.

Remember, however good you try to hide your email address on a publicly accessible website, if it's in one of the many address leakages, you've lost anyway. I use custom email addresses for different services, and only for those services, and still I get spam sent to some of these addresses, so I'm sure they were leaked in some way.

---

With regard to your approach, I'd say yes, it's good enough.