ThirdRoute

For the past day, I've been working on developing a bookmarklet. Part of it involves injecting a sign-in form as an iframe into the page the user is on. Keeping the form snuggled up in a remote iframe is crucial for keeping the credentials the person types far away from the peeking eyes of potentially-malicious code on the page (see "Same-origin policy").

Well this is great. *sigh* Now how do you go about sending legitimate messages back and forth between the two documents?

The Solution

The answer lies with the blend of two techniques: (A) sending the data by setting the fragment identifier for the remote document and then polling for the change, and (B) implementing HTML5's window.postMessage() method.

xcom_send

var xcom_send = function(win, msg, origin){
	if (document.all ? document.documentMode : window.postMessage){
		win.postMessage(msg, origin ? origin : '*');
	}else{
		win.location.hash = '#xcom-' + msg;
	}
};

Argument	Notes
win	The target window to receive the message.
msg	The string to send to win. This will be picked up by the callback setup with xcom_listen.
origin	(optional) The domain(s) to allow communication to. Accepts a string, or array of strings. Domains should be in the form of http://the.domain.com (make sure to not include a trailing slash). Important: Don't depend on this for security---this argument will only be acknowledged by modern browers: IE8, Chrome, and FF3 beta 3 so far.

xcom_listen

var xcom_listen = function(win, cb, origin){
	if (document.all ? document.documentMode : win.postMessage){
		var receiveMessage = function(e){
			var safe = origin == null || origin == '*';
			if (!safe){									
				if (origin instanceof Array){
					for (var i = 0; i < origin.length; i++){
						if (origin[i] === e.origin){
							safe = true; 
							break;
						}
					}
				}else{
					safe = e.origin === origin;
				}
			}
			if (safe && cb) cb(e.data);
		};
		if (win.addEventListener) win.addEventListener('message',receiveMessage,false);
		else if(win.attachEvent) win.attachEvent('onmessage',receiveMessage);
		else win.onmessage = receiveMessage;
	}else{
		var l = win.setInterval(function(){
			if (win.location.hash.substring(0,6)=='#xcom-'){
				//window.clearInterval(l);
				var msg = win.location.hash.substring(6);
				win.location.hash = '';
				if (cb) cb(msg);
			}
		}, 250);
	}
};

Argument	Notes
win	The window to listen for messages from.
cb	The callback function to receive any messages from win. The callback will be invoked with the message string as the first and only argument.
origin	(optional) The domain(s) to allow communication from. Accepts a string, or array of strings. Domains should be in the form of http://the.domain.com (make sure to not include a trailing slash). Important: Don't depend on this for security---this argument will only be acknowledged by modern browers: IE8, Chrome, and FF3 beta 3 so far.

Usage Example

To listen for messages sent from an iframe in the document, use xcom_listen with a basic callback function:

var frame = document.getElementById('myframe');
xcom_listen(
    frame.contentWindow || frame, 
    function(msg){
        alert('From the iframe: ' + msg);
    }, ['http://mydomain.com', 'http://www.mydomain.com']);

From inside the iframe, use xcom_send and window.top to send a message to be captured by xcom_listen in the parent document (seen above).

xcom_send(window.top, 'I like to talk and be heard!');

No more antisocial cross-domain web apps!

I spend 12 hours straight in Aptana (an Eclipse-based IDE for web development) some days. Aptana’s great… but it’s pretty vanilla-looking straight out of the box (which gets old).

This evening, a friend taunted me with Coda screenshots, and I decided enough is enough—it’s time to give code highlighting in Aptana a facelift. Well, here it is: a custom color scheme just for Aptana! I call it “Autumna.”

How it looks

Download & Install

1. Download and extract autumna-1.1.zip.
2. In Aptana, go to: Window > Preferences.
   • In the search box in the upper left of the dialog that comes up, type in “colors”. This’ll hide almost all the fields you’re not interested in.
   • For each language listed under Aptana > Editors, there will be a “Colors” node. When you click on each, you’ll see an “Import…” button that will allow you to install the color scheme for the language.

Follow Me on Twitter

Last week was pretty good. Naah, epic actually. One of my great friends Pasquale D’Silva from Australia (now in Vancouver) finally hopped on a plane and came to visit for a week in Cody, WY.

We got to marvel at tumbleweeds (apparently mystical to Aussies), take a giant roadtrip through Yellowstone and into Jackson,wrestle with bears, walk through heaps of snow, fine-tune my Aussie accent, delve into a pitch-black cave, laugh at cowboy hats, bake little creatures in the oven¹, pillage McDonald’s like Vikings, geek out, and all sorts of other awesome.

Also, I finally got to witness how the illustrating fiend can draw any creature (real or imaginative) in thirty seconds flat… even on the back of the car.

The only disappointment of the trip was not getting to see a real bear—the January-like wintery conditions probably didn’t help. Anyways, it’s sure going to be hard to say “snow” without pronouncing it as “snaaaar” now…

Twas a totally awesome time! Now to make it up to Vancouver sometime!

1. @PETA: clay creatures [↩]