6 ms·

CSS-Only Clickjacking

104 points by flexterra 14y ago

TazeTSchnitzel 14y ago
There isn't a way of protecting against this attack, unless these buttons can't be embedded in web pages. Well, that, or use Flash.
- rabidsnail 14y ago
  Using flash will only work if you can control what window mode the embed is set to. If wmode is set to opaque or transparent compositing will be up to the browser.
- pacmon 14y ago
  @taze There is a way. It's called noscript. Does a terrific job of staying on top of issues like this. Also because of this example I went one step further and used AdBlock to block any iframe with a facebook url. @general The facebook button (at least in firefox) doesn't change to the hand icon when hovering over the link. So, fail. I wouldn't click a link where the cursor didn't change. Mostly, because when it doesn't change I immediately become suspicious.
  - darklajid 14y ago
    As someone who's lazy with AdBlock (subscribe, forget): Can you share that rule?
    - pacmon 14y ago
      Hey. Sorry for a majorly delayed response. Looks like I have two rules for this. They might be able to be optimized into one, but - I'm lazy too. com##IFRAME[src^="http://www.facebook.com/] ##IFRAME[src*="facebook.com"] edit: Note - you need the 'Element Hiding Helper' that goes with Adblock Plus to do this. Then you can just use that to select the iframe on a site and add the rule through a nicer interface.
  - TazeTSchnitzel 14y ago
    I meant what Facebook could do, not you personally.
kposehn 14y ago
Wow.
rabidsnail 14y ago
"pointer-events: none;" WTF? When did that get implemented?
- cleverjake 14y ago
  years ago, in SVG. As far as support in HTML elements...Since early 2009 in webkit, mid 2010 in firefox, still not in IE. Edit : Yep - https://bugzilla.mozilla.org/show_bug.cgi?id=380573 https://bugzilla.mozilla.org/show_bug.cgi?id=380573 https://bugs.webkit.org/show_bug.cgi?id=11395 https://bugs.webkit.org/show_bug.cgi?id=11395
- chime 14y ago
  The click-jacking ability has been known for over a year now: http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/ http://robertnyman.com/2010/03/22/css-pointer-events-to-allo...
turshija 14y ago
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?"
encoderer 14y ago
It sorta feels like we broke the web when it became the norm to stay logged-in everywhere all the time. Oops!
darkstalker 14y ago
i see a small portion of the button not hidden by the div (firefox 12)
PStamatiou 14y ago
Time to make a chrome extension that injects code to override this..
franciscoapinto 14y ago
This again? Ah. Good old noscript. http://i.imgur.com/Cb17T.png http://i.imgur.com/Cb17T.png
- Zarel 14y ago
  Hmm. I don't know why `pointer-events:none` is being made a big deal of. In the past, it was easy enough just to put the Like button on top, and set its opacity to 0; all `pointer-events:none` does is make that easier. More relevantly, we used clickjacking back in the day to do things like have custom Upload buttons (since it wasn't possible to finely style an `<input type="file">`). Does NoScript warn against that? (and should it?)
beggi 14y ago
This is possible in IE as well with this code: .clickjack_overlay { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='white.png', sizingMethod='scale'); background:none !important; }
Johnyma22 14y ago
Could be only me but twitter tries to redirect for me despite me being logged in.
- Johnyma22 14y ago
  oh I'm running disconnect.me -- might be relevant..
bgarbiak 14y ago
So, the news here is that's "CSS only". Well, I hope no one will ask for pointer-events 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.
juddlyon 14y ago
Weird, had to look it up. Mozilla Developer Network entry on pointer-events: https://developer.mozilla.org/en/CSS/pointer-events https://developer.mozilla.org/en/CSS/pointer-events
Imagenuity 14y ago
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".
- themonk 14y ago
  Command+Shift+N
  - Imagenuity 14y ago
    --incognito (add this to the command line after Chrome)
simonw 14y ago
"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).
- padolsey 14y ago
  > 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...
  - darklajid 14y ago
    I'm not following. 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.
- 14y ago
gcb 14y ago
i can totally see one side of the button under the link on opera :D
tomdtpink 14y ago
Trolls kill HN. They are fooling every one. Bring out the sockpuppets. Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.
drewmclellan 14y ago
Theoretically, adding the following to your browser's user stylesheet should defeat this: a { pointer-events: auto !important; } The !important keyword adds weight to the rule, which trumps origin, specificity and sort-order in the CSS cascade. A quick test in Safari/Mac confirms that works for this particular case.
Zirro 14y ago
NoScript catches them both. It needs to be recognized as much more than just a JavaScript-blocker.
- Steuard 14y ago
  And just to be clear, NoScript catches these even when it is set to allow JavaScript by default! Running NoScript in "Allow Scripts Globally" mode breaks almost no sites and still protects you against lots of nasty attacks.
pioul 14y ago
How is that different from putting an "opacity: 0" like button above a link (in that case)?
uptown 14y ago
So potential solutions: 1. Use NoScript 2. Logout of social sites when you leave them 3. Use separate browsers for social sites None of those is a particularly convenient solution.
- Zirro 14y ago
  If Firefox is your main browser, and you put NoScript in the "Allow Scripts Globally"-mode, it's not much of a hassle.

104 points by flexterra 14y ago

There isn't a way of protecting against this attack, unless these buttons can't be embedded in web pages. Well, that, or use Flash.

rabidsnail 14y ago
Using flash will only work if you can control what window mode the embed is set to. If wmode is set to opaque or transparent compositing will be up to the browser.
pacmon 14y ago
@taze There is a way. It's called noscript. Does a terrific job of staying on top of issues like this. Also because of this example I went one step further and used AdBlock to block any iframe with a facebook url. @general The facebook button (at least in firefox) doesn't change to the hand icon when hovering over the link. So, fail. I wouldn't click a link where the cursor didn't change. Mostly, because when it doesn't change I immediately become suspicious.
- darklajid 14y ago
  As someone who's lazy with AdBlock (subscribe, forget): Can you share that rule?
  - pacmon 14y ago
    Hey. Sorry for a majorly delayed response. Looks like I have two rules for this. They might be able to be optimized into one, but - I'm lazy too. com##IFRAME[src^="http://www.facebook.com/] ##IFRAME[src*="facebook.com"] edit: Note - you need the 'Element Hiding Helper' that goes with Adblock Plus to do this. Then you can just use that to select the iframe on a site and add the rule through a nicer interface.
- TazeTSchnitzel 14y ago
  I meant what Facebook could do, not you personally.

kposehn 14y ago

Wow.

rabidsnail 14y ago

"pointer-events: none;" WTF? When did that get implemented?

cleverjake 14y ago
years ago, in SVG. As far as support in HTML elements...Since early 2009 in webkit, mid 2010 in firefox, still not in IE. Edit : Yep - https://bugzilla.mozilla.org/show_bug.cgi?id=380573 https://bugzilla.mozilla.org/show_bug.cgi?id=380573 https://bugs.webkit.org/show_bug.cgi?id=11395 https://bugs.webkit.org/show_bug.cgi?id=11395
chime 14y ago
The click-jacking ability has been known for over a year now: http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/ http://robertnyman.com/2010/03/22/css-pointer-events-to-allo...

turshija 14y ago

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?"

encoderer 14y ago

It sorta feels like we broke the web when it became the norm to stay logged-in everywhere all the time. Oops!

darkstalker 14y ago

i see a small portion of the button not hidden by the div (firefox 12)

PStamatiou 14y ago

Time to make a chrome extension that injects code to override this..

franciscoapinto 14y ago

This again? Ah. Good old noscript. http://i.imgur.com/Cb17T.png http://i.imgur.com/Cb17T.png

Zarel 14y ago
Hmm. I don't know why `pointer-events:none` is being made a big deal of. In the past, it was easy enough just to put the Like button on top, and set its opacity to 0; all `pointer-events:none` does is make that easier. More relevantly, we used clickjacking back in the day to do things like have custom Upload buttons (since it wasn't possible to finely style an `<input type="file">`). Does NoScript warn against that? (and should it?)

beggi 14y ago

This is possible in IE as well with this code: .clickjack_overlay { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='white.png', sizingMethod='scale'); background:none !important; }

Johnyma22 14y ago

Could be only me but twitter tries to redirect for me despite me being logged in.

Johnyma22 14y ago
oh I'm running disconnect.me -- might be relevant..

bgarbiak 14y ago

So, the news here is that's "CSS only". Well, I hope no one will ask for pointer-events 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.

juddlyon 14y ago

Weird, had to look it up. Mozilla Developer Network entry on pointer-events: https://developer.mozilla.org/en/CSS/pointer-events https://developer.mozilla.org/en/CSS/pointer-events

Imagenuity 14y ago

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".

themonk 14y ago
Command+Shift+N
- Imagenuity 14y ago
  --incognito (add this to the command line after Chrome)

simonw 14y ago

"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).

padolsey 14y ago
> 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...
- darklajid 14y ago
  I'm not following. 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.
14y ago

gcb 14y ago

i can totally see one side of the button under the link on opera :D

tomdtpink 14y ago

Trolls kill HN. They are fooling every one. Bring out the sockpuppets. Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.Trolls kill HN. They are fooling every one. Bring out the sockpuppets.

drewmclellan 14y ago

Theoretically, adding the following to your browser's user stylesheet should defeat this: a { pointer-events: auto !important; } The !important keyword adds weight to the rule, which trumps origin, specificity and sort-order in the CSS cascade. A quick test in Safari/Mac confirms that works for this particular case.

Zirro 14y ago

NoScript catches them both. It needs to be recognized as much more than just a JavaScript-blocker.

Steuard 14y ago
And just to be clear, NoScript catches these even when it is set to allow JavaScript by default! Running NoScript in "Allow Scripts Globally" mode breaks almost no sites and still protects you against lots of nasty attacks.

pioul 14y ago

How is that different from putting an "opacity: 0" like button above a link (in that case)?

uptown 14y ago

So potential solutions: 1. Use NoScript 2. Logout of social sites when you leave them 3. Use separate browsers for social sites None of those is a particularly convenient solution.

Zirro 14y ago
If Firefox is your main browser, and you put NoScript in the "Allow Scripts Globally"-mode, it's not much of a hassle.