3

I understand that this question has been asked many a times and the general consensus is that spam-bots will always figure out a way to harvest emails eventually so it is a lost cause. But I want a newly created email visible on a page that I created and I want at least something that protects it from spam-bots. Here is a simple JavaScript technique I wish to use:

$(document).ready(function() {
  setEmailAddress("abc@xyz.com");
});

function setEmailAddress(emailValue) {
  $("#spanTest").append($("<a>").attr("href", "javascript:location='mailto:" + obfuscateString(emailValue) + "';void 0").text(obfuscateString(emailValue)));
}

function obfuscateString(plaintext) {
  var obfuscated = "";

  for (var i = 0; i < plaintext.length; i++) {
    obfuscated += "\\u00" + plaintext.charCodeAt(i).toString(16);
  }

  return obfuscated;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span id="spanTest"></span>

Here are the questions:

  1. If the email abc@xyz.com is picked up from a database and passed to the method setEmailAddress then since the html crawled by the bot in the first place will not find an email, do I still need to obfuscate it on the page?

  2. You will notice that the link text of anchor is not obfuscated. If I need to obfuscate that part too, is it possible to achieve that without using eval?

Note: I already have a Contact form on the page that uses reCaptcha but this query is for when I wish to have an email visible on the page as well.

EDIT: After reading the comments, I think I need to emphasize on the question no. 2 above. Please see above updated code.

As you can see, I am trying to hide/obfuscate the link text as well. I understand that I need to document.write the produced result by the method obfuscateString but using eval for that is not recommended. Is there a way to obfuscate this part of text too?

Abdullah
  • 137
  • 3
  • 13
  • 1
    *Since the html crawled by the bot in the first place will not find an email* Sure it can, it's in plain text on the page. The fact that the `mailto` is weird doesn't prevent the bot from being able to see the ordinary text, and bots can easily harvest text that contains `@` that looks like it might be an email – CertainPerformance Jan 17 '20 at 07:01
  • @CertainPerformance: If by plain text you mean the hard coded "abc@xyz.com" that I used in the code then it was for demo purposes, the email will be picked up at runtime from the database. – Abdullah Jan 17 '20 at 07:12
  • 1
    The `.text(emailValue)` puts the email into the page text, which bots will be able to detect. – CertainPerformance Jan 17 '20 at 07:13
  • @CertainPerformance: Thanks, that is what I thought too and hence my question no. 2. – Abdullah Jan 17 '20 at 07:15
  • Does this answer your question? [Effective method to hide email from spam bots](https://stackoverflow.com/questions/483212/effective-method-to-hide-email-from-spam-bots) – Andreas Furster Jan 17 '20 at 09:25
  • @AndreasFurster: That is a great find. It has the collection of different ways to hide/obfuscate the email in one place but as you can see, the top rated answer uses the same technique (JS) that I used (except I used Unicode). I am more trying to find a solution to the second question. I think I need to edit my post. – Abdullah Jan 17 '20 at 09:43
  • Sure, you can make it harder for bot's. For example you could split each char into an array and join them on load. There are loads of ways to obfuscate strings in js. Do a simple Google search. One thing to keep in mind; if the bot executes js, it's useless. – Andreas Furster Jan 17 '20 at 10:25

1 Answers1

0

So I ended up using the following:

$(document).ready(function() {
  setEmailAddress("abc@xyz.com");
});

function setEmailAddress(emailValue) {
  $("#spanTest").append($("<a>").attr("href", "javascript:location='mailto:" + obfuscateString(emailValue) + "';void 0").html("<img src='https://i.stack.imgur.com/CFrNW.png' />"));
}

function obfuscateString(plaintext) {
  var obfuscated = "";

  for (var i = 0; i < plaintext.length; i++) {
    obfuscated += "\\u00" + plaintext.charCodeAt(i).toString(16);
  }

  return obfuscated;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="spanTest"></span>

That is, I changed the part in the code for the link text. From this:

.text(obfuscateString(emailValue))

to this: 

.html("<img src='https://i.stack.imgur.com/CFrNW.png' />")

It will render an image (of the email) in place of text. Your suggestions are still welcome.

Abdullah
  • 137
  • 3
  • 13