Facebook’s “Like!” button, the Flattr button and plenty of other widgets work pretty much the same. You either create some IFRAME directly (Facebook non-XFBML method) or include some JavaScript which then injects the IFRAME into your DOM once it’s ready (Facebook XFBML, Flattr). The widgets provide you with some cool social one-click-functionality. That’s nice and easy… unless someone’s planning to mess around with it.

Clickjacking means leading the user to do a simple mouseclick on your page, e.g. to proceed from one page to another, but to redirect his mouse action to the widget instead. (Click here for a more detailed explanation on Wikipedia.)
For Facebook’s “Like!” button, this didn’t do much harm besides the fact that something like “Your Name likes The Hijacker’s Page” appeared on your wall and was visible to your friends. The occurrences I’ve seen so far were embarassing at most (e.g. liking the “101 hottest women in the world”) and could be removed easily by the account owner.
For Flattr, things are slightly more serious since money is involved. Of course, the money is gone whether you “flattr” one more user or not – that’s the concept behind flattr -, but there’s no way to revert a flattr click.

How does it work?

Even though you don’t have control over the code inside of the IFRAME, which is loaded from the companies respective domain in order to make advantage of the cookies set for them, you still have control over the IFRAME declaration in your page and consequentially over its DOM and CSS attributes.
One of many possible ways for clickjacking is to make advantage of a W3C recommendation for CSS 3 which is already supported by most modern browsers: the opacity attribute (or filter: alpha(opacity=xx) for crappy IE). The clickjacker’s page starts with a teaser link/image which the visitor has to pass in order to get to the main content. (For the “101 hottest women” example above it’s an image of an attractive woman, of course, and from the number of “likes” in my own Facebook friends list I can tell that it worked.) Styling a DIV with opacity: 0 will hide the content but keeps it sinking DOM events, contrary to the display: none or visibility: hidden attributes. That way, the Like!/flattr widget can secretly and invisibly be placed over the link and the user’s mouse action will end up there instead of the anchor he intended to click; see sample below.

Now there’s one last problem to be solved. The widgets have a certain size and only a very small clickable area. But since the clickjacker can control all attributes for the IFRAME and listen to mouse move events on his page, he can keep the widget right under the user’s mouse cursor at all times.

Demonstration

The following two sample pages show very basic attempts for clickjacking as described above.

• Clickjacking example for Flattr
• Clickjacking example for Facebook

How to avoid clickjacking?

From user side, there’s only one way to avoid clickjacking. Log out! You can still “like” things and “flattr” interesting articles since you’ll be asked to login, but you should keep in mind to log out from Facebook, flattr, Twitter,… before you continue browsing the web. Also, Facebook users should consider the links they are about to visit very carefully, even if posted by friends.
Platforms could ask for a password every now and then even for logged in users. This, however, increases the risk of phishing attacks. (Do you really check the identity of every page which opens a login popup? Do you really wonder when there’s no address bar at all?) To decrease the chances for the method explained in this article, platforms could also introduce some randomness in the display of their button. This would work well particularly on the flattr button since it could display the “Flattr” link alternating on the top or bottom side.