Encrypting Emails using JQuery & CryptoJS

If you have a web page that shows contacts with email addresses, it is advised to use any mechanism that the email is hidden from robots or crawlers so that it can't be collected without any permission. Your customer will certainly like to see this kind of feature implemented in his website too. Lets see how we can get this done. This time, I am using fairly simple way as anyone can easily implement this on any existing website. This doesn't require any changes to your source code but to have some simple javascripts.

You will have to reference the CryptoJS library here.

https://github.com/ihsmarkitosi/CryptoJS-v3.1.2

Next, refer it to your page. In this case, I have downloaded the file and hosted locally.

<script src="/javascript/aes.js"></script>

Now, lets imagine you have a html code like this,

It shows the email address and if you see the source of the page, it's easy to capture. so what we need is to encrypt these emails. we can do this in many ways. one is to encrypt it in DB level. Other is to encrypt in you business layer or in code file.

The last one is to use the java-script. NOTE that this is not for any security and the idea is to hide the email addresses only. 

So, lets move to the javascript file.

For select controls, we can encrypt the options as per below. You need JQuery for this.

 $("#ttMailActorToSelect > option").each(function () {  
     var attr = CryptoJS.AES.encrypt($(this).attr('ttmailactorto'), "Dars1akaI@om");  
     $(this).attr("ttmailactorto", attr);  
 });  

You can replace this Dars1akaI@om on your own 

And for radio buttons, you can use the following. I used a custom attribute ttmailactorcc.

 $(':radio').each(function () {  
     if ($(this).attr("ttmailactorcc") && $(this).attr("ttmailactorcc").length > 0) {  
       //alert($(this).attr("ttmailactorcc"));  
       var attr = CryptoJS.AES.encrypt($(this).attr('ttmailactorcc'), "Dars1akaI@om");  
       $(this).attr("ttmailactorcc", attr);  
     }  
 });  

Note that you have to do this inside document ready state. The result will look like below.

When you need to access these values, you can decrypt it as below,

 var ttMailActorToSelectedValue = $('#ttMailActorToSelect option:selected').attr('ttmailactorto');        
 var ttMailActorTo = CryptoJS.AES.decrypt(ttMailActorToSelectedValue, "Dars1akaI@om").toString(CryptoJS.enc.Utf8);              

Try this. Hope this will help you.