|
Picture Links, one of typical RemoteScript hacks:
Hijacking web sites with bookmarking
(by Mark Qian, 9/1/2009)
A. Introduction
"Hijacking" is a negative word but in some application, you do need to have your codes "work on and even take over any web site".
You may ask: Why do I need to have my codes "work on any web site"? Well, in some case, you do need to
apply your own task on pages from other's servers.
One typeical application is IMShopping.com
where they need to allow their users to snapshot some listed items from any web site and then they can process the information obtain from those
web sites. So they do need to have any page on other's site to load their own script to do that.
In order have your own codes (from your site) "invade" others' page (from other's sites), you need to face two blockers:
-
How to switch the browser to load codes from your web site instead of the original site?
It seems no way: a page loaded from others' sites won't contain your codes or any links
to your site and how can your end users access your codes? The solution is using some "special" bookmarks.
You can inject some javascript as a "hook" to your codes. Normally, bookmarks are used to mark urls but the "special"
bookmarks contain javascript instead of url so that the javascript is executed when your end users click at the bookmark.
Most popular browsers also allow bookmarks appear as items in the toolbar. By installing the "hook" to your codes as items
in the browser toolbar, you can easily provide a way to switch the loading flow from the original web site to yours.
-
How to communicate back to your site?
So far you may feel that is: what else? Do you know "the same origin" security policy of browsers?
Under the policy, objects and pages can not access data from different servers. Since the original page is loaded from
other's sites so that you can not make calls back to your server if you still want to access any element (loaded from
other's sites) on the page using means like AJAX. In this case, you need to use "Dynamic scripting" to break the
"the same origin" security policy. (see details about "Dynamic scripting" in my article Building an AJAX Application (1): It isn't called AJAX but Remote Scripting
B. Picture Links: "A picture is worth a thousand words" in craigslist.com
(An application of the hacking approach above)
I am a craigslister but really hate the text base listing. So I built this "Picture Links" button on the toolbar so that
you can find your items visually. In my approach, I first inject my codes to rescan currently loaded page and take over
from then on...
To try it out, please do following:
To add Picture Links bookmarks to your IE toolbar, please do the following
-
Right mouse click at this link: Picture Links.
-
Select "Add to Favorites".
-
Select "Links" from the Favorites list.
-
Make sure that your "Links" is enabled in your IE's command bar. You can right mouse click at the command bar at the top of IE and select "Customize Command Bar" and enable it if it is not.
To add Picture Links bookmarks to your Firefox toolbar, please do the following
-
Right mouse click at this link: Picture Links.
-
Select "Bookmark This Link".
-
Select "Bookmarks Toolbar" Folder and click at "Done" button.
To turn a list page without picture into a pictured list page , please do the following
-
To use it, navigate to your favorite claigslist page , like http://sfbay.craigslist.org/sby/fuo/
Note: this button is designed to work with Craigslist.com only. It won't work well with other sites.
-
Click at the bookmark "Picture Links" on the browser toolbar.
-
Wait until the progress reach 100% and the panel will disappear.
-
Click at each picture to see it and click at "Next" at the left to go next page
|
|
|