Effective method using javascript to hide Email address in a webpage from spam bots

September 12th, 2014

On my website, I use a link had ‘mailto’ attribute to facilitate reader email to me, but I’m afraid of crawling from spam bots that want to extract my address. So, I would like to encode my email address in HTML code, and using javascript to decode it when browser parses and shows the page.

The method that presented here has 2 parts:

  1. The encoder generates a string into an object contained key and encoded text;
  2. The decoder gets key and encoded text as inputs and transforms them into original plain text.

Figure 1. Hiding email diagram

Encoding process

Extracting unique characters from string

The first step of this process is extracting unique characters, ie removing the duplicated characters in the string. The extractUniqueChars() uses an array to store collected characters. It loop through the input string and pick up characters that haven’t existed in array.

function extractUniqueChars(str) {
	var result = [];
	for(var i=0;i<str.length; i++) {
		if (result.indexOf(str.charAt(i)) < 0) {
		    result.push(str.charAt(i));
		} 
	}
	return result;
}

Shuffle the array of characters

In the second step, we disarrange the collected array by shuffleArray() function.

function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

Mixing all into one function

The last step is mixing the above functions into encodeString(), which gets a string as input and generates the key and encoded text.

function encodeString(str) {
	var srcArray = shuffleArray(extractUniqueChars(str));
	var encodedArray = [];
	for(var i=0; i<str.length; i++) {
		encodedArray.push(String.fromCharCode(srcArray.indexOf(str.charAt(i)) + 
				'0'.charCodeAt(0)));
	}
	return {key: srcArray.join(''), value: encodedArray.join('')};
}

After generating key and encoded text, the developer puts them into javascript code in a webpage. The encodeString() and related functions were kept privately (don’t include in webpage).

Encoding example

Suppose my webpage have a mailto link contained email address pnhung177@example.com as follows:

<a href="mailto:hideme@example.com"><img src="mail.png" alt="Email to me"/></a>

I don’t want put this code in plain text to HTML code, so I use encodeString() to create the encoded text (and the key, certainly) and store them to webpage.

var encoded = encodeString(
	'<a href="mailto:hideme@example.com"><img src="mail.png" alt="Email to me"/></a>');
console.log(encoded);

Object {
key: "i@se:ldt/<com>=.raEpx hf"ng", 
value: "9AEF@3G>H<A057;4F063<313DA<C53?:;<H=90<JE2@:>H<A05?CIJHEA57>HB<A05E7;E<3H8=98A="
}

Decoding process

The decoding process is simpler than the encoding process. It may be defined by only one function as follows:

function decodeString(key, encodedText) {
	decodedArray = [];
	for(j=0; j<encodedText.length; j++) {
		decodedArray.push(key.charAt(encodedText.charCodeAt(j)-48));
	}; 
	return decodedArray.join('');
}

The decodeString() function together with applied code (ie called decodeString() with specific input) were declared inside HTML page.

Reference

pnhung177

Keep moving forward