On the 21st of September 2010 some time in the morning, a Twitter Hack (or Exploit) appeared and started to spread !
People started seeing blacked-out tweets and when they hovered over them they found themselves automatically retweeting them and others got redirected to other pages, however people using 3rd party Twitter client weren’t affected and saw Tweets with weird text instead.
I discovered it some time around 1pm GMT, and started to understand how it worked, and in this post I’m going to explain to you how the Hack worked :)

First of all, this Hack was based on Javascript and the onmouseover event, some of you might think that it is very trivial and maybe wondering why that didn’t happen a long time ago, but actually it’s not that trivial because Twitter, Facebook, Blogs and any website that displays text entered by users usually have a powerful Validation System that blocks Javascript Hacks, so the guy who made this Hack discovered a way to pass this validation.

So how did he pass the validation ?
Well, apparently Twitter had a problem with it’s URL Parsing algorithm that detects URLs and wraps them inside <a> tags so they can be clickable from Twitter’s web interface, I do that with the links in the “Latest Tweets” section in the sidebar, and I my algorithm wasn’t vulnerable to this hack.

The text of the Tweets that caused these weird things look something like this:

http://some.website.com/@"onmouseover="javascript_here"style="some_style"/

When I investigated the HTML source of the Tweet and looked at the generated <a> tag, I saw something similar to this:

<a href="http://some.website.com/@"onmouseover="javascript_here"style="some_style"/" class="tweet-url web" rel="nofollow" target="_blank">

So apparently Twitter’s URL Parsing Algorithm didn’t terminate the URL at the double quotes ( " ) causing them to close the double quotes opened for the href property of the <a> tag, so whatever came next was still inside the <a> tag, so now the hacker can make use of any of the tag’s events to run any piece of Javascript Code !
And because you’re still had to make it all fit in the 140 character limit, some variations of the hack used jQuery :D

This enormous Exploit encouraged a lot of people to make all kinds of Hacks, the most popular were the ones that replicated them selves, they executed some jQuery that looked like this:

$('text-area:first').innerHTML = this.innerHTML;
$('.status-update-form').submit();

Some other variations caused the victim’s browser to redirect to other pages, but they all required the user to point his mouse cursor over the Tweet … … … EXCEPT ONE !

A guy called “Matt Gascoigne” with the Twitter Account @Matsta (now suspended) made a variation of the Hack that was triggered by pointing your mouse cursor ANYWHERE inside the page, the text he wrote was displayed inside a semi-transparent box that was on top of your Twitter Home Page !
How did he do it ? He used one of Twitter’s CSS classes called “modal-overlay”, by tweeting this Text:

http://t.co/@"onmouseover="document.getElementById('status').value='RT Matsta';$('.status-update-form').submit();"class="modal-overlay"/

As you can see, he made the <a> tag use Twitter’s modal-overlay CSS Class which had the following definition:

.modal-overlay
{
z-index: 9999 !important;
position: fixed;
text-align: center;
filter: alpha(opacity = 30);
background-color: #000;
margin: 0px;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
opacity: .3;
}

I think now it’s clear how clear how that Matsta guy achieved that result, I really respect his smartness although I don’t really know him, and I know a friend who even became a Fan of him on Facebook :D

When I discovered the hack, I started experimenting with it and wrote a Tweet (with a yellow background) that displayed a Javascript alert Box with the text “I just hacked you :P” but I didn’t have a lot of time because Twitter fixed their bug at 1:30pm GMT :(

Anyways, I made 2 YouTube videos (screen captures) explaining what I just said here in Arabic, please enable annotations before you watch them:
Twitter's 21 Sept 2010 Hack (arabic) - Part 1
Twitter's 21 Sept 2010 Hack (arabic) - Part 2

But since this website is meant to be only in English, I later made an English version (I had the tabs opened since the time of the Hack) which I embedded below:

If you want to read more about what happened, check these links:
The New York times: Twitter Hacked Tuesday Morning
Mashable: Twitter Mouseover Security Flaw Affecting Thousands of Users
Twitter Blog: All about the "onMouseOver" incident