Obfuscate your e-mail address with PHP, JavaScript and CSS

According to Wikipedia, more than 97% of all e-mails sent over the net are unwanted. That’s around 200 billion spam messages per day.

To keep this insane amount of spam out of your inbox, you should keep your e-mail safe when you display it on web. One of the ways to keep it safe is to obfuscate it. In this tutorial I’ll show you how to create a script that will do just that.

Basic requirements for such script (at least from my point of view) are:

1. It should function pretty much out of the box. User should work only with real e-mail; script should obfuscate and deobfuscate it on the fly.
2. It should show obfuscated e-mail to bots, but real one to humans; humans should not even notice that obfuscation (or deobfusaction) is taking place.
3. Script should work on all desktop browsers (I’m talking IE6+here) and on mobile browsers as well (at least on the ones that support JavaScript).

To handle this, we’ll create a PHP function that will take string (e-mail address) as an argument. The function will reverse the address and obfuscate it using slightly modified ROT13 algorithm.

Deobfuscation will be done with JavaScript. When user opens the page we will detect which e-mail links have been obfuscated, apply reversed ROT13 algorithm on them and direction:rtl and unicode-bidi:override CSS rules.

This way, users will see real address, but spam bots will still (even if they can parse JavaScript) see a reversed e-mail.

This will, of course, leave us with a usability problem. If user copies the address, or if he clicks it, he’ll get the reversed one. Therefore, as a last deobfuscation step, we’ll reverse the reversed address and remove added CSS rules as soon as the user hovers over the link.

Demo

E-mail Obfuscation (PHP)

Code is thoroughly commented, have a look if you’d like to know more.

[code lang=”php”]
//Function takes string as an argument and returns a string.
function obfuscateEmail( $email ) {

//We will work with UTF8 characters, just to be safe that we won’t mess up any address.
$emailLetters = preg_split( ‘//u’, $email, null, 1 );
$obfuscatedEmail = ”;

//Reversing the string (e-mail).
$emailLetters = array_reverse( $emailLetters );

//Characters that are to be used when obfuscating email address.
//If you change this, make sure you change the characters string in JavaScript as well.
//And please note that the string must have even number of characters for this to work.
$characters = ‘123456789qwertzuiopasdfghjklyxcvbnmMNBVCXYLKJHGFDSAPOIUZTREWQ’;

//Get the number of characters dynamically.
$charactersLength = strlen( $characters ) – 1;

//Obfuscate string letter by letter.
foreach( $emailLetters as $letter ) {

//Get the current letter position in the string.
$letterPos = strpos($characters, $letter);

//If the character is present in our string of characters,
//we’ll switch it; if not, we’ll leave it as is.
if( $letterPos !== false ) {

$letterPos += $charactersLength / 2;

//For letters that are in our characters string positioned
//after the total number of characters, we’ll start from beginning.
//For example, “v” becomes “1”, “b” becomes “2”
$letterPos = $letterPos > $charactersLength ? $letterPos – $charactersLength – 1 : $letterPos;

//Obfuscated letter.
$newLetter = substr($characters, $letterPos, 1);

} else {

//Characters that aren’t in our list will be left unchanged.
$newLetter = $letter;

}

//We append obfuscated letter to the result variable.
$obfuscatedEmail .= $newLetter;

}

//Sign @ is a control letter. Since more than one @ sign is illegal
//in email address, we’re going to use two @ symbols to know when
//the string has been obfuscated (and needs deobfuscation).
//That way you can use obfuscated e-mail only in href attribute,
//while the link text can be something entirely different.
//An example: This is my email.
return $obfuscatedEmail . ‘@’;

}
[/code]

After you include function into your code, obfuscation can be preformed like this:

[code lang=”php”]

[/code]

And in a real life usage, you’d create an obfuscated e-mail link like this:

[code lang=”php”]
E-mail deobfuscation (JavaScript & CSS)

Step one is to detect all obfuscated links on a page. That’s fairly easy to do; we just find all elements that have class obfuscatedEmail.

[code lang=”javascript”]
//This is written to be as general as possible; you can leave this part out and just call
//deObfuscateEmail() manually on elements that should be deobfuscated.

var obfuscatedEmails = document.getElementsByTagName(‘a’),
obfuscatedEmailsLength = obfuscatedEmails.length,
i = 0;

for( ; i -1 ) {

deObfuscateEmail( obfuscatedEmails[i] );

}

}
[/code]

I encourage you to adjust this part to your own needs. If you have only one e-mail on the page, you don’t have to loop through all page elements. Something like this would suffice:

[code lang=”php”]
//PHP
DemoSource files

Conclusion

With the amount of spam that is being sent over the internet, you surely don’t want to leave your e-mail address unattended; do everything you can to prevent it from falling in wrong (spammy) hands.

Technique that I’ve shown you here should be (if nothing else) at least a good start.

Additional readings:

• Graceful E-Mail Obfuscation
• Methods to hide email addresses from page source
• Best Method for Email Obfuscation?