Thursday, April 8, 2010

HTML5 to the rescue!

The other day I needed to find a way for a web page to request data from another site.  I had control of the "other" site, but not on the web page itself. I could however place javascript on it, accessible through a link.

So, what had to be done was write some javascript that when activated on the proper page, should fetch data from the "other" site and update some things on the web page as it is viewed in the browser. A classic example of cross-site scripting...

Try 1:  xmlhttp API

NOT! The browsers go into great lengths to prohibit xmlhttp requests directed to pages not in the same server, or at least DNS domain. So this one is a no-no.


Try 2: window.open

Well, this solution would let me open the page on the "other" site where the data would be, but again, browsers go into great length to prohibit any interaction of pages like above. Most of the created window properties would become inaccessible as soon as the page started to load.

Bottom line: there is no way for javascript on one page to peek the contents of another, nor there will ever be one, as it is a huge security hole.


Try 3: greasemonkey

At least, something that would work. But, letting aside the minor(?) security issues and browser compatibility, the web page not under my control strictly forbids any greasemonkey scripts stored. The will shoot them on sight and ban the user. So... no go again.


Try 4: PostMessage/ message event

After enough looking around on how to circumvent xmlhttprequest restictions or greasemonkey alternative, Google stumbled onto a reference for this HTML5 feature. Which was exactly what I was looking for! And it is implemented exactly to allow intercommunication of 2 browser windows belonging to different sites.

Really! Google for PostMessage specifically, there are enough examples already on the net describing the API perfectly.