Twitter have just had a self-retweeting tweet,
which should never have happened. I mean, this is web security 101.
If you don't know this stuff, you shouldn't be designing commercial web pages.
And yet, here we are,
And 10.1 million BBC Breaking News fans have just seen a little, red, love heart.
So how does it work?
Well, the web is built on something called HTML.
HTML is a tag-based language.
So, if I write that, in the source code of a web page,
and then, that, at the end,
everything between those "tags", as they're called, will appear in bold.
"B", for bold.
I mean, I'm over-simplifying massively here, but, that's roughly the basics.
You have an "I" tag for italics,
and you have all sorts of complicated tags for design, and layout, and styling.
And you also have a special tag, called "script".
"Script" is special. "Script" says, what's between here, shouldn't be shown to the user, at all.
It's not text to be seen.
It's not an image. It's programming code.
It's stuff that the web browser - Firefox, Chrome, Internet Explorer - should run.
But there is a rule, a really important rule,
and it's how you avoid an attack called Cross-Site Scripting.
If you have a box, that the user types in,
even if it's something like a search box,
you never, ever, ever,
just echo back what they put in there.
Because I could type in a "b" tag into, say, Google, let's say this is Google's search box.
I type in a "b" tag, and then don't close it,
Google would, in the worse case, echo that back to me,
and suddenly, everything after that, where it says "You searched for 'Hello'."
That "b" tag doesn't appear. That "b" tag just says,
"Make everything bold," and it will.
The rest of the web page appears in bold. Ruins it.
The dangerous thing, the really dangerous thing, is when I can type in that box,
"Script."
Because at that point, if you're not filtering that output,
If you are taking whatever I put in that search box,
in that tweet, for example,
and you're just sending it back, then that tag is going to appear in the web page,
and it is going to get run.
Now...
This is twitter.com.
This is what you saw on the website.
And this is the correct thing to do.
These have been changed, these angle brackets.
There's a little bit of code behind there, saying...
"This is actually an angle bracket, don't try and treat this as code."
And, it's done the correct thing.
This is the code of the exploit.
TweetDeck...
...forgot about that filter.
I mean, that is so basic. That is, like I said, web security 101.
That filter should never, ever, ever, ever, ever be turned off.
And yet, it was.
So this got run as code.
So let's break it down.
We have a "script" tag.
That "script" tag means everything here, including the tag itself,
doesn't get shown to the user, gets executed as code.
It's also got a class of "xss", that'll be important in a moment.
First command.
Dollar sign. That dollar sign is jQuery.
It's a JavaScript plug-in designed to make developing
so much easier, and so much faster, and it works.
And what this command here, just this first bit, means is
"Find me anything on this page with the class of 'xss'."
Well, that's this "script" tag.
That's this bit right here.
It's saying, "Find me. Find myself. Find this little bit of code."
Okay.
Then we move on to the next bit of the command, that says,
"Find the parents. Find everything that this is contained in."
And this command, in jQuery, returns an ordered list
of each level of container.
So it finds, first of all, the text of the script tag.
Then, it finds this box, just here.
That's important. This bit just here.
Then it'll find the whole tweet, then the list of tweets,
then maybe the the big bit of the web page, then the bigger bit, then the whole thing itself. But...
Doesn't matter, it returns the ordered list.
This bit here, "Find the second item in that ordered list."
Computers count from zero, so one, will be the second.
Zero... One.
Okay? Second element in that list, this block just here.
Okay? Next bit.
Find all the "a" tags in that block.
"A" tags are links. They are things you can click on.
Well, we can do that. They're just here.
There's the first, there's a second, third, fourth, there's loads more down here.
Got a list of the "a" tags.
Next up, find the second in that list.
Second in that list, oh look! It's this retweet button.
Hey! Click it.
And that acts as if the user has click retweet. But it's not done yet.
New command.
Because that doesn't immediately retweet. It pops up a dialog box.
Says "Are you sure you want to do this?"
Dollar sign, "Find me."
"data-action"
So find me something, which has a data attribute, which this button does,
equal to "action of retweet".
Well hey! That's that button just there.
Click it.
Boom! Retweet done, out to everyone else.
Again, only if you use TweetDeck. Only if that filter was off,
which it should never, ever, ever, ever, ever have been.
We still got some characters left.
This is the wonderful thing. I mean, well done Andy.
...if that's your real name. I suspect your account won't survive for very long.
But we've got time for a third command.
We've got room.
Alert. And what that says is, pop up a really obnoxious dialog box
And in this case, it just says, "XSS...",
Cross-Site Scripting, the very attack here,
"...in TweetDeck."
Andy is telling you exactly what they've done
just as they've done it.
And finally, just to be nice,
a closing "script" tag, just because we've got room for it,
polite, just embed it in one tweet,
and then, just to be lovely,
a heart.
Because, once it goes out, and they've got one character left,
but anyone who's vulnerable,
won't see all this gubbins, all this code,
they will just see the little, red, heart.
And that's it.
That's how it worked.
140 characters of code, well, less than 140 characters,
and one TweetDeck programmer dropping a ball.
That's all it took for the first self-retweeting tweet we've seen in a very long time.
And some fairly significant disruption to what has
pretty much unbelivably become an important part
of how the world communicates.
Worrying, isn't it?
[Translating these subtitles? Add your name here!]