使用 JavaScript 混淆电子邮件

Question

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\u0026quot; + 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?

Answer 1

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\u0026quot; + 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.