"This seems like a real security threat and I haven't found a foolproof way of detecting it. Is there a way of protecting against this kind of attack?"
No. If you're going to provide clickable widgets that can be embedded in other people's sites, there is no technical method for preventing clickjacking.
Even if it was impossible to hide the element (pointer-events: none is one method, another is to place the Like button itself on a div with an opacity of 0.001) it could still be attacked by tricking people to click repeatedly in a certain area and then displaying the button. "Click here five times as fast as you can to win a prize" kind of thing.
The developers of the Facebook Like / Twitter Follow buttons know this, but they decided that the trade-off was worth the risk. There are also statistical counter-measures they can take behind the scenes (machine learning algorithms for identifying large numbers of potentially fraudulent Likes for example).
+1 simonw, for reference, I helped build the "twitter buttons". As simonw mentioned, any amount control/access a widget may have to a hosted page can be immediately blocked by just wrapping the entire thing in another iframe.
this post is a bit misleading in that it might suggest that the attack occurs "sans click". this particular attack minimizes the ability for the victim to notice the attack, but it is still using the same 'hide the button, make it follow your mouse, wait for a click' strategy.
As darklajid pointed out, we try to occupy as little space, and cause as little annoyance as we quietly sit in client pages.
> there is no technical method for preventing clickjacking
I think there is. Most of these widgets are embedded using SCRIPTs which have access to the parent page's DOM structure. For Twitter/Facebook they can basically access anything on your page. This means, they can do a check for `pointer-event:none` (computed CSS value) on the element above the widget (get that using `document.elementFromPoint`).
EDIT: After some investigation: elementFromPoint doesn't work on elements with pointer-events:none, it seems. That sucks. It may still be possible to circumvent these attacks. For example, when the widget receives a mouseenter event, it could place itself at the end of the document tree in the parent page and ensure it has the highest possible z-index. I'm sure there are other viable options too...
You suggest that these obnoxious buttons should start behaving even more annoying by peeking around the side and potentially rearranging/changing themselves?
First, I don't believe that an arm's race makes sense. There are too many ways to trick someone into clicking a thing. Second: Please... Like buttons are already as lovely as blink tags on a Geocities page. They don't need to be 'improved' like that.
No. If you're going to provide clickable widgets that can be embedded in other people's sites, there is no technical method for preventing clickjacking.
Even if it was impossible to hide the element (pointer-events: none is one method, another is to place the Like button itself on a div with an opacity of 0.001) it could still be attacked by tricking people to click repeatedly in a certain area and then displaying the button. "Click here five times as fast as you can to win a prize" kind of thing.
The developers of the Facebook Like / Twitter Follow buttons know this, but they decided that the trade-off was worth the risk. There are also statistical counter-measures they can take behind the scenes (machine learning algorithms for identifying large numbers of potentially fraudulent Likes for example).