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
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:
When I investigated the HTML source of the Tweet and looked at the generated <a> tag, I saw something similar to this:
And because you’re still had to make it all fit in the 140 character limit, some variations of the hack used jQuery
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;
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:
As you can see, he made the <a> tag use Twitter’s modal-overlay CSS Class which had the following definition:
z-index: 9999 !important;
filter: alpha(opacity = 30);
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
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