

It's surprisingly simple to click jack using CSS4 - ansman
http://jsfiddle.net/ewuKu/

======
franciscoapinto
Ah. Good old noscript.

<http://i.imgur.com/Cb17T.png>

------
Keithamus
The trick is to overlay an element over the top of a link, with the CSS of
"pointer-events: none;".

Clicking the div will click the underlying link, which will (if you're logged
into facebook) "like" the Facebook Developer group.

Is this an issue with HTML5, or is it really an issue with how easy sites can
manipulate your Facebook account?

~~~
pestaa
Neither. The problem is that your browser handles click events on an invisible
layer.

~~~
drostie
Well, no; there's two problems now. The first one is that your browser will
handle click events on invisible and near-invisible layers. The second one is
that your browser will allow click events to flow through opaque and near-
opaque layers.

~~~
tomg
Those are not bugs, IMO.

A lot of web Javascript would be useless if events didn't bubble, and being
able to define invisible click areas is useful in a variety of contexts.

Sucks that a few people are going to be malicious about it but I think the
benefits outweigh the drawbacks.

~~~
pestaa
The problem is not that events bubble, but that clicks fall through visible
layers to lower ones and get caught invisible ones on top of what you intended
to click on.

Invisible click areas as you called it are not the same as multi-layered click
targets imho.

------
simonw
Even without this trick it's trivial to clickjack a like button - just place
the button on a div with an alpha transparency of 0.01 and trick the user in
to clicking it.

Unfortunately it simply isn't possible to provide something like the Like
button without being vulnerable to click jacking. I assume Facebook decided
that the benefits outweighed the drawbacks. There's probably something clever
they can do on the server side to statistically detect and penalize likely
clickjacking attempts.

~~~
citricsquid
They do, eventually (unsure of the criteria) it will start showing a second
confirmation dialog if they detect something untoward which you have to
confirm your like with, although click jacking that too might also be
possible.

------
duopixel
You don't need CSS4 to clickjack, just put the Facebook Like button on top of
the link and apply opacity: 0.

<http://jsfiddle.net/txbYs/>

~~~
pestaa
The problem is that this new directive makes this exploit first-class citizen.

~~~
batista
That's not a problem at all. If it's worth it to do it, people will do it even
if it takes 200 lines. If it's not, they won't bother. So, even with it being
achievable as a "first-class" option in CSS4, I don't see any particular rise
of this exploit happening.

It's like arguing that something is safer because it requires 10 lines of code
instead of one to do the exploit. That's security by obscurity.

~~~
pestaa
I guess you're right. Maybe the effect is reverse even - by raising attention
to potentional pitfalls.

Still, I can not think of a possible use case this can be useful. Maybe other
options will make it worth knowing about.

------
acomjean
Looks like the same game as the "don't click" twitter button (that everyone
clicked anyway) from 2009. That was iframes/css.

<http://shiflett.org/blog/2009/feb/twitter-dont-click-exploit>

------
enr
It prompted me to log in even though I have FB open and am logged in in a
separate tab.

~~~
Khao
I tried it and I did not have any prompt. I liked the Facebook Developers page
without seeing any prompt or confirmation so it was completely transparent.

Maybe our privacy settings are different and that's why you saw a prompt even
though you were logged in.

------
richbradshaw
I've used pointer events ages ago - surprised it's part of CSS4… (the nav bar
on <http://www.splashdisplay.co.uk/> uses it so the nav can be behind the
curve)

------
Loque_k
I don't see how this is any different XHTML or HTML 4... what am I missing?

~~~
ansman
I updated the title, it should have been CSS4 since that's where it's being
defined.

------
matznerd
I know people who used tricks like this and some clickjacking on the share
button to get 1 million+ person fan pages. Many of them were seized, but for a
while it was easy.

------
jonknee
I run Facebook Disconnect and it makes the web much nicer, this demo is non-
functional with it.

~~~
eli
That's not really the point. I mean, not having a Facebook account stops this
demo too. There are other things you might not want to be tricked into
clicking on.

------
rex_mundi
This has likely been happening quite some time, especially on file locker
sites.

------
StCroix
CSS4? Where was I? and When??

~~~
TazeTSchnitzel
They make a new version every time there's been enough changes...

