NovoGeek.com - Krishna's weblog

Web users don’t need an introduction to Facebook’s “Like” button or Twitter’s “Tweet” button. Along with several such buttons, they help in making online presence more social and hence are called “Social Plugins”. Inserting them into a website is as easy as inserting small chunk of HTML and JavaScript. e.g., The “Like” button can be inserted by following these simple steps in Facebook Developers site. For sure, these buttons changed the way people interact on the web by building rich social graphs based on user’s tastes/interests and made the web more engaging. However, they come with certain problems in which web attackers are interested.

In a way, a social plugin converts a normal web page into a mashup, exporting a site’s data to different domains. As Douglas Crockford says, “A mashup is a self-inflicted XSS attack”. It is more of a work around than a standard and hence have few problems.

(1) Social plugins must be wrapped in iframes:

If the source of these social plugins is inspected using browser’s developer tools, one can find that these buttons are actually wrapped in iframes, for obvious reasons. A script injection attack could otherwise modify the course of action of the like button and do malicious activity. Since an iframe provides a sandboxed environment, external scripts cannot access the DOM within the iframe and hence script injection attacks fail. So if you are a web developer and want to create the next widget/social plugin for your site, iframe should be the "must have” tag.

(2) Framing a site could be dangerous – Clickjacking FTW:

In one of my previous demos, we have seen how Facebook’s “Like” button can be clickjacked (typically called LikeJacking). Iframes, which contain the code for social plugins, themselves are nodes in the parent page’s DOM and scripts can act on them, if not inside them. So in the demo, I have grabbed the x,y coordinates of the iframe containing the “Like” button and changed them dynamically as the mouse moves. Thus one can place any social plugin beneath the user’s mouse cursor and reduce its opacity to zero. The implication is, clicking anywhere on the page means clicking on the social plugin!

Clickjacking can be countered by using JavaScript based “Frame busting” techniques or configuring X-Frame-Options response header. Using these techniques, a web page which is framed will be forced to come out of the iframe, thereby preventing clickjacking.

The problem: Now, have you sensed the problem? If not, pause and analyze the ideas in (1) and (2). In any case, proceed :)

Here is the problem - As per (1), a social plugin has to be in an iframe to prevent script injections. As per (2), content (typically from an external website) has to be pulled out of iframe to prevent clickjacking. Now both are contradictory ideas.

Inference:- “A social plugin cannot exist securely without being wrapped inside an iframe and hence it is always vulnerable to clickjacking!” Alarming!! Isn't it?

(Q) So what if social plugins are vulnerable to clickjacking?

(A) You will continue to see different types of spams on social networking sites due to ignorant clicks of users on hidden social plugins. Social networking sites have to depend on algorithms to detect anomalous behaviors, since there is no solution available right now to stop this.

Further, this can lead to new types of web based attacks. One such possibility is explored by researchers at Carnegie Melon University. They demonstrated how social network users can be de-anonymized using clickjacking, which is an interesting case study.  

Hope the article helped in understanding the technical flaw with which most websites are living. I have been experimenting on these lines and came up with yet another interesting case study. More about it in my subsequent blog posts. Happy learning!

Tags:

A couple of weeks back I have presented on Facebook Apps Development at DevCon 2010 and it was nice to see overwhelming response. In this article, I shall throw light on FaceBook's new social features, to help developers getting started with Facebook apps development.

The Facebook F8 conference is an yearly event hosted by Facebook, to bring developers & entreprenuers together to build the social web. With the previous events announcing the Social graph & Facebook Connect, the 2010 F8 (21st April, 2010) had big news for the evolution of social web, briefly:

• The Graph API
• oAuth 2.0 based authorization
• Social plugins
• The Open Graph protocol.

The Graph API, which is the core of Facebook Platform, gives developers the power to share and make the web more open & connected. Mark Zuckerberg, founder of Facebook, coined the term "Social Graph" which means "the global mapping of everybody and how they're related". By definition, the social graph is composed of objects(people, pages, events, communities, photos etc) and the connections(relationship, tagging, grouping etc) between them. Every object in the graph has a unique ID by which it can be referenced.

Technically speaking, Facebook offers REST based service which can be used to query about any object in the graph.

e.g., To get public info about Bill Gates on Facebook, click the following link: https://graph.facebook.com/billgates.

[Note: When you click the above link, the query gives JSON output, which contains data about the requested object. IE will ask to download the output which can be opened in notepad, where as Firefox/Chrome/Safari will open in new tab directly.]

Similarly, you can get info about the recent Microsoft PDC as: http://graph.facebook.com/MicrosoftPDC. You can even introspect a bit deep and get additional info as: http://graph.facebook.com/MicrosoftPDC?metadata=1

Notice that in the above cases, we are retrieving only public info. To get private info, you need to get authenticated by Facebook and append an "access_token" parameter in query string like: https://graph.facebook.com/microsoftpdc/feed?access_token=xxxxxxxxxxxxxxx.

To see how it works, login to facebook.com and then open http://developers.facebook.com/docs/api in new tab. Scroll down to connections section and click on any connection like "Friends", "News Feed", "Profile feed" etc. The url looks like this: https://graph.facebook.com/me/friends?access_token='A set of random characters which FB gives you after authentication'.You will be able to see complete private information, which is not available without authentication.

oAuth 2.0 is new authorization mechanism which is used by Facebook. It is an open protocol which allows secure API authorization without the need for entering credentials(passwords).It relies on the exchange of tokens instead of credentials and is more secure.

In layman's terms, when you add applications like FarmVille, you will get a confirmation box with "Allow/Deny" buttons. When you click the "Allow" button, the application will be added to your graph. Behind the screens, the app uses oAuth to authorize you via exchange of tokens. More about it in my upcoming article.

Social Plugins are extensions of Facebook which can be embeded in your websites, creating social experiences. The famous "Like" button, login button, recommendations etc are some of the social plugins. They can be embeded into any existing site using FBML and Facebook JavaScript API. The official reference is clearly the best guide for learning about the social plugins.

The Open Graph Protocol helps in turning out your web pages into more meaningful objects in social graph (Did i say something similar for social plugins too? Wait., there is more to say).

By adding a like button, you only add a link to your page in facebook's social graph, which does not have any other information. But by adding <meta> tags of Open Graph protocol on your web page's header, you are sharing more semantic data about your webpage, such as, title of the content, type of content, description, image etc. Since the protocol is open, these tags can be read by facebook (or any other network in future) to provide more meaningful information to users.

So, by using the Graph API, oAuth, social plugins and the Open Graph Protocol, you can fetch data about any object in the social graph, present it in a semantic way and provide social experiences to the 500 million(& growing) Facebook users on your site!

In my upcoming articles, I shall write in depth about each of these, explaining with code how they work.

Happy Coding

Tags: facebook

Happy to say that I have presented at DevCon 2010 on "Facebook Apps Development for web devs" at Microsoft Hyderabad. The event, organized by Microsoft User Group Hyderabad (MUGH), had 250+ audience in Developer and IT Pro track! The highlight of the event is the session given by the talented Aaron Skonnard, CEO of PluralSight!

 

Presentation: Click here

Demo Facebook App: Click here

Met several geeks & hackers in the event and made good techie friends. Having a chat with Aaron, attending his live session and having him in my session was really awesome! It was difficult trying to explain about Facebook oAuth in the stipulated time, but I'l surely blog about it with good demos very soon. Hope the audience had a great time!

Tags: facebook, c#, tech events