"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?"<p>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.<p>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.<p>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).
This is possible in IE as well with this code:<p><pre><code> .clickjack_overlay {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='white.png', sizingMethod='scale');
background:none !important;
}</code></pre>
Well, for that (and similar facebook-like clickjacking) Facebook implemented some kind of "protection".
If there are too many unlikes shortly after Like button is pressed, new users that click on Like button will be presented with confirmation, something like "Are you sure you want to like this page?"
So, the news here is that's "CSS only". Well, I hope no one will ask for <i>pointer-events</i> removal because of this. The feature is very useful exactly because it doesn't require JS (example: transparent tooltips). And for hijackers it makes almost no difference - to include "Like" kind of button they need a script anyway.
Weird, had to look it up. Mozilla Developer Network entry on pointer-events: <a href="https://developer.mozilla.org/en/CSS/pointer-events" rel="nofollow">https://developer.mozilla.org/en/CSS/pointer-events</a>
This is why I always use a Chrome incognito window for everything I don't completely trust. No big deal in this case because I'm not logged in to anything when browsing. If a site prompts me to log in to Facebook or twitter (as in this case), I know something is fishy. Is it a bit more of a hassle? Yes, but not as bad by an order of magnitude of getting an account hijacked. My biggest friend is right-click and "Open link in incognito window".
Theoretically, adding the following to your browser's user stylesheet should defeat this:<p><pre><code> a { pointer-events: auto !important; }
</code></pre>
The !important keyword adds weight to the rule, which trumps origin, specificity and sort-order in the CSS cascade.<p>A quick test in Safari/Mac confirms that works for this particular case.
So potential solutions:<p>1. Use NoScript<p>2. Logout of social sites when you leave them<p>3. Use separate browsers for social sites<p>None of those is a particularly convenient solution.