Thursday, March 17, 2011

Facebook style hyperlinking - with/without javascript

Hi,

If you have seen facebooks hyperlinks, you will notice that most of the hyperlinks work using ajax calls. But what hackers love to do is to switch of javascript from the browser and try things. In case of facebook if javascript is enabled in the browser the page is called via ajax, but if javascript is disabled then also the hyperlinks do not stop working. What they do is instead of the ajax call, the page loads the conventional way i.e. simple href.

I have made a sample code for that, this is how it works. Its independent whether javascript is enabled or not. It works accordingly. Assuming javascript is enabled. The hyperlinks are as follows:


<a href="index.php?p=home.php">Home</a><br/>
<a href="index.php?p=page1.php">Page 1</a><br/>
<a href="index.php?p=page2.php">Page 2</a><br/>
<a href="index.php?p=page3.php">Page 3</a><br/>

Now I am loading a javascript which extracts the "href" parameter of all hyperlinks and stop the anchor tab to refresh the page by adding "return false" in the "onclick" event of the hyperlink as follows:


jQuery('a').click(function(){
link=jQuery(this).attr('href'); // extracts the value of the href attribute
.......
        .......
   return false;   // stops the page from refreshing on clicking the hyperlink
});



Now we parse the format of the 'link' variable and make a ajax call to load the destination page as:


jQuery('a').click(function(){
link=jQuery(this).attr('href');
jQuery('#container').html("loading...");
link2=link.substr(12); // so that it just returns the page name with out the path(i.e. "index.php?p=")
$.ajax({
 type: "POST",
 url: link2,
 success: function(result_content){
jQuery('#container').html(result_content);
}
});
return false;
});

The above idea is simple. Just get the href value of hyperlinks and make ajax calls with that and finally stop the page from refreshing. The trick here is, if javascript is disabled, then the above javascript will not work and the hyperlinks will work the conventional way by refreshing the page.

So if javascript is disabled the destination page will load without ajax by refreshing the page and if javascript is enabled the page will load with ajax.


Click here to download the source code.

Cheers!!!

No comments:

Post a Comment