Clic!Dev, ‘Tate, and many more projects!

Ever used GenPass? SuperGenPass?
What do you mean, you do not know what I am talking about? Oh, you need to read on.
Of course, I am referring to SuperGenPass, developed by Chris Zarate. This wonderful bookmarklet automatically generates strong passwords for you, based on the url of the web sites you are visiting. You only need to memorize your master password and that is all.
This is a great tool on so many levels. It works for broken brains -like mine: you take all your passwords with you wherever you go since all you have to do is use the bookmarklet in any foreign browser. It is secure: no password is in fact stored anywhere.

What are the advantages of Air GenPass?

• Well, first of all, it allows you to run the tool with web browsers that do not provide correct support for bookmarklets. Safari for Windows, I am looking at you.
• If you are a tad paranoid, like me, but have to use browsers that are unable to store such a big bookmarklet, for instance Internet Explorer or Opera, you may not wish to use Chris Zarate’s server to run it every time you need to regenerate a password.
• If you are at a friend’s house and they do not wish to let you install a bookmarklet in their browser, no problem: GenPass is portable and you can carry it around with you on a USB stick. Of course, one may argue that they still have to agree to install Air

Explaining how this application works is a breeze, mostly because there isn’t much to explain. When you open it, you see three text fields. Enter your master password in the bottom one and click on the tiny icon to close it. The top text field will contain the password generated by the tool and you will be able to copy them to the clipboard using its own icon. The middle field is the one where you will enter or paste the link of the site you are currently visiting. Since Air is a desktop application, you can alternatively grab the link’s icon in your browser’s address bar and drop it on the application.

You can stop reading here and download the application directly if you are not interested in the technology behind this simple guy.

This is my first Air application. So, how hard was it?

I used the latest release of Aptana, which is very nice for creating Air applications. That is, as long as your Air applications do not rely on Flex.

application.xml contains all the information pertaining to your application. Note that this information is not used by the Air installer. It seems that the installer only looks at the certificate used to sign your application. Since the only certificates currently available can be bought from Thawte for several hundred dollars, I believe that the fact that the installer does not claim that “Chris was here!” is a reasonable trade-off.

You can edit this file manually to provide information such as application license and icons.

AIRAliases.js is the library that links the objects used by Air’s bridge.

If you are a total Air newbie, just like I was before I wrote this tiny application, you have no idea what is this bridge that I am talking about.

The first iterations of Air -formerly known as Apollo- did not come with a security model and it was potentially possible to do all sorts of nasty things with Javascript code that could simultaneously talk to the Internet and clobber your local filesystem if it felt like it.
Adobe quickly introduced their own security model, which happens to be kind of kludgey but certainly makes sure that any connection between the World and your local resources is voluntary.

unsafe.html is a html page that is included in a frame. This simple fact means that it has access to all your web browser resources and no access to your computer’s resources. This is the Web sandbox and is usually used as presentation layer.
In my case, of course, because I am a little piggy, al l the presentation is done in the top frame, which happens to have access to your computer resources but cannot run queries to the World or execute arbitrary code through the use of eval() or setTimeout()
Joking aside, it is perfectly legit to use the top frame as presentation layer; it just makes your life harder if you use some libraries that make extensive use of eval()

GenPass.html is our top frame, just described in the previous paragraph. It contains a lot of Javascript and the definition of the iframe
container that links to unsafe.html. I have no right to be proud of this Javascript because I did not write most of it. It’s actually Chris Zarate’s supergenpass bookmarklet code, only modified just to the point where it can be included in an Air application. The rest of the code is the UI, which relies on jQuery. Because, good news, jQuery works on Air!

<iframe id=”unsafe”
src=”unsafe.html”
sandboxRoot=”http://voilaweb.com/”
documentRoot=”app-resource:/”
width=”0%”
height=”0%”
style=”border: 0px; margin: 0px; padding: 0px; width: 0%; height: 0%; visibility:hidden;”>
</iframe>

What’s really important here -save for the fact that I am setting all sizes to ‘0′ because I do not want to display the frame- is the src attribute. The page that will run in the web sandbox is unsafe.html

function notworking()
{
$(’#working’).css(’visibility’, ‘hidden’);
}

// Bridge
var Exposed = {};
Exposed.notworking = notworking;

$(document).ready(function() {
document.getElementById(’unsafe’).contentWindow.parentSandboxBridge = Exposed;

Do not blink: this is where it’s happening!
If it were not for this bit of code, we would not need our iframe. But since we wish to be able to invoke notworking() using setTimeout(), now we have to jump through hoops. Fortunately, these are simple hoops once you understand them.
First, we create an object called Exposed. We store a reference to our callback method in this object.
Then, when the DOM is ready according to jQuery, we take advantage of the fact that top frames are allowed to access the content of iframes: we store a reference to Exposed in the child document (remember that when we created our iframe, we gave it an id of ‘unsafe’? This is how we are accessing it now).

When the user clicks on the ‘Copy to Clipboard’ icon, we display an animated gif: a couple spinning arrows. We wish to display these guys for a second, then get rid of them. Of course, that’s the rub: since we are in the local sandbox, we cannot invoke setTimeout(). No problem! Let’s ask our child document, who lives in the Web sandbox, to do this for us. We are keeping, in our top document, a reference to the only method contained in the child document: localpause(). It is now time to invoke it. Let’s have a look at its content:

function localpause()
{
setTimeout(’parentSandboxBridge.notworking()’, 1000);
}

It is pretty straightforward: after a second, it will invoke the parent’s notworking() method, which will hide the animated gif (see above).

And that’s all there is to it, really.

Feel free to leave a comment if you have more questions.

I want to download it!

Oh, yes. Sure. Clicky.