Understanding Frames and their Policies

Hey,

A couple of days back, I was discussing with a friend, the permissions that iFrame can have to its parents, sibling frames and children on different domains. Though I assumed that the policy was always decendant, I realized that it has not always been true. I quickly wrote a simple HTML page that would allow me to play around with pages. I quickly defined two aliases for my local server and started playing around.
I could have used firebug to inspect the iFrames, but I am not sure I could see environment as I would, from inside a child iFrame. Hence, I also included a simple Javascript console inside the pages that would allow me to create child frames, inspect properties and permissions. Here is the iFrame that you could use to experiment.



I also found this interesting paper that talks about the policies of frames in details. About the commands on the console, I added just one convince method called addFrame() that adds a frame to the current document.body and returns a reference to it. The shell is from http://www.squarefree.com/shell/. You may want to save the HTML to try it for different domains.

Google Logo on the Search Page

I had recently written about the greasemonkey script that would replace the google logos on the search page with the festive google logos. Here is the script that you could install. I still have to test the page, so still waiting for google to show up some special logos :).

The Google Festival Logos

My firefox start page is about:blank, not google.com. Infact, it has been ages since I have visited the google home page for searching. Its always the OpenSearch Box that I have always used. That is the reason I have been missing out on all the festive logos that google has been posting. It is interesting that google does not show the same logo on the page where the search results are shown. I thought of quickly fixing that and have started writing a plugin that replaces the usual Google logo on the search results to the one that appears on the home page. This should be a quick script, so I thought of writing about it.
The google home page displays the logo after the
with an id lgpd. The tag after this is the one that displays the festive logo image of google. The greasemonkey script would have to fetch the google home page, navigate to this br, and pick up the entire tag.
The homepage could be fetched using GM_XMLHttpRequest, but navigating the HTML string would be cumbersome. The HTML could be made the part of an invisible div, and document.getElementById('lgpd') would get a pointer to the image tag.
This tag would then have to be substituted inside the tag that has the id "logo", that displays the original google logo. Hence, the logo on the google home page would be on the search page. The size sure would be a problem but that can be fixed by using the same tag as span that has the original google logo as its background image.
Watch out this space for the script details.

Bookmarklets - Rendering JSP content

I had earlier written a post on writing effective bookmarklets. Bookmarklets can perform a variety of useful tasks on the page, and here is a classic list of those useful bookmarklets.
Recently, I was asked to write a firefox extension that complemented a website I was working on, but evaluating the requirement, I realized nothing of the requirement needed much change in the browser chrome. I started writing this bookmarklet and it has now graduated to become a full blown application with server communication, user preferences, etc.
In this post, I thought of writing a little about the design of the server side communication in the bookmarklet application. Since the javascript code of the bookmarklet is embedded in the domain of the page, AJAX requests to our sever are not possible. Hence, we need to rely on cross domain server calls, and I used YUI GET for the purpose.
In the application, there was also a lot of HTML content that I had to render. The HTML and the CSS files for the page were supplied by the designer, and hence rendering by DOM Manipulation was out of question. Hence, I needed some way to fetch the HTML file from the server and render it inside the DIV at my bookmarklet created. I had to write a servlet to read the file from the server and send it across to the client. However, since the client was expecting only JSON (remember, the client server communication was done using YUI GET), the spaces and the quotations in the HTML file were throwing error.
Hence, the servlet that fetched the HTML file had to strip it of spaces and quotation marks, making it a valid JSON String. The issue however is complicated by the fact that the HTML files had JSP tags embedded in them. A simple file fetcher could not evaluate the tags. I then needed a way to evaluate the JSP and convert the resultant HTML to JSON String. There are two approaches possible, either write a server filter that does this, or write a tag library. I chose the latter for the obvious reason of maintainability and portability. I wrote a tag library that did exactly this and spit out the JSON String of the JSP that was processed. Here is the Tag defination and here, the Tag Handler. Hence, I have a way to render JSP pages on Bookmarklets easily. The Tag takes the name of the Javascript variable to which the JSON String converted from JSP will be assigned.