Posts Tagged ‘encoding’

Do you want to post your email publicly and visible for anyone who reads your blog/website to have the ability to contact you but you do not want to have your private email box spammed with ridiculous amounts of phishing emails and junk you did not ask for? What about making the email address fully click-able with a “mailto:” anchor tag. What about setting the email address automatically in a completely cloaked image, that remains anonymous at the same time? Well I think I have thought up the perfect solution for you.

The concept is really simple. Page crawlers look for mailto:myemailaddress@mydomain.com, or the key factors in there, which are ‘mailto:‘, ‘@‘, and ‘.com,.net,.org, etc’. So if we take these out of the raw HTML code then the page crawler wont see it. Now sure you can just break it up with stuff like myemailaddress -at- mydomain -dot- com, which definately will slow the crawlers down, but lets remember that the people who write these bots are smart and like a challenge.  So because the idea of breaking up or spelling out email addresses has gotten more popular, its also gotten common to include a small dictionary of common words that are releated to email addresses and then to just grab a string and then convert it back to the real email address.

The Idea here is to take the above mention concept and move to the next extreme.  Lets encode our email address when we bust it up and it will quite literally disappear into the website and yet it will also remain in plain site for us humans.  Also because we have made it for all practical purposes invisible to bots and crawlers, we can put back some of the features we removed before, like put the link back in and make the email address clickable once more.

So.. lets have a look at some code.

First thing we need to do when we grab out email address out of a database is to give it a simple encoding like so…

function strToHex($string, $x=0) {
	$hex='';
	for($i=0; $i < strlen($string); $i++) {
		$hex .= dechex(ord($string[$i]));
	}
	echo strtoupper($hex);
}

Next we need to work some javascript magic on it. For this I prefer to use jQuery.

jQuery.fn.hex_mail = function(username, domain_name, domain_ext, link_text) {
    var conusername = DoAsciiHex(username);
    var condomain = DoAsciiHex(domain_name);
    var condomext = DoAsciiHex(domain_ext);
    var link_text;
    var email;
    var useImage = 0;

	if(link_text) {
		if(link_text == " ") {
			useImage = 1;
		} else {
        	link_txt = link_text;
    	}
    } else {
        link_txt = conusername + "@" + condomain + "." + condomext;
    }
    if(useImage == 1) {
    	mail_link = "";
    	jQuery(this).wrap(mail_link);
	} else {
	    mail_link = "" + link_txt +"";
	    jQuery(this).append(mail_link);
    }
};

Now what the javascript is doing is, taking the encoded text, decoding it and then placing the text into a dynamically created anchor tag that is only visible within the DOM. Sure we can just put non-encoded strings of text into the same script and stuff that into the head of the doc, and it will do the same thing, but, the keywords i mentioned earlier are still present. The encoding provides the javascript with a nifty cloaking device if you will.

Next let slap the whole thing into some HTML and have a look.

 < html >
	< head >
		
		
		


	< /head >
        < body >
Example that uses your readable email address.

Example that uses a hidden email.


        < /body >
< /html >

In the above code we are doing both putting the email in plain site, as well as making the email link hidden and only visible via click or mouseover event in the status bar.

Want to take it to the next extreme? how about dynamically embed your email in an image thats encoded, cloaked, and now not even really text??

check this out.

function strToJpeg($string, $size, $fcolor, $bgcolor, $hex){

header('Content-type: image/jpeg');
if($hex == 1) {
	$string = hexToStr($string);
}

$len = (strlen($string)*8.75);

$txtbox = imagecreatetruecolor($len, $size+5);

$fcolor = explode(',',rgbColor($fcolor));
$fcolor = imagecolorallocate($txtbox,$fcolor[0],$fcolor[1],$fcolor[2]);
//$fcolor = imagecolorallocate($txtbox,0,0,0);
$bgcolor = explode(',',rgbColor($bgcolor));
//echo $bgcolor;
$bgcolor = imagecolorallocate($txtbox,$bgcolor[0],$bgcolor[1],$bgcolor[2]);
//$bgcolor = imagecolorallocate($txtbox,255,255,255);

imagefilledrectangle($txtbox,0,0,$len,$size+5,$bgcolor);

$font = 'arial.ttf';

imagettftext($txtbox,$size,0,0,12,$fcolor,$font,$string);
imagejpeg($txtbox);
imagedestroy($txtbox);
}
strToJpeg($_GET['string'],$_GET['size'],$_GET['fcolor'],$_GET['bgcolor'],$_GET['hex']);

If we take the encoded email address parts, and put them all back together and decode them then use the PHP GD libs to create an image out of the text. Then we can use the javascript function from above to "wrap" the image into an anchor. like so

This option is for those of us who are so paranoid that we are afraid to go to rehab.

For now thats a start on the concept. I may revisit this in the future and give some more incite or ideas. For now if you want to look at some real working code, download my example.

||Download|--|Example||