Dy-Verse

Update to Reddit Bar

2009-07-01T06:39:00.001-07:00

Here is a quick update to the reddit bar greasemonkey script that I had written. Looks like the id of the title is now removed and this led the greasemonkey script to stop functioning. A quick fix and it is back to normal.
Instead of relying on the id now, we iterate through all the tags that have the "title" class. This also selects the hyperlink to the article. To find this from the array of "title" class tags, we do a simple match to check if the tag has the document's title as the innerHTML. The title of the window has the "name of the story : Reddit". If the node is a link and the innerHTML does have the appropriate part of the document title, it is returned as the targetURL which should be used for the iFrame. Back to normal, I can not upmod stories right from the comments page. You can check out the script here.

TwitteyBot updates

2009-06-25T05:55:00.000-07:00

I had written a Google app engine based application to create and manage bots that feed data into twitter. The application is similar to what twitterfeed does, with some additions. The applications is now up and running at http://twitteybot.appspot.com where you can register to activate feeds.
The data structure used is simple, but I am afraid it may not stand up to the scalability requirements. The code is hosted at http://code.google.com/p/twitteybot.
The persistence object is structured as User > List of Twitter Accounts > List of Feeds > List of Status Updates. Being a unidirectional owned relationship, when the status messages are fetched from the feed, they cannot be directly inserted into the Status Updates object without a reference to the user. Another problem with the status fetch cron job is that currently it requires a user name. This also has to be changed before the bot is fully functional. The twitter accounts also require username/passwords. These can be changed to support OAuth, but thats something for the future. The user interface is also plain HTML based, it has to be changed to make AJAX changes to the database. That should make the product more or less complete.
On the content side, there still needs to be work for getting content for bots. I was planning on bots for The Bhagwad Gita and Thirukurals. The Bhagwad Gita is on a webpage, not parsable by Yahoo mail. I would have to curl (download) it all to a text file and then upload the file. Watch out this space for updates and please do drop a comment if you would like to install the bot in your app engine account.

Using Bit.ly to track Gmail logins.

2009-06-17T23:25:00.000-07:00

I had written a Gmail gadget that lets you track your usage of gmail. The tracking data was stored inside your own Google Calendar. The calendar was also used to send SMS messages if anomalies were detected in logging into the account.
The only think the gadget seemed to lack was visualization. I wanted to use Google visualization some day, but could never find enough time to get it done. That is when I decided to piggy back on the visualization capabilities that bit.ly provides. I had written about the way to track rogue visitors. The same scheme can be applied to this Gadget also.
An extra link was added at the bottom of the gadget where the user can specify the bit.ly URL. This is saved as a user preference and an invisible image with this link is appended everytime the gadget is loaded. Since a call is made to the bit.ly url, the access is tracked. The code is now uploaded to http:\\gmailids.appspot.com. The source code is also available here. To enable this change, you may have to add the gadget again (which may result in losing the existing data about how long you have spent on gmail), or when Gmail picks up the data.

Twitter Bot on Google App Engine

2009-05-31T23:08:00.000-07:00

Over the weekend, I have started working on another application to be hosted on the Google App Engine. This application is a bot that reads from a set of RSS feeds and posts the updates to a specified twitter account.
On the face of it, this is a simple project, but there are some interesting intricacies that I wanted to put down in this post. The idea is to create a management dashboard that does the following

Allow users to specify which twitter accounts to post to
Twitter status update interval
Feeds that will act as a source for status
Interval for fetching feeds
Multi tenancy, supporting multiple users for bot

The Google App Engine database has to be used to save the updates to handle the difference in frequency between the feed and twitter updates. Watch out this space for updates.

Inside the dragon fish login demo

2009-05-25T05:26:00.000-07:00

Dragon Interactive Labs have excellent demos on how javascript can be stretched to create some awesome effects. This post details how the dragon fish demo login screen is done using pure javascript. The colors around the login box and the glow are done using background images and changing its position. The first layer is this image that is set as a background image changing its left all the while.
On top of this div are the masks for the four corners and the four sides. These have images with semitransparent pngs that are respinsible for the glow effect. There is also a mask in the middle that masks the majority of the background.
It is above this layer that regular fieldset containing the username and password fields. You can see this effect if you move the third element with "map" classname with to an absolute position and 200 px left. The javascript constantly move the huge image to left, creating the effect.

Weave Identity : The auto login feature

2009-05-21T04:53:00.000-07:00

A few days ago, I had written about the interesting similarities between Microsoft Cardspace and the way Weave works. This post is about the other interesting feature - the auto login. The idea is to save the user name and passwords on the weave server, retrieve them when we are on a login page and submit it.
If you unzip the xpi file, you can look for the LoginManager.js file. This is the file that is responsible for saving user credentials, retrieving them when required and submitting the form. Most functions are self explanatory. An observer is called whenever a form is submitted. The credentials are then picked up and saved to the store.
The _fillForm function is looks for matching logins saved for the login form and fills in the details. There is some complex logic that determines if a password is correct or not, but it can be ignored for now. It is something like the form.submit() function that I was searching for, but unable to find. I was also wondering how the extension handled password submission for sites like meebo.com that hash the password before sending it across. Watch out this space for updates on how these login form oddities have been handled.

Reddit Bar :: adjusting the extra space

2009-05-16T08:20:00.000-07:00

A quick update to the reddit bar greasemonkey script. Looks like the reddit page updated its code to add some extra style to the comments page. This added an extra space under the reddit bar that was inserted using a greasemonkey script I had written. I just got some time to fix it and you can find the final code here.
The addition was a change to the style of the footer. The div with class ("footer-parent") had a padding-top set to 40px.
A single line to set this to 0px did the trick and the extra space is now gone.

Weave Identity : in contrast to cardspace

2009-05-13T04:53:00.000-07:00

There have been multiple announcements about Mozilla Weave adding an identity angle to its offering. A video detailing the auto login capability is available here. Weave enables automatic login using OpenID enabled sites behind the scenes. They also submit the login forms automatically when user credentials are remembered. As explained in the video, the "Sign in with Weave" button appears when login with OpenId is permitted. Clicking on the button would automatically perform the re-directions and log the user into the site.
This seems to look exactly same the like Windows Cardspace initiative. The similarities are interesting. Here is the workflow laid out side by side.

Steps	Cardspace	Weave Identity
1	User loads the login page with Cardspace enabled.	User loads a login page that accepts OpenId Credentials.
2	User selects the “Login with cardspace” button on the page.	User selects the “Sign in with Weave”, or the button on the address bar.
3	Cardspace UI is displayed and the user selects the card that best represents the identity for the site.	There is just one weave identity for now. It gets automatically selected.
4	A request is made to the identity provider site to get details by Cardspace.	A browser redirect takes the user to the OpenId identity provider page (services.mozilla.com).
5	If the identity provider requires credentials, a dialog box shows up.	Since the user is already logged in using weave, no credentials are requested for.
6	Credentials are sent to the Identity provider and if authentication succeeded, positive reply is received.	A redirect by the OpenId provider to the original page with reply.
7	User is logged in successfully	User is logged in successfully

It is the second part of weave is the way the login manager works. The way it saves usernames/passwords and auto submits forms is interesting.
More about it, and analysis in the next post.

Facebook Konami Lens Flare Effect

2009-05-09T04:37:00.000-07:00

The Konami cheat code finally made its way into facebook. There were a lot of posts that spoke about the up-up-down-down-left-right-left-right-B-A-Enter code and the lens flare effect on facebook. I did a little probing and here is how it is implemented and can be reused in your own site.
First, there is the handler that catches the secret key. You can find it in this file. Just search for
[38,38,40,40,37,39,37,39,66,65,13] which represent the character codes for the secret key combination. The function is called onloadRegister which typically registers a key handler on the window. The function effectively loads this response that in turn loads the file responsible for the lens flare javascript file.
The lens flare is initialized using the following code after the required javascript file is loaded.

var lf = new LensFlare("http:\/\/static.ak.fbcdn.net\/images\/lensflare\/*?8:162521");LensFlare.flareClick(lf).flareScroll(lf).flareKeyPress(lf);

This is done after some variable are set in the win.Env object, the use of which is still a mystery to me. To execute this in our page, we need to initialize some objects, defined in this file. To get lens flare running, this file also has to be included. Here is the consolidated code that you need to use.

Paste this in the browser URL first,

and then, after sometime, paste this.

You can try the code on this very blog window.
To include this in your page, you have to include the following script in your page.

The interesting part in this is the animation of the images to create the lens flare, another example of fine javascript wizadary !!

Reddit Bar :: Self links fixed

2009-05-06T05:29:00.000-07:00

A few posts ago, I had written about the greasemonkey reddit bar. Swaroop pointed out that the reddit bar was not working fine for self links. It does not make sense to show up the reddit bar on such pages.
I have changed the code to reflect the change and you can find it here. The change was trivial. Just find out the target URL that would open the iFrame, and if it equals the document's url, the bar will not load, letting the page stay as it is.
Swaroop also had pointed out that the reddit bar shows up twice and I am taking a look at it. If you have seen errors, please do sent me the URL to help me fix the error.

Bridging the Gap between the internal and external could - RSA Access Manager to protect resources on Google app Engine

2009-04-27T08:10:00.000-07:00

Here at RSA, one of the areas of constant probing is the idea of using existing RSA applications to bridge the gap between internal infrastructure of an enterprise and its extension on an external cloud. With a long weekend at hand, I worked on this hobby project. This post details ways to seamlessly protect the applications that you have moved to an external cloud with an existing RSA Access Manager installation.
The only interesting fact is that Google App engine is Platform-as-a-service (as opposed to Amazon EC2 which is Infrastructure-as-a-service).
Here is a deployment diagram and the various components involved. As shown in the diagram, the identities of the user rests in a LDAP or Active Directory inside the enterprise domain usually protected by a firewall. Apps 1 and 2 are deployed inside the domain of the enterprise while App 3 is deployed on Google App Engine (different domain) . The user may access the resource either when he is inside the enterprise, or when outside from a kiosk, etc.

Authentication :
In all cases, the user should be authenticated using credentials of the enterprise. Google App Engine credentials may be used for single sign on but it is not mandatory.

Authorization :
The system administrator should be able to define access management rules for the user based on the user's identity inside the enterprise.

Here is how RSA Access Manager can be configured to access the authorization-rules server to determine access to users. Firstly, we would require an Access Manager agent at the Google App Engine server. App Engine Java version provides Server filters that intercept requests before they access the actual resource. Here is how the work flow proceeds.

User accesses a resource on App engine. He is not logged into Google or on the enterprise.
The filter intercepts the request and does a URLFetch to the Access Manager Authorization-rules engine, deployed inside the firewall.
This communication is secured by using Google Secure Data Connector. This could also have been secured using mutual SSL if URL Fetch would allow it.
The server sees that the there is no cookie set in the request and replies to the agent that authentication needs to be performed.
The agent sends back a redirect response that throws the user to the authentication page hosted inside the enterprise domain.
User authenticated at this page. If the user is inside the enterprise, he could be authenticated using NTML, etc.
If credentials are correct, a cookie for the enterprise domain is set.
The user is then redirected to the resource page, carrying a message from the server to set a cookie for the Google domain.
The agent sets the cookie and again redirects to the resource page.
Since the resource is still protected by the filter, the filter kicks in again and does a URL Fetch to the server to see if the user is allowed.
The server sees the cookie that is sent in this request and decides on if this user is allowed access or not.
The agent sees the reply from the server and redirects or blocks the user, depending on the response.

This case become a little complicated if resources are protected using Google credentials, as specified in the app config file. This is the case where single sign on and federation is required; details about this in a later post.

Hence, using this simple filter, you can protect your applications that have moved to the external cloud just like resources are managed inside the enterprise. Adequate measures to secure the communication between the agent in App engine and the Authorization server ensure that this deployment is secure like it was when inside the firewall.

Flash Resizer : Toggle it on and off

2009-04-23T01:53:00.000-07:00

This is a continuation in the Flash Resizer Bookmarklet series that I had written about some time ago. This post details the capability to toggle the bookmarklet on and off. A couple of people had written to me complaining that the resize capability prevented drag and drop functionality inside the flash. All drag and drop events seem to be picked up by the event handlers assigned by the bookmarklet. Hence, the toggle functionality could be used to remove the event handlers.
The trickiest part in the implementation is maintaining the state between two invocations of the bookmarklet. Since every invocation of the bookmarklet restores the object, all state information should be saved in the Global Window object.
When the resize handlers are assigned, they are also pushed to a global array. On subsequent invocations, the presence (undefined or not) of this object can be used to toggle active or suspended state. If the resizer is to be disabled, the destroy method ofYUI resize is called and elements are popped out of the array. Reactivating would require adding handlers to "move-handler" class elements.
You can drag and drop "Flash Resizer" to your bookmarks toolbar to check out the latest version. Click it once on any page that has flash on it to be able to resize the flash. Thereafter, you can click it to toggle activation and deactivation.

Launchy plugin for WCD

2009-04-18T01:23:00.000-07:00

I have found the "Whereever Change Directory"(WCD) tool very useful on the command line. Its a directory changing tool that changes to the directory without requiring to type the whole path. Porting it to Launchy as a plugin would be a great utility.
The windows version of the WCD tool uses a batch file to perform the directory change operations. A batch file by the name wcdgo.bat it created at a location indicated by the wcd.bat file. To use it with Launchy, we would need to append a "start ." statement to the file. Here is the modified version called wcdLaunchy.bat, forked from wcd.bat. This is the file that has to be fed into the Runner plugin with an appropriate keyword in Launchy.

Here is how the batch file looks like.

Flash Resizer : Technical Details

2009-04-12T02:26:00.000-07:00

I had written about a bookmarklet that allowed Flash Content on a web page to be resized. This post details the technical details of the code.

To start with, we iterate through all the flash elements - Object tag for IE and Embed to everything else. For flash elements that are opened with wmode="window", we redraw the element with a wmode="opaque". This is done to allow other HTML elements to be drawn on top the element.
Transparent Divs are drawn over flash elements. Click handlers are added to the divs that recreate the flash elements on an "position=absolute" div. This div can be resized and moved (with the YUI resize component). The flash elements with a 100% width and height resize with the div.
There are only a few caveats.

Shockwave Flash still appears on top of all HTML elements
Certain flash files do not scale and are fixed. Hence, resizeing the flash does not scale the contents, it just expands the element. Now working on ways to fix this.

At Devcamp 2

2009-04-11T01:57:00.001-07:00

Flash Resizer

2009-04-10T06:00:00.000-07:00

I have often noticed that Flash content on many sites can be better if they could be resized to larger dimensions. Sites like youtube and vimeo do allow full screen videos but it does not really work on multiple monitors where you would want to work on another application. Games also would look at lot better on sites like onemorelevel and miniclip if I could simply maximize the flash and hide other annoying advertisements.
I wrote a simple bookmarklet in the past couple of days that does just that. You can select any flash content, move it and re-size it by dragging the corners. The code is available is here. All you would have to do is add this FLASH RESIZER link to your bookmarks or drag and drop it to the bookmarks toolbar.
Here is how it works. A post about how the code works would follow.

Reddit Bar - Greasemonkey Script

2009-04-06T04:27:00.000-07:00

Before Digg released the Diggbar a few days ago, many users may never have bothered to visit the comments page or upmod a story. It was just too much work to upmod a story, specially when the Digg Redirect script took us directly from Google Reader to the story. With the digg bar, it becomes a lot easier for users participate.
I think that the Digg Bar is a great idea and wantedto replicate it for reddit too. Here is a greasemonkey script that you can install to see a similar bar for reddit. Users can toggle between the page and comments by clicking the comments. I find this particularily useful when hitting the comments page from reddit RSS feeds.
The code is simple, it just removes the header, the footer and the right div that displays statistics. It then picks up the details of the story from a div called "sitetable" and places it in the header. The last step is to allow a toggle between the iFrames that displays the target page content and comments.

Tracking those stalkers on Orkut

2009-04-03T23:38:00.000-07:00

A few days ago, I had written about a service that would help tracking URLs posted on twitter. I had barely started working on it when a friend told me about tr.im. It is a URL tracking service with statistics.
Apparently, this can also be used for the other use cases - tracking on Orkut and forums. The redirect can be a simple transparent image placed in the forums or Orkut scraps. So, the next time you get a scrap from an annoying stalker, just add a transparent png using tr.im to the scrap that you send. You can also drop the image into all emails and forum posts that you make. This would give you an idea on how far your mail travels or how many people view your posts.
Though the service was written for twitter, you can use it for a variety of services.

Greasemonkey on the server

2009-03-31T23:38:00.000-07:00

A search for the term "Greasemonkey on the Server" would lead you to a project that uses aservlet filter to insert scripts and seems to be quite old (and not under development). An alternative suggested in the forums, called SiteMesh seems to have the same fate. Even if we were to use them now, they work only with code that you own.
The framework I wanted should have the following

Proxy any webpage, letting me insert my own scripts into the page
Should not require me to configure the server as a proxy. Instead, I should be able to hit a specific url to view the page
Images, CSS, and even AJAX should work like it would work on the original page.

Some application that could leverage such a framework would be

Dynamicall marking pages for automatic scraping, like dapper.net.
Adding more data to a page and saving it as our version
Tracking user mouse movements, studying user behaviour.
Walking users through sites
Colloborative browsing

The list goes on. There are a lot of sites that try to achieve the effect but without 100 % success. Here are some methods we can use to achieve near perfect pages, though they are fetched by our servers.

For URLs (img, script, src), instead of rewriting the fetched HTML, we may as well have a handler at the root of our domain that redirects to the actual source. In this case, if the URL is absolute, it works just fine; in case of relative URLs, they hit our server and are redirected
Insert a script at the top of the page that substitutes the XMLHTTPRequest.open to call our proxyUrl.
Use our script to rewrite a href attributes to have control over the target pages.
Use our script to rewirte targets of form submit.
Send cookies set in the browser to our proxy for them to be relayed by the proxy to the actual server.

The idea is still rough and some of the elemets that are a problem include (but not limited to) Flash, top.location and window.location changes, script in the page tampering with the injected script, etc. A container like Caja (or Cajita) could come in handy to tinker with elements that have to be changed at the server side.
The idea is crude, but as I refine it, I would be posting updates.

At CloudCamp Bangalore

2009-03-29T01:00:00.000-07:00

Quick Analytics

2009-03-25T11:37:00.000-07:00

As mentioned in an earlier post, sneak-o-scope is dead due to opensocial templates. However, the work done with sneak-o-scope could be used to build a simple analytics system. The system could be used for

Know how many of your twitter followers actually click a link you post
Track down that stalker who sends me disgusting scraps on Orkut
Know how many times my thread has been viewed in a forum
Tracking if a friend really clicked on a page send over the IM to him
Track how far an email travels, who view it, etc.

Hence, the requirements for the system should be

Require no registration, should be as simple as TinyUrl
Give a url that redirects to the original page, to an image or open a 1x1 transparent png.
Show easy to understand analytics
Send emails when someone is tracked
Allow to have the analytics private

I am still working on the UI to keep it as simple as possible, so if you have suggestions, please do write in. I would also appretiate a name for the project.

How Tynt works - Technical details

2009-03-19T01:20:00.000-07:00

The idea of Tynt is simple and effective - whenever stuff is copied from your site, track it and insert a small link-back to your website. It may now be a 100% effective, but the idea would work for people who don't play around with the content that is copied. This post describes how they track stuff that is copied and some enhancements that I think would be useful.
Preventing text to be copied from a website has been around for ages. The onCopy method gives us a handler just before content is copied allowing the actual copied text to be manipulated. The tynt site requires us to insert a script that registers handlers. Here is the step by step explanation, once their script loads on our website.

Register handlers for onCopy, onDrag, etc on the window Object
Get a unique URL that will be used as a tracker
When any of the registered event occurs

Send an event to the server
On firefox, create a new node with the data that has to be displayed with the content that is copied. Set selection to existing node and this new node.
On IE, add extra text to the current Selection
Cancel the propagation of the current event.

This works fine for most websites as not many use the on copy event. However, i find the text that is appended to the existing selection a little too obtrusively. Instead of adding such huge content, it would be easy if a simple image is included, with all the links on the image. The image still can be removed, but in my opinion, the chances that a simple small image would be ignored instead of such a huge block of text is high. The image can also serve as a pointer to the places where the copied content travels. There should also be some attribution text added when the client to which content is copied does not support rich text. Something simple in braces should do the job.
As for how the analysis was done, all I had to do was use Fiddler to load a formatted version of Tracer.js?user= to understand the code. Then I had to check out the eventHandlers that led me to handleTracing(). The function has a could of inline functions and one of them, called H() is responsible for replacing the text.
To summarize, the idea is nice but it is the javascript implementaion that stole my attention. :)

How Opensocial templates on Orkut killed Sneak-O-Scope

2009-03-17T23:26:00.000-07:00

Hi,

A few months ago, I had posted a hack on Orkut opensocial that allows directed phishing attacks on Orkut accounts. The orkut team has acted upon it now and has disabled profile views on orkut. The current specification mandates the use of templates for the profile view. Templates with data pipelining would be fine for displaying information but would completly diable all forms of interaction.
This is a problem for the sneak-o-scope application as it relies on the fact that it can make a couple of javascript calls to record visit time, ip address, etc. With templates this is no longer possible. Without javascript, there would be no way to record the time when the user leaves a page. We can record enter time using requests [os:HTTPRequest] , but that would still not give us browser details like IP Address, user agent, etc. These requests are proxied through the Google URL Fetch bot. Adding images to the page also are replaced by the proxied version of the images.
The problem was with cross site script attacks on the applications. The template approach seems to be too limiting. A better stategy would be to use Caja to sanitize the applications better. Since the application runs in its own global object, the "top" javascript can be cajoled to disallow open frames. This would prevent the attack I published, but we will have to take a look at the other possible attacks.
So, as of now, Sneak-O-Scope is suspended. It can start working only when javascript is allowed on the profile page.

YAHOO Open Mail Application : Email Header

2009-03-10T06:51:00.000-07:00

Hi,

A few days ago, I had written an article about the Yahoo Open Mail application that performed redaction of emails. This is a post about another such application that may prove useful.
There are a lot of websites like this, this and this that require us to paste the email header in the text box and they display the information in a much more readable format. Having a tool like this inside the YAHOO Open mail would be a lot more simpler.
Technically, the way to create it is simple. We have to attach an drag-drop listener handler that activates when an email is dropped onto the application. The function would require "full" details and hence, we would also get the header in the "part" property of the passed JSON object. Once that is done, its a matter of parsing the information and displaying the information, either in a new tab or in a pop up dialog box. An addition would be to use free ip to geolocation tools to determine the location of the hop servers and display them as a map. A furthur visualization could be actually animating the mail to give the user, an idea of the delay, etc.
I would love to get this out as quickly as possible, unfortunately, I seem to have lost my bouncer ID for the mail applications. If you know of any, please do let me know.

Barcamp Bangalore

2009-03-06T08:01:00.000-08:00