WEBVTT
Kind: captions
Language: en

1
00:00:00.200 --> 00:00:03.900
Twitter have just had a self-retweeting tweet,

2
00:00:03.900 --> 00:00:08.060
which should never have happened. I mean, this is web security 101.

3
00:00:08.060 --> 00:00:12.400
If you don't know this stuff, you shouldn't be designing commercial web pages.

4
00:00:12.500 --> 00:00:13.760
And yet, here we are,

5
00:00:13.840 --> 00:00:19.540
And 10.1 million BBC Breaking News fans have just seen a little, red, love heart.

6
00:00:20.200 --> 00:00:21.300
So how does it work?

7
00:00:21.300 --> 00:00:23.840
Well, the web is built on something called HTML.

8
00:00:23.840 --> 00:00:25.840
HTML is a tag-based language.

9
00:00:26.020 --> 00:00:29.380
So, if I write that, in the source code of a web page,

10
00:00:29.380 --> 00:00:31.360
and then, that, at the end,

11
00:00:31.360 --> 00:00:34.940
everything between those "tags", as they're called, will appear in bold.

12
00:00:35.080 --> 00:00:36.200
"B", for bold.

13
00:00:36.320 --> 00:00:40.480
I mean, I'm over-simplifying massively here, but, that's roughly the basics.

14
00:00:40.580 --> 00:00:42.060
You have an "I" tag for italics,

15
00:00:42.060 --> 00:00:45.960
and you have all sorts of complicated tags for design, and layout, and styling.

16
00:00:46.360 --> 00:00:49.240
And you also have a special tag, called "script".

17
00:00:49.960 --> 00:00:54.460
"Script" is special. "Script" says, what's between here, shouldn't be shown to the user, at all.

18
00:00:54.580 --> 00:00:56.200
It's not text to be seen.

19
00:00:56.200 --> 00:00:58.620
It's not an image. It's programming code.

20
00:00:58.620 --> 00:01:03.260
It's stuff that the web browser - Firefox, Chrome, Internet Explorer - should run.

21
00:01:03.480 --> 00:01:05.680
But there is a rule, a really important rule,

22
00:01:05.680 --> 00:01:08.380
and it's how you avoid an attack called Cross-Site Scripting.

23
00:01:08.380 --> 00:01:10.260
If you have a box, that the user types in,

24
00:01:10.260 --> 00:01:12.100
even if it's something like a search box,

25
00:01:12.100 --> 00:01:14.300
you never, ever, ever,

26
00:01:14.300 --> 00:01:16.780
just echo back what they put in there.

27
00:01:16.980 --> 00:01:22.100
Because I could type in a "b" tag into, say, Google, let's say this is Google's search box.

28
00:01:22.100 --> 00:01:25.540
I type in a "b" tag, and then don't close it,

29
00:01:26.000 --> 00:01:29.520
Google would, in the worse case, echo that back to me,

30
00:01:29.520 --> 00:01:33.080
and suddenly, everything after that, where it says "You searched for 'Hello'."

31
00:01:33.080 --> 00:01:35.380
That "b" tag doesn't appear. That "b" tag just says,

32
00:01:35.380 --> 00:01:37.220
"Make everything bold," and it will.

33
00:01:37.360 --> 00:01:39.900
The rest of the web page appears in bold. Ruins it.

34
00:01:40.160 --> 00:01:44.240
The dangerous thing, the really dangerous thing, is when I can type in that box,

35
00:01:44.240 --> 00:01:45.600
"Script."

36
00:01:46.060 --> 00:01:49.100
Because at that point, if you're not filtering that output,

37
00:01:49.100 --> 00:01:51.900
If you are taking whatever I put in that search box,

38
00:01:51.900 --> 00:01:53.400
in that tweet, for example,

39
00:01:53.400 --> 00:01:57.860
and you're just sending it back, then that tag is going to appear in the web page,

40
00:01:57.860 --> 00:02:00.180
and it is going to get run.

41
00:02:00.660 --> 00:02:01.160
Now...

42
00:02:02.340 --> 00:02:03.640
This is twitter.com.

43
00:02:03.760 --> 00:02:05.300
This is what you saw on the website.

44
00:02:05.400 --> 00:02:06.800
And this is the correct thing to do.

45
00:02:06.960 --> 00:02:08.840
These have been changed, these angle brackets.

46
00:02:09.060 --> 00:02:10.900
There's a little bit of code behind there, saying...

47
00:02:10.900 --> 00:02:15.200
"This is actually an angle bracket, don't try and treat this as code."

48
00:02:15.340 --> 00:02:16.640
And, it's done the correct thing.

49
00:02:16.720 --> 00:02:18.760
This is the code of the exploit.

50
00:02:19.800 --> 00:02:20.560
TweetDeck...

51
00:02:21.340 --> 00:02:22.740
...forgot about that filter.

52
00:02:22.880 --> 00:02:26.760
I mean, that is so basic. That is, like I said, web security 101.

53
00:02:26.940 --> 00:02:30.500
That filter should never, ever, ever, ever, ever be turned off.

54
00:02:30.680 --> 00:02:32.640
And yet, it was.

55
00:02:32.820 --> 00:02:34.940
So this got run as code.

56
00:02:35.480 --> 00:02:36.900
So let's break it down.

57
00:02:37.240 --> 00:02:38.760
We have a "script" tag.

58
00:02:38.760 --> 00:02:42.580
That "script" tag means everything here, including the tag itself,

59
00:02:42.580 --> 00:02:45.300
doesn't get shown to the user, gets executed as code.

60
00:02:45.440 --> 00:02:48.680
It's also got a class of "xss", that'll be important in a moment.

61
00:02:49.280 --> 00:02:50.320
First command.

62
00:02:50.700 --> 00:02:53.220
Dollar sign. That dollar sign is jQuery.

63
00:02:53.340 --> 00:02:55.820
It's a JavaScript plug-in designed to make developing

64
00:02:55.820 --> 00:02:58.380
so much easier, and so much faster, and it works.

65
00:02:58.520 --> 00:03:01.300
And what this command here, just this first bit, means is

66
00:03:01.520 --> 00:03:06.320
"Find me anything on this page with the class of 'xss'."

67
00:03:06.460 --> 00:03:08.180
Well, that's this "script" tag.

68
00:03:08.280 --> 00:03:09.960
That's this bit right here.

69
00:03:10.100 --> 00:03:13.980
It's saying, "Find me. Find myself. Find this little bit of code."

70
00:03:14.120 --> 00:03:14.620
Okay.

71
00:03:15.260 --> 00:03:17.100
Then we move on to the next bit of the command, that says,

72
00:03:17.100 --> 00:03:20.800
"Find the parents. Find everything that this is contained in."

73
00:03:21.060 --> 00:03:24.400
And this command, in jQuery, returns an ordered list

74
00:03:24.400 --> 00:03:26.500
of each level of container.

75
00:03:26.760 --> 00:03:30.040
So it finds, first of all, the text of the script tag.

76
00:03:30.320 --> 00:03:32.640
Then, it finds this box, just here.

77
00:03:32.640 --> 00:03:35.200
That's important. This bit just here.

78
00:03:35.520 --> 00:03:37.880
Then it'll find the whole tweet, then the list of tweets,

79
00:03:37.880 --> 00:03:42.140
then maybe the the big bit of the web page, then the bigger bit, then the whole thing itself. But...

80
00:03:42.280 --> 00:03:43.960
Doesn't matter, it returns the ordered list.

81
00:03:44.540 --> 00:03:47.920
This bit here, "Find the second item in that ordered list."

82
00:03:47.920 --> 00:03:50.540
Computers count from zero, so one, will be the second.

83
00:03:50.540 --> 00:03:51.800
Zero... One.

84
00:03:52.380 --> 00:03:56.240
Okay? Second element in that list, this block just here.

85
00:03:56.580 --> 00:03:57.620
Okay? Next bit.

86
00:03:57.840 --> 00:04:00.260
Find all the "a" tags in that block.

87
00:04:00.260 --> 00:04:02.820
"A" tags are links. They are things you can click on.

88
00:04:02.820 --> 00:04:04.300
Well, we can do that. They're just here.

89
00:04:04.300 --> 00:04:08.320
There's the first, there's a second, third, fourth, there's loads more down here.

90
00:04:08.540 --> 00:04:09.660
Got a list of the "a" tags.

91
00:04:09.820 --> 00:04:12.920
Next up, find the second in that list.

92
00:04:12.920 --> 00:04:15.800
Second in that list, oh look! It's this retweet button.

93
00:04:16.020 --> 00:04:17.280
Hey! Click it.

94
00:04:18.280 --> 00:04:21.800
And that acts as if the user has click retweet. But it's not done yet.

95
00:04:21.960 --> 00:04:22.660
New command.

96
00:04:22.860 --> 00:04:25.460
Because that doesn't immediately retweet. It pops up a dialog box.

97
00:04:25.640 --> 00:04:27.340
Says "Are you sure you want to do this?"

98
00:04:27.540 --> 00:04:29.080
Dollar sign, "Find me."

99
00:04:29.580 --> 00:04:30.680
"data-action"

100
00:04:30.800 --> 00:04:35.460
So find me something, which has a data attribute, which this button does,

101
00:04:35.460 --> 00:04:37.900
equal to "action of retweet".

102
00:04:38.080 --> 00:04:40.020
Well hey! That's that button just there.

103
00:04:40.980 --> 00:04:41.620
Click it.

104
00:04:42.580 --> 00:04:45.460
Boom! Retweet done, out to everyone else.

105
00:04:45.700 --> 00:04:49.200
Again, only if you use TweetDeck. Only if that filter was off,

106
00:04:49.200 --> 00:04:51.940
which it should never, ever, ever, ever, ever have been.

107
00:04:52.880 --> 00:04:54.460
We still got some characters left.

108
00:04:54.600 --> 00:04:57.180
This is the wonderful thing. I mean, well done Andy.

109
00:04:57.180 --> 00:05:00.820
...if that's your real name.  I suspect your account won't survive for very long.

110
00:05:00.980 --> 00:05:02.660
But we've got time for a third command.

111
00:05:02.940 --> 00:05:03.640
We've got room.

112
00:05:03.820 --> 00:05:09.900
Alert. And what that says is, pop up a really obnoxious dialog box

113
00:05:10.080 --> 00:05:12.800
And in this case, it just says, "XSS...",

114
00:05:12.800 --> 00:05:14.640
Cross-Site Scripting, the very attack here,

115
00:05:14.640 --> 00:05:16.000
"...in TweetDeck."

116
00:05:16.240 --> 00:05:19.480
Andy is telling you exactly what they've done

117
00:05:19.480 --> 00:05:21.420
just as they've done it.

118
00:05:21.760 --> 00:05:23.680
And finally, just to be nice,

119
00:05:23.680 --> 00:05:26.800
a closing "script" tag,  just because we've got room for it,

120
00:05:26.800 --> 00:05:28.500
polite, just embed it in one tweet,

121
00:05:28.500 --> 00:05:31.240
and then, just to be lovely,

122
00:05:31.820 --> 00:05:32.580
a heart.

123
00:05:33.080 --> 00:05:36.000
Because, once it goes out, and they've got one character left,

124
00:05:36.220 --> 00:05:37.580
but anyone who's vulnerable,

125
00:05:37.580 --> 00:05:39.460
won't see all this gubbins, all this code,

126
00:05:39.460 --> 00:05:42.860
they will just see the little, red, heart.

127
00:05:43.380 --> 00:05:44.180
And that's it.

128
00:05:44.300 --> 00:05:45.320
That's how it worked.

129
00:05:45.440 --> 00:05:48.620
140 characters of code, well, less than 140 characters,

130
00:05:48.620 --> 00:05:51.220
and one TweetDeck programmer dropping a ball.

131
00:05:51.540 --> 00:05:56.760
That's all it took for the first self-retweeting tweet we've seen in a very long time.

132
00:05:57.140 --> 00:06:00.280
And some fairly significant disruption to what has

133
00:06:00.280 --> 00:06:03.660
pretty much unbelivably become an important part

134
00:06:03.660 --> 00:06:05.400
of how the world communicates.

135
00:06:05.880 --> 00:06:07.240
Worrying, isn't it?

136
00:06:07.240 --> 00:06:09.240
[Translating these subtitles? Add your name here!]