1
00:00:09,196 --> 00:00:09,946


2
00:00:09,946 --> 00:00:10,266


3
00:00:10,266 --> 00:00:11,006
>> All right.

4
00:00:11,956 --> 00:00:16,796
This is CS50 Halloween week
and the end of Week 8.

5
00:00:17,976 --> 00:00:22,356
So we do actually have some
pretty scary stories today,

6
00:00:22,686 --> 00:00:24,246
but first a couple
of announcements.

7
00:00:24,246 --> 00:00:25,496
So, one, any of you that showed

8
00:00:25,496 --> 00:00:27,626
up at office hours last
night, my apologies.

9
00:00:27,626 --> 00:00:30,536
We actually overcompensated by
moving too much of the staff

10
00:00:30,536 --> 00:00:32,666
from last night to
tonight and tomorrow.

11
00:00:32,666 --> 00:00:33,446
So my apologies.

12
00:00:33,446 --> 00:00:37,476
Quite honestly, if you showed
up at my bidding encouraging

13
00:00:37,826 --> 00:00:40,926
and we weren't actually there in
sufficient numbers to help you.

14
00:00:40,926 --> 00:00:42,796
So we will be there
tonight and tomorrow.

15
00:00:42,796 --> 00:00:44,326
And we will adjust
accordingly next week.

16
00:00:44,656 --> 00:00:48,356
So some of you tuned
into this last night.

17
00:00:48,356 --> 00:00:50,386
If you pulled up any of the
course's lectures videos, we,

18
00:00:50,386 --> 00:00:51,596
of course, have a
lot of students

19
00:00:51,786 --> 00:00:53,726
in the extension school
taking this course remotely.

20
00:00:53,726 --> 00:00:54,726
We, of course, have a lot

21
00:00:54,726 --> 00:00:56,586
of your classmates taking
this course remotely.

22
00:00:56,916 --> 00:00:59,156
And so we have these
videos online of lectures

23
00:00:59,156 --> 00:01:00,676
and sections and walkthroughs.

24
00:01:00,866 --> 00:01:02,906
And what we thought we'd
try is an experiment,

25
00:01:02,906 --> 00:01:05,146
really a social pedological
experiment just to try

26
00:01:05,146 --> 00:01:07,816
to lower the bar online,
so you guys talking

27
00:01:07,816 --> 00:01:09,776
to one another ideally
about material

28
00:01:09,776 --> 00:01:11,026
and the lecture and question.

29
00:01:11,496 --> 00:01:13,506
And so what some of
you might have seen is

30
00:01:13,506 --> 00:01:16,356
that we've integrated
CS50 chat into each

31
00:01:16,356 --> 00:01:17,956
of the course's lectures
at the moment.

32
00:01:17,956 --> 00:01:19,956
This is an interface
after you've logged

33
00:01:19,956 --> 00:01:22,676
into your cloud account that
you can see who else is watching

34
00:01:22,676 --> 00:01:24,176
that video or perhaps
another one.

35
00:01:24,176 --> 00:01:26,056
And then in theory you
can discuss the material.

36
00:01:26,286 --> 00:01:27,546
You can click any
of the sentences

37
00:01:27,546 --> 00:01:29,336
in the transcripts once
they appear to jump

38
00:01:29,336 --> 00:01:30,346
that part of the lecture.

39
00:01:30,566 --> 00:01:32,936
And, so, I think in a decent
size class there might actually

40
00:01:32,936 --> 00:01:35,056
be some pedological value here

41
00:01:35,056 --> 00:01:36,746
in giving you guys
the easier ability

42
00:01:37,016 --> 00:01:38,966
to chat amongst yourselves.

43
00:01:38,966 --> 00:01:41,586
And for now we also put this
on the course's home page

44
00:01:41,586 --> 00:01:43,386
so you can actually log
in and see what kind

45
00:01:43,386 --> 00:01:44,216
of chatter is going on.

46
00:01:44,416 --> 00:01:45,516
And we'll see how it goes.

47
00:01:45,516 --> 00:01:47,686
We'll tweak it as needed.

48
00:01:47,686 --> 00:01:49,686
The first several
posts that ended

49
00:01:49,686 --> 00:01:51,076
up in the chat room
last night --

50
00:01:51,076 --> 00:01:53,166
I actually started
setting it up last night.

51
00:01:53,826 --> 00:01:55,486
Didn't have time to
add the authentication,

52
00:01:55,486 --> 00:01:56,416
because I had to run to dinner.

53
00:01:56,656 --> 00:01:58,216
So I ran to dinner and
just let people log

54
00:01:58,216 --> 00:01:59,976
in with whatever
nickname they wanted to.

55
00:01:59,976 --> 00:02:03,496
And so the first message I think
posted to the chat room was, hi.

56
00:02:03,616 --> 00:02:05,046
So that was kind of
nice and fitting.

57
00:02:05,046 --> 00:02:05,626
Seems to work.

58
00:02:05,906 --> 00:02:07,306
The next one was, hello.

59
00:02:07,676 --> 00:02:09,466
The third one that I
saw when I came back

60
00:02:09,466 --> 00:02:11,886
from dinner was this one here.

61
00:02:12,466 --> 00:02:17,686
And the fourth chat ever posted
to the CS50 chat interface was,

62
00:02:18,676 --> 00:02:24,356
why I actually do not know.

63
00:02:25,216 --> 00:02:27,166
So, in any case,
that is CS50 chat.

64
00:02:27,166 --> 00:02:29,896
And you will see this interface
on any of the course's videos

65
00:02:29,896 --> 00:02:32,286
if you now tune in
to the MP4 versions

66
00:02:32,286 --> 00:02:33,516
on the course's website.

67
00:02:33,786 --> 00:02:36,346
So all of the rage over
the last couple of days,

68
00:02:36,346 --> 00:02:39,276
if you've been talking with
some of your technical friends

69
00:02:39,276 --> 00:02:40,286
or you read any of the blocks,

70
00:02:40,556 --> 00:02:42,206
is this utility called
Firesheep.

71
00:02:42,296 --> 00:02:43,936
And it's actually
rather epiphora

72
00:02:43,936 --> 00:02:47,216
that just this week we started
talking about web programming

73
00:02:47,216 --> 00:02:49,406
and security issues
and even as far back

74
00:02:49,406 --> 00:02:51,496
as our crypto discussion
did we talk about one

75
00:02:51,496 --> 00:02:52,906
of the technologies
involved in this

76
00:02:52,906 --> 00:02:55,136
or not involved something
called SSL.

77
00:02:55,136 --> 00:02:57,676
So a researcher by the name
of Eric Butler and a buddy

78
00:02:57,676 --> 00:03:00,346
of his named Ian Gallagher just
a couple of days ago presented

79
00:03:00,346 --> 00:03:06,226
at a hacker conference of
sorts a very compelling reason

80
00:03:06,226 --> 00:03:08,636
for the world to start
being mindful of some

81
00:03:08,636 --> 00:03:10,756
of the inherit insecurities
in today's internet

82
00:03:10,756 --> 00:03:12,196
and more specifically
today's web.

83
00:03:12,416 --> 00:03:14,836
What's curious is that their
presentation really did not

84
00:03:14,886 --> 00:03:17,676
point any new fundamental
weaknesses

85
00:03:17,676 --> 00:03:21,106
in today's worldwide web,
but it was a wake-up call

86
00:03:21,106 --> 00:03:24,016
to people not only in the
audience, but also more broadly,

87
00:03:24,016 --> 00:03:25,346
because the mass
media has picked this

88
00:03:25,346 --> 00:03:27,066
up as have some of you have.

89
00:03:27,066 --> 00:03:31,656
So Firesheep is a program
that automates the process

90
00:03:32,096 --> 00:03:36,416
of sitting inside of a room
like this or an internet cafe

91
00:03:36,416 --> 00:03:38,926
or Starbucks or where there's
a lot of wireless traffic.

92
00:03:38,926 --> 00:03:41,366
And with the click of the
button you can then sniff all

93
00:03:41,366 --> 00:03:43,686
of the wireless traffic
in the vicinity of you.

94
00:03:43,876 --> 00:03:46,776
And if the people near you are
using that wireless connection

95
00:03:46,776 --> 00:03:49,366
to connect to popular websites
like Facebook or Twitter

96
00:03:49,366 --> 00:03:51,776
or Gmail or the like,
with the single click,

97
00:03:52,256 --> 00:03:55,296
you can log into that
person's Facebook or Twitter

98
00:03:55,576 --> 00:03:57,546
or other such account.

99
00:03:57,546 --> 00:04:00,756
And this is not because some
new fatal flaw was discovered

100
00:04:00,756 --> 00:04:03,786
in these technologies, but
because two fellows highlighted

101
00:04:03,786 --> 00:04:06,656
for the whole world's
attention just how insecure

102
00:04:06,816 --> 00:04:09,946
and how poorly designed some of
today's websites or really some

103
00:04:09,946 --> 00:04:11,586
of our underlying
technologies are.

104
00:04:12,106 --> 00:04:14,176
So if you caught wind of this,

105
00:04:14,176 --> 00:04:16,146
do realize that you
can go to the source.

106
00:04:16,146 --> 00:04:17,406
You might have heard
some correct things,

107
00:04:17,406 --> 00:04:18,986
some incorrect things
from friends and the like,

108
00:04:19,236 --> 00:04:21,306
but this is actually the
blog post where the author

109
00:04:21,306 --> 00:04:24,876
of this presentation actually
discusses this utility,

110
00:04:24,876 --> 00:04:27,686
Firesheep, both before
the day he released it

111
00:04:27,686 --> 00:04:30,396
and then a day after, after 100
plus thousand people actually

112
00:04:30,396 --> 00:04:31,016
downloaded it.

113
00:04:31,296 --> 00:04:33,136
What happens is if you
download this utility,

114
00:04:33,136 --> 00:04:36,166
it's a free plug-in for
Firefox, for Macs and Windows.

115
00:04:36,486 --> 00:04:38,596
You see a Firefox
window like this.

116
00:04:38,596 --> 00:04:40,416
And on the left-hand side
you see a little button

117
00:04:40,716 --> 00:04:42,926
that simply says,
start capturing.

118
00:04:42,986 --> 00:04:45,646
And if you click that start
capturing button, what you start

119
00:04:45,646 --> 00:04:49,016
to see are anyone nearby
whose been logging into some

120
00:04:49,016 --> 00:04:50,096
of those popular websites.

121
00:04:50,096 --> 00:04:52,276
So in this hacker demonstration
he give a demonstration

122
00:04:52,276 --> 00:04:55,716
with himself named Eric, his
buddy and then someone else,

123
00:04:55,716 --> 00:04:57,746
two other people who were
actually in the audience.

124
00:04:57,746 --> 00:04:59,906
And then what you can do
is click on, for instance,

125
00:04:59,966 --> 00:05:02,806
Ian's name up at
top left and bam.

126
00:05:02,896 --> 00:05:04,756
Now, Eric is logged
into Ian's account,

127
00:05:05,016 --> 00:05:07,286
not knowing his password, not
having looked over his shoulder,

128
00:05:07,576 --> 00:05:09,396
just by sniffing the
wireless traffic.

129
00:05:09,396 --> 00:05:11,826
And, frankly, just to
hammer home this point,

130
00:05:11,826 --> 00:05:14,156
since one of the goals
of this course is really

131
00:05:14,156 --> 00:05:15,956
to educate you guys,
not necessarily

132
00:05:15,956 --> 00:05:17,086
to be computer scientists,

133
00:05:17,086 --> 00:05:20,166
but to be technically savvy
politicians or business people

134
00:05:20,166 --> 00:05:22,376
or really just ordinary
people on the street.

135
00:05:22,876 --> 00:05:26,666
I decided it would be the most
compelling example to tell you

136
00:05:26,666 --> 00:05:29,696
that James, Trisha,
James, Chris, Emily,

137
00:05:30,246 --> 00:05:34,066
Zar [assumed spelling], Mike,
Brian, RJ, Jonathan, Waldo,

138
00:05:34,066 --> 00:05:38,486
Emily, Clougan [assumed
spelling] Rose, Nick, Lou, Mike,

139
00:05:38,716 --> 00:05:43,206
Jonathan, Brecka [assumed
spelling], Chris, Anna, Brian,

140
00:05:43,206 --> 00:05:49,326
Charlie, RJ, Joe,
James, Lee, Ryan, CC,

141
00:05:49,796 --> 00:05:51,906
all of your accounts
have been compromised

142
00:05:51,906 --> 00:05:56,286
as of the past five minutes.

143
00:05:58,696 --> 00:06:01,536
[applause] Now, frankly, what
are you doing on Facebook

144
00:06:01,536 --> 00:06:04,086
and all these websites
during CS50's lecture?

145
00:06:04,206 --> 00:06:06,576
So, I mean, perhaps
that's the take away here.

146
00:06:06,576 --> 00:06:09,076
But just to show how easy
this is, I won't go poking

147
00:06:09,076 --> 00:06:12,046
around your own personal
accounts, but I do recognize one

148
00:06:12,046 --> 00:06:13,526
of the names, Rose Cowe,
[assumed spelling] there

149
00:06:13,526 --> 00:06:15,156
at top left, one of
our teaching fellows.

150
00:06:15,756 --> 00:06:20,146
So, Rose, here is
your Facebook account.

151
00:06:21,366 --> 00:06:22,306
It is that easy.

152
00:06:22,306 --> 00:06:24,096
So I actually got her
blessing before doing this.

153
00:06:24,096 --> 00:06:25,436
We sanitized her news-feed here.

154
00:06:25,796 --> 00:06:27,526
But it is literally that easy.

155
00:06:27,526 --> 00:06:29,246
I downloaded a program
from the web.

156
00:06:29,246 --> 00:06:30,606
I read up on how it works,

157
00:06:30,606 --> 00:06:31,796
because I was technically
curious.

158
00:06:31,796 --> 00:06:33,476
I installed this thing,
double clicked and bam.

159
00:06:33,476 --> 00:06:36,396
And literally the dozen or
two names I just rattled off,

160
00:06:36,396 --> 00:06:38,466
if someone else in this audience
-- and please do not do this --

161
00:06:38,696 --> 00:06:40,966
is running this tool at this
moment in time, literally all

162
00:06:40,966 --> 00:06:43,006
of your accounts have been
compromised, because now anyone

163
00:06:43,006 --> 00:06:45,016
in this room, myself
included, can start poking

164
00:06:45,016 --> 00:06:47,706
around your messages,
your pokes, your e-mail,

165
00:06:47,706 --> 00:06:48,916
your tweets and the like.

166
00:06:48,996 --> 00:06:50,926
And so this was really
a wake-up call

167
00:06:50,926 --> 00:06:51,936
in this research conference.

168
00:06:52,136 --> 00:06:54,056
And don't worry, I won't leave
you completely hanging today

169
00:06:54,056 --> 00:06:55,646
and just say, good luck.

170
00:06:55,646 --> 00:06:58,426
I will actually propose
some technological solutions

171
00:06:58,426 --> 00:07:00,276
and use this really as a
stepping stone this week

172
00:07:00,276 --> 00:07:03,276
and next to discuss what
these flaws are and what we,

173
00:07:03,276 --> 00:07:06,096
as computer scientists,
can do to familiarize them,

174
00:07:06,096 --> 00:07:08,346
what you as users
can do to avoid them

175
00:07:08,566 --> 00:07:10,556
and really what we more
generally as a society

176
00:07:10,836 --> 00:07:13,766
of increasingly technical
people can actually do

177
00:07:13,766 --> 00:07:14,866
to protect ourselves.

178
00:07:14,936 --> 00:07:18,336
But I grabbed this link off
the internet yesterday, too.

179
00:07:18,726 --> 00:07:20,716
Some folks decided that
it would be compelling

180
00:07:20,716 --> 00:07:22,606
to say something like this.

181
00:07:22,606 --> 00:07:25,876
This is additional program
someone wrote called idiocy

182
00:07:26,086 --> 00:07:27,896
that's a warning shot
to people browsing the

183
00:07:27,896 --> 00:07:29,166
internet insecurely.

184
00:07:29,166 --> 00:07:32,196
And what utility does is
if you install that utility

185
00:07:32,516 --> 00:07:34,906
and it's a text that there
are people in your vicinity

186
00:07:34,906 --> 00:07:39,256
who are logged into twitter, it
logs itself in as that person

187
00:07:39,256 --> 00:07:41,716
to twitter, poses a
tweet saying, hey, idiot,

188
00:07:41,716 --> 00:07:43,066
your account has
been compromised;

189
00:07:43,066 --> 00:07:43,976
here's how to fix it.

190
00:07:43,976 --> 00:07:45,316
And then it logs off.

191
00:07:45,316 --> 00:07:47,706
So this is what it means by
warning shot across the bow.

192
00:07:47,786 --> 00:07:49,206
And it's a program
called Idiocy.

193
00:07:49,476 --> 00:07:50,886
So I bring this up
because actually a lot

194
00:07:50,886 --> 00:07:52,736
of you e-mailed me right
after lecture on Monday

195
00:07:52,736 --> 00:07:55,236
when this tool was first
announced asking about this.

196
00:07:55,236 --> 00:07:56,926
Because everyone in this
room and really anyone

197
00:07:56,926 --> 00:07:59,196
on this campus, anyone at
Starbucks, at an airport,

198
00:07:59,426 --> 00:08:02,636
really are vulnerable to
these kinds of attacks.

199
00:08:02,636 --> 00:08:05,526
And I would be remissed probably
if I didn't point out that,

200
00:08:05,526 --> 00:08:09,486
though, Harvard might not have
all the possible technological

201
00:08:09,486 --> 00:08:11,146
defenses against
this, they do have all

202
00:08:11,146 --> 00:08:13,216
of the administrative
board possible defenses

203
00:08:13,536 --> 00:08:14,486
against something like this.

204
00:08:14,486 --> 00:08:18,226
So please do be mindful
of such policies and do

205
00:08:18,226 --> 00:08:20,316
as I say, not as I do.

206
00:08:20,316 --> 00:08:23,566
But how can you actually defend
against these kinds of threats?

207
00:08:23,566 --> 00:08:25,886
Well, really, what are the
threats in the first place?

208
00:08:25,886 --> 00:08:27,056
Well, I'm going to go ahead

209
00:08:27,056 --> 00:08:29,036
and run a little
command on my Mac here.

210
00:08:29,036 --> 00:08:30,706
You can do this on
almost any Linux system.

211
00:08:30,966 --> 00:08:33,706
It's a command called
TCP dump, TCP being one

212
00:08:33,706 --> 00:08:36,256
of the protocols we talked
briefly about Monday that has

213
00:08:36,256 --> 00:08:38,396
to do with getting data
from point A to point B.

214
00:08:38,606 --> 00:08:41,316
And when I hit enter here and
then log into my own computer,

215
00:08:41,526 --> 00:08:44,076
I've essentially put my
wireless ethernet adapter

216
00:08:44,076 --> 00:08:46,846
into what's called promiscuous
mode, which actually means

217
00:08:46,846 --> 00:08:49,856
that it's listening not only to
traffic destined for my laptop,

218
00:08:50,066 --> 00:08:52,196
but for any traffic
that's here in the room.

219
00:08:52,196 --> 00:08:53,336
So if we actually
look through this,

220
00:08:53,336 --> 00:08:55,246
hopefully we won't
see anything sketchy.

221
00:08:55,496 --> 00:08:58,406
Actually, one of you seems
to be downloading Firesheep,

222
00:08:58,496 --> 00:08:59,886
it appears, or googling for it.

223
00:09:00,766 --> 00:09:05,786
But what we see going across my
terminal window here is just a

224
00:09:05,786 --> 00:09:09,286
raw dump of all of the
wireless internet traffic going

225
00:09:09,286 --> 00:09:13,056
across the -- going
through the air right here

226
00:09:13,056 --> 00:09:13,736
at this moment in time.

227
00:09:13,736 --> 00:09:15,546
I'm going to go ahead and
run a different program

228
00:09:15,546 --> 00:09:18,776
that makes this a little more
visually interesting for us.

229
00:09:19,126 --> 00:09:20,426
This is what's generally called

230
00:09:20,426 --> 00:09:22,636
in the security community
a packet sniffing utility,

231
00:09:22,636 --> 00:09:25,566
which has actually really
useful technical value.

232
00:09:25,876 --> 00:09:27,806
This, too, is a free tool.

233
00:09:27,806 --> 00:09:30,386
This has been around for 10,
15 years, something like it.

234
00:09:30,386 --> 00:09:32,156
I'm going to click on
my wireless interface.

235
00:09:32,156 --> 00:09:34,516
And what you see now
scrolling by is every one

236
00:09:34,516 --> 00:09:37,546
of the individual data packets
flowing across the wire,

237
00:09:38,216 --> 00:09:41,156
flowing through the air
here wirelessly in Sanders

238
00:09:41,156 --> 00:09:44,376
or unsuspecting freshman in
Annenberg across the way.

239
00:09:44,876 --> 00:09:47,156
You can see on the left-hand
column the IP addresses,

240
00:09:47,156 --> 00:09:49,306
the unique addresses
that identify the origin

241
00:09:49,306 --> 00:09:50,866
or destination of
each of these packets.

242
00:09:51,066 --> 00:09:52,596
And if we really spend
some time looking,

243
00:09:52,866 --> 00:09:56,116
we'd notice some familiar
acronyms, TCP, HTTP.

244
00:09:56,346 --> 00:09:58,986
So if I actually got nosy
and started digging into each

245
00:09:58,986 --> 00:10:00,406
of these rows on this table,

246
00:10:00,406 --> 00:10:03,126
I could see every website these
freshman are visiting or people

247
00:10:03,126 --> 00:10:06,566
in this room, we could see
what emails have been sent.

248
00:10:06,566 --> 00:10:08,986
If you're not using a
secure website like Gmail,

249
00:10:09,306 --> 00:10:11,616
we could see all of the
instant messages certainly going

250
00:10:11,616 --> 00:10:12,316
across the wire.

251
00:10:12,316 --> 00:10:14,246
You could see everything.

252
00:10:14,576 --> 00:10:17,226
And so really the only thing
that's been protecting you

253
00:10:17,276 --> 00:10:20,876
up until this past Monday was
ignorance both on campus here

254
00:10:21,166 --> 00:10:23,646
and the general ignorance
of the population as to all

255
00:10:23,646 --> 00:10:25,286
of these fundamental weaknesses.

256
00:10:25,286 --> 00:10:27,986
So hereto I'm quite sure
Harvard's administrative board

257
00:10:27,986 --> 00:10:30,706
has rules against running packet
sniffers for anything other

258
00:10:30,706 --> 00:10:32,216
than CS50 lecture purposes.

259
00:10:32,546 --> 00:10:36,646
So do be mindful of taking
visual things away from this

260
00:10:36,646 --> 00:10:37,726
and not practical skills.

261
00:10:38,036 --> 00:10:39,596
So what are the other
possible solutions?

262
00:10:39,596 --> 00:10:41,226
Well, one of the first
things that comes to mind

263
00:10:41,226 --> 00:10:43,656
and has been proposed by some
of your classmates in some

264
00:10:43,656 --> 00:10:46,266
of the e-mails is, well, why is
Harvard's wireless not secure?

265
00:10:46,266 --> 00:10:50,056
I mean, my God, like my little
apartment has more secure

266
00:10:50,056 --> 00:10:52,706
wireless than Harvard University
and a lot of companies.

267
00:10:52,926 --> 00:10:54,096
Well, what's the reason perhaps

268
00:10:54,136 --> 00:10:57,776
that Harvard does not have
encrypted or secure Wi-Fi?

269
00:10:58,476 --> 00:11:00,366
Yeah? What's that?

270
00:11:00,366 --> 00:11:00,716
>> [ Inaudible comment ]

271
00:11:00,716 --> 00:11:01,586
>> Compatibility.

272
00:11:01,586 --> 00:11:02,816
Okay. So that's one issue,

273
00:11:02,816 --> 00:11:06,546
because there are different
encryption technologies.

274
00:11:06,546 --> 00:11:08,306
One is called WEP, W-E-P.

275
00:11:08,486 --> 00:11:09,176
One is called WPA.

276
00:11:09,176 --> 00:11:11,056
Another is called WPA2.

277
00:11:11,136 --> 00:11:12,596
These are all different
versions.

278
00:11:12,826 --> 00:11:15,246
And people with slightly older
laptops might not actually

279
00:11:15,246 --> 00:11:18,126
support the latest and
greatest ciphers, the latest

280
00:11:18,126 --> 00:11:19,936
and greatest security
technologies.

281
00:11:20,256 --> 00:11:21,936
And so the implication
is Harvard might have

282
00:11:21,936 --> 00:11:24,336
to dumb everything down to
that lowest common denominator,

283
00:11:24,586 --> 00:11:26,766
but the reason that there
exists version one of WPA

284
00:11:26,876 --> 00:11:28,426
and version two of WPA is

285
00:11:28,626 --> 00:11:30,216
because WEP, for
instance, sucks.

286
00:11:30,216 --> 00:11:32,686
It's a completely
vulnerable protocol such that

287
00:11:32,686 --> 00:11:35,276
if you sniff enough
encrypted traffic,

288
00:11:35,636 --> 00:11:38,756
so traffic that's been encrypted
to your home router or wherever,

289
00:11:38,756 --> 00:11:42,336
if it's using WEP, after a
few seconds or a few minutes

290
00:11:42,336 --> 00:11:44,056
if you have gathered
enough wireless packets,

291
00:11:44,306 --> 00:11:47,866
you can reverse engineer what
the secret key or password is

292
00:11:47,866 --> 00:11:50,426
for that wireless router
and, bam, you're connected.

293
00:11:50,426 --> 00:11:52,486
Case in point, the first time
I saw this demonstrated was

294
00:11:52,486 --> 00:11:55,896
several years ago when I
was helping random contacts,

295
00:11:55,896 --> 00:11:58,386
a friend's brother move.

296
00:11:58,386 --> 00:12:01,436
And we had finished moving all
of his boxes into his apartment.

297
00:12:01,436 --> 00:12:02,816
And it was this new
apartment in Cambridge.

298
00:12:03,086 --> 00:12:05,486
And he or my friend really
wanted to check their e-mail.

299
00:12:05,526 --> 00:12:07,666
And he didn't have
Com-cast or cable mode

300
00:12:07,666 --> 00:12:08,766
or anything like that yet.

301
00:12:09,116 --> 00:12:13,396
And so my buddy pulled up his
computer on which he downloaded

302
00:12:13,396 --> 00:12:14,646
yet another free program.

303
00:12:14,886 --> 00:12:17,346
And within I think two
minutes, maybe five minutes

304
00:12:17,346 --> 00:12:19,616
of sniffing all of the
neighbors' wireless traffic,

305
00:12:19,986 --> 00:12:21,466
all of which was encrypted, bam,

306
00:12:21,726 --> 00:12:24,836
he found someone whose key
was not sufficiently strong.

307
00:12:24,866 --> 00:12:27,056
It was something silly like
one, two, three, four, five.

308
00:12:27,356 --> 00:12:29,586
And he figured it out just
by running this program that,

309
00:12:29,586 --> 00:12:32,366
again, any kid off the internet
can download these days.

310
00:12:32,366 --> 00:12:35,086
So thankfully there exists more
secure protocols like WPA2.

311
00:12:35,166 --> 00:12:38,376
There are even flaws in these,
but there's a gotcha like that

312
00:12:38,376 --> 00:12:40,556
on campus where,
well, then you have

313
00:12:40,586 --> 00:12:41,786
to be compatible with everyone.

314
00:12:42,016 --> 00:12:45,016
We have to somehow
tell all 20,000,

315
00:12:45,076 --> 00:12:48,236
30,000 affiliates what
the secret password is

316
00:12:48,236 --> 00:12:49,996
to access the wireless
access point.

317
00:12:50,286 --> 00:12:53,316
It might involve a
bit more CPU cycles

318
00:12:53,316 --> 00:12:54,596
to actually encrypt
all this data,

319
00:12:54,596 --> 00:12:56,606
which means Harvard might need
more hardware, more money.

320
00:12:56,946 --> 00:12:58,496
So there is a lot
of gotchas there.

321
00:12:58,716 --> 00:13:00,126
It just raises the bar.

322
00:13:00,126 --> 00:13:01,736
And so it's not actually
uncommon

323
00:13:01,736 --> 00:13:03,626
to use unencrypted Wi-Fi here.

324
00:13:03,866 --> 00:13:07,926
And even then this only pushes
the problem away a little bit.

325
00:13:07,956 --> 00:13:09,436
The fundamental problem
right now,

326
00:13:09,466 --> 00:13:11,866
which we'll actually discuss
today, is that when you log

327
00:13:11,866 --> 00:13:14,926
into a website like Facebook or
Twitter or any of these others,

328
00:13:15,216 --> 00:13:16,996
you generally are using
a secure connection.

329
00:13:17,136 --> 00:13:19,586
HTTPS colon slash slash.

330
00:13:19,586 --> 00:13:21,596
And the S stands
for secure, for SSL,

331
00:13:21,886 --> 00:13:23,596
which means that
connection is encrypted.

332
00:13:24,026 --> 00:13:26,946
But then once you're finished
logging in, you might notice

333
00:13:26,946 --> 00:13:28,616
that the URL usually
changes back

334
00:13:28,946 --> 00:13:32,016
to just HTTP colon slash slash.

335
00:13:32,016 --> 00:13:32,796
So insecure.

336
00:13:32,796 --> 00:13:33,866
But that's not a big deal,

337
00:13:33,866 --> 00:13:36,056
because you've already provided
your user name and password

338
00:13:36,056 --> 00:13:38,206
or maybe your credit card
number if you bought something.

339
00:13:38,426 --> 00:13:39,486
And so it's not a big deal.

340
00:13:39,646 --> 00:13:43,136
It's not as big a deal if
someone sees your profile

341
00:13:43,136 --> 00:13:44,666
or sees who your friends are.

342
00:13:44,666 --> 00:13:46,436
It's more worrisome
if someone sees,

343
00:13:46,716 --> 00:13:48,146
let's argue, your password.

344
00:13:48,426 --> 00:13:51,976
But unfortunately HTTP
hypertext transfer protocol,

345
00:13:51,976 --> 00:13:54,396
this thing that's getting data
from points A to B browser

346
00:13:54,396 --> 00:13:57,126
and server it's what's
called a stateless protocol.

347
00:13:57,126 --> 00:13:59,596
And you can see this visually
if you visit with a website,

348
00:13:59,596 --> 00:14:01,626
you usually see some
simplifying icon

349
00:14:01,626 --> 00:14:04,416
as the web page is downloading
and then it stops eventually.

350
00:14:04,416 --> 00:14:07,306
And once it stops, that means
the connection between browser

351
00:14:07,306 --> 00:14:08,916
and server has been severed.

352
00:14:09,006 --> 00:14:10,266
They're not talking anymore.

353
00:14:10,456 --> 00:14:13,226
And yet the next time you click
a link on your Facebook page

354
00:14:13,226 --> 00:14:16,656
to a friend or to a message or
whatever, surely you don't have

355
00:14:16,656 --> 00:14:19,206
to log in again and again
to visit every page.

356
00:14:19,206 --> 00:14:23,106
Somehow the website Facebook has
remembered who you are or really

357
00:14:23,386 --> 00:14:24,756
that you have logged in.

358
00:14:24,996 --> 00:14:27,276
And it does so by planting
what's called a cookie

359
00:14:27,536 --> 00:14:29,986
on your computer,
which is a little file

360
00:14:30,026 --> 00:14:31,656
or it's a big random number

361
00:14:31,656 --> 00:14:33,506
that gets planted
somewhere on your computer.

362
00:14:33,756 --> 00:14:37,066
And unbenounced to the typical
user, that big random number,

363
00:14:37,066 --> 00:14:40,536
that cookie is sent back
and forth, back and forth

364
00:14:40,536 --> 00:14:44,176
to Facebook, much like a
little red stamp at a carnival

365
00:14:44,176 --> 00:14:46,556
that gets you in and out of the
carnival if you actually leave

366
00:14:46,596 --> 00:14:47,946
for an amount of time.

367
00:14:47,946 --> 00:14:48,966
Your browser unbenounced

368
00:14:48,966 --> 00:14:51,676
to you is always presenting this
random number, this hand stamp

369
00:14:51,676 --> 00:14:53,746
to Facebook saying you
are already authenticated;

370
00:14:53,746 --> 00:14:55,906
you are already authenticated;
don't ask me again and again

371
00:14:55,906 --> 00:14:57,416
and again for my user
name and password.

372
00:14:57,676 --> 00:14:59,226
And the problem is
this hand stamp,

373
00:14:59,496 --> 00:15:03,816
this cookie is generally not
being transmitted securely,

374
00:15:03,816 --> 00:15:06,346
because it's being
transmitted by HTTP.

375
00:15:06,556 --> 00:15:07,976
So this program Fireshark,

376
00:15:08,266 --> 00:15:11,586
if you see where the story is
going, is not eavesdropping

377
00:15:11,586 --> 00:15:12,896
on all your encrypted traffic.

378
00:15:12,896 --> 00:15:15,186
I actually don't know what any
of your guys' passwords are

379
00:15:15,296 --> 00:15:16,276
to Facebook or to Twitter.

380
00:15:16,626 --> 00:15:18,606
What I have stolen
using this program

381
00:15:18,606 --> 00:15:21,456
and what anyone can steal using
this program must be what?

382
00:15:22,586 --> 00:15:23,186
That cookie.

383
00:15:23,186 --> 00:15:23,906
That hand stamp.

384
00:15:23,906 --> 00:15:27,376
It's as though a Firesheep
is kind of making a copy

385
00:15:27,376 --> 00:15:29,446
of that hand stamp and then
presenting it to Facebook

386
00:15:29,446 --> 00:15:30,946
or the like as its own.

387
00:15:30,946 --> 00:15:32,476
And that's sufficient to get you

388
00:15:32,546 --> 00:15:36,486
through that website's
security layer.

389
00:15:36,486 --> 00:15:38,396
Now, what about encrypting
the traffic?

390
00:15:38,576 --> 00:15:41,476
So this actually does solve the
problem at least of the freshman

391
00:15:41,476 --> 00:15:43,346
in Annenberg and the
person sitting next to you.

392
00:15:43,346 --> 00:15:45,076
If you actually have an
encrypted connection,

393
00:15:45,316 --> 00:15:46,416
your laptop is going to connect

394
00:15:46,416 --> 00:15:48,786
to Harvard's wireless access
points, which, as you know,

395
00:15:48,786 --> 00:15:50,026
actually are not in Sanders

396
00:15:50,026 --> 00:15:51,406
since we have very
poor wireless here.

397
00:15:51,666 --> 00:15:52,926
You probably are in Annenberg.

398
00:15:53,276 --> 00:15:56,326
So between your laptop and those
antennas you probably do have a

399
00:15:56,326 --> 00:15:58,946
secure encrypted
connection if Harvard turned

400
00:15:58,946 --> 00:16:00,066
on a protocol like this.

401
00:16:00,066 --> 00:16:01,836
It would be a bit of a
nuisance for all of us

402
00:16:01,836 --> 00:16:03,926
to actually reconfiguring
our laptops, but it would

403
00:16:03,926 --> 00:16:06,996
at least encrypt us between us
and those antennas on the wall.

404
00:16:07,166 --> 00:16:09,446
But the problem is
that encryption ends

405
00:16:09,446 --> 00:16:11,026
at that wireless access point.

406
00:16:11,026 --> 00:16:12,446
And there's an ethernet
cable leading

407
00:16:12,446 --> 00:16:15,566
from that wireless access point
to one of Harvard's routers,

408
00:16:15,636 --> 00:16:17,096
big computer that
moves data around.

409
00:16:17,296 --> 00:16:19,516
There's another big wire
leading from Harvard's router

410
00:16:19,616 --> 00:16:21,896
to the next router,
to the next router,

411
00:16:21,896 --> 00:16:23,356
to the next router
on the internet.

412
00:16:23,586 --> 00:16:27,546
So you raise the bar to people
you know actually sniffing your

413
00:16:27,546 --> 00:16:29,856
data if you're at least
encrypted wirelessly,

414
00:16:30,136 --> 00:16:31,776
but the whole rest
of the internet.

415
00:16:31,966 --> 00:16:36,226
If there are twenty hops, 20
routers between you and point B,

416
00:16:36,346 --> 00:16:38,576
you really only encrypted
the first of those.

417
00:16:38,576 --> 00:16:41,086
There are 19 other
opportunities where anyone

418
00:16:41,086 --> 00:16:44,816
on the internet can actually
still sniff your data.

419
00:16:45,056 --> 00:16:46,016
So what's the solution?

420
00:16:46,126 --> 00:16:48,296
Well, what about encrypting
your data not between you

421
00:16:48,296 --> 00:16:51,586
and the access point, but
between you and point B; right?

422
00:16:51,586 --> 00:16:54,086
Go the whole nine yards all
the way across the country

423
00:16:54,086 --> 00:16:59,026
to Facebook server by using the
S in HTTP in the URL, which,

424
00:16:59,026 --> 00:17:00,096
again, denotes secure.

425
00:17:00,356 --> 00:17:02,266
This means using a technology

426
00:17:02,266 --> 00:17:04,546
that we mentioned
briefly weeks ago,

427
00:17:04,546 --> 00:17:07,906
RSA and cryptography more
generally can your browser

428
00:17:07,906 --> 00:17:12,076
establish a secure connection
to facebook.com itself.

429
00:17:12,196 --> 00:17:15,546
And the upside of this is that
after your hand is stamped,

430
00:17:15,596 --> 00:17:17,646
after a cookie is
planted on your computer,

431
00:17:17,876 --> 00:17:21,066
so long as you stay on the
SSL version of Facebook,

432
00:17:21,336 --> 00:17:23,726
the one whose URL
starts with HTTPS,

433
00:17:23,766 --> 00:17:28,146
at least then this cookie,
this hand stamp will continue

434
00:17:28,376 --> 00:17:31,636
to be transmitted securely
again and again and again.

435
00:17:31,996 --> 00:17:33,246
But there's a problem here.

436
00:17:33,246 --> 00:17:36,196
So case in point, let's
go ahead and do this.

437
00:17:36,236 --> 00:17:39,916
So I'm going to go to -- I got
to log out of Rose's account.

438
00:17:40,626 --> 00:17:43,516
I'm going to clear
my recent history.

439
00:17:43,756 --> 00:17:47,526
That clears my cookies and
all of my temporary files

440
00:17:47,526 --> 00:17:48,396
that have been downloaded.

441
00:17:48,676 --> 00:17:50,356
So now I'm going to
go to facebook.com.

442
00:17:50,436 --> 00:17:51,266
All right.

443
00:17:51,266 --> 00:17:54,676
So I'm actually on HTTP, which
is, in fact, the default.

444
00:17:54,836 --> 00:17:56,706
You know, it turns out
Facebook does support SSL.

445
00:17:56,706 --> 00:17:59,126
So I can insert the S
there and hit enter.

446
00:17:59,446 --> 00:18:01,326
So it feels like I might
have solved this problem.

447
00:18:01,326 --> 00:18:03,606
Notice, too, the world has
adopted these visual queues

448
00:18:03,606 --> 00:18:04,606
like green here.

449
00:18:04,856 --> 00:18:07,376
If you visit a company
that's paid some extra money

450
00:18:07,376 --> 00:18:11,366
to get what's called a digital
certificate, you can signify

451
00:18:11,366 --> 00:18:13,256
to the world in green,
hey, this is secure.

452
00:18:13,256 --> 00:18:14,026
But watch what happens.

453
00:18:14,026 --> 00:18:16,866
So I'm going to go ahead and
log in here, not as Rose,

454
00:18:16,866 --> 00:18:18,626
but with a little
fake email account.

455
00:18:19,056 --> 00:18:21,196
I'm going to log in
with my password.

456
00:18:21,196 --> 00:18:23,986
And now notice what --
where is the log in button?

457
00:18:24,336 --> 00:18:27,376
I'm going to click log in and
watch what happens to the URL.

458
00:18:27,376 --> 00:18:28,826
I can't see it all at once.

459
00:18:29,076 --> 00:18:29,486
Here we go.

460
00:18:29,566 --> 00:18:33,036
Log in. So I have to
name my new computer.

461
00:18:33,036 --> 00:18:34,556
This is actually a security
feature that I have turned

462
00:18:34,556 --> 00:18:35,886
on just so I can
detect who is logging

463
00:18:35,886 --> 00:18:37,216
in to my Facebook
account after lecture.

464
00:18:37,706 --> 00:18:42,166
But now notice what
did the URL go back to?

465
00:18:43,376 --> 00:18:44,076
Dammit; right?

466
00:18:44,076 --> 00:18:47,656
Even though I used HTTPS
for the whole transaction,

467
00:18:47,866 --> 00:18:50,846
the very last step where
I logged into Facebook,

468
00:18:51,086 --> 00:18:52,746
I got a response
from the server.

469
00:18:52,976 --> 00:18:54,066
It says, okay.

470
00:18:54,066 --> 00:18:54,866
You're logged in.

471
00:18:54,866 --> 00:18:57,736
Now go to home.PHP,
Facebook's home page.

472
00:18:57,946 --> 00:19:00,306
Guess what URL they
redirected me to?

473
00:19:00,986 --> 00:19:03,816
HTTP. So even though I've been
keeping my little hand stamp

474
00:19:03,816 --> 00:19:06,296
secret for all previous
steps, I went so far

475
00:19:06,296 --> 00:19:08,256
as to manually type
the S into the URL,

476
00:19:08,476 --> 00:19:10,466
then Facebook took it upon
itself to say, hey there,

477
00:19:10,656 --> 00:19:12,266
here I am, I'm logging in now.

478
00:19:12,266 --> 00:19:13,776
And that cookie is
now compromised.

479
00:19:13,776 --> 00:19:17,596
And those of you who are
playing with fire could now log

480
00:19:17,596 --> 00:19:21,756
into my little happy account
here and see exactly what I see,

481
00:19:21,756 --> 00:19:23,586
which is zero friends with
this particular account.

482
00:19:23,586 --> 00:19:25,196
It's actually fascinating
not having signed

483
00:19:25,196 --> 00:19:26,836
up for Facebook account
in like five or six years

484
00:19:26,836 --> 00:19:29,456
to see what the rest of the
world is now going through,

485
00:19:29,506 --> 00:19:30,566
but not the point of today.

486
00:19:30,986 --> 00:19:35,016
So SSL doesn't seem to work
perfectly, because you,

487
00:19:35,016 --> 00:19:36,476
the user, have no control

488
00:19:36,476 --> 00:19:39,696
over where the web server
is going to send you.

489
00:19:39,876 --> 00:19:41,466
Now, I wouldn't be
surprised, frankly,

490
00:19:41,466 --> 00:19:44,056
in the next several days,
weeks, months, that Facebook,

491
00:19:44,106 --> 00:19:46,556
because they're just so dam big
and because this is going to be

492
00:19:46,626 --> 00:19:49,706
such a headache for them having
so many compromised accounts,

493
00:19:49,986 --> 00:19:53,446
so many more spamming accounts
from compromised accounts,

494
00:19:53,446 --> 00:19:56,086
I wouldn't be surprised if they
just move all of their servers

495
00:19:56,136 --> 00:19:59,366
to HTTPS and some of this
will be taken care of for you.

496
00:19:59,686 --> 00:20:01,576
But what can you
do in the meantime?

497
00:20:01,576 --> 00:20:03,916
Because literally what
you saw me do is as easy

498
00:20:03,916 --> 00:20:05,696
as running this utility.

499
00:20:05,696 --> 00:20:07,456
What are some of the
options you actually have?

500
00:20:07,736 --> 00:20:09,256
Well, there are also
some other plug-ins.

501
00:20:09,256 --> 00:20:11,796
So you have to start using a
certain browser to use these.

502
00:20:11,826 --> 00:20:13,536
But if you use Firefox
or are willing

503
00:20:13,536 --> 00:20:16,206
to download the free
browser called Firefox,

504
00:20:16,516 --> 00:20:18,556
there's another plug-in
called forced TLS.

505
00:20:19,076 --> 00:20:22,066
That's actually been
around for a long time.

506
00:20:22,126 --> 00:20:24,566
And this plug-in
essentially monitors

507
00:20:24,566 --> 00:20:26,786
in a good way all of
your web browsing.

508
00:20:26,786 --> 00:20:28,726
And any time that it
sees that your browser is

509
00:20:28,726 --> 00:20:33,256
about to request HTTP colon
slash slash for a known site

510
00:20:33,256 --> 00:20:35,246
like Facebook or Twitter,
one of these sites

511
00:20:35,376 --> 00:20:38,936
where they know they support
HTTPs, they just don't seem

512
00:20:38,936 --> 00:20:40,616
to be using it 100
percent of the time,

513
00:20:40,906 --> 00:20:44,456
this plug-in will intercept
that request, change it to HTTPS

514
00:20:44,456 --> 00:20:47,136
for you and then let the
request go along its way.

515
00:20:47,366 --> 00:20:50,496
So these slides will be on
the lectures page today,

516
00:20:50,496 --> 00:20:51,336
but there's an alternative.

517
00:20:51,366 --> 00:20:52,636
Pretty much the same
kind of plug-in.

518
00:20:52,636 --> 00:20:54,646
It's just a competitor
plug-in, but they're both free.

519
00:20:54,986 --> 00:20:59,226
HTTPS is everywhere from the
Electronic Frontier Foundation,

520
00:20:59,266 --> 00:21:01,846
which is an organization
that's all about privacy.

521
00:21:02,096 --> 00:21:04,286
And they, too, have put
out a plug-in for Firefox

522
00:21:04,616 --> 00:21:05,806
with which you can
mitigate this.

523
00:21:05,956 --> 00:21:08,306
Unfortunately it's
not the solution.

524
00:21:08,566 --> 00:21:09,906
It's not a fundamental solution.

525
00:21:09,906 --> 00:21:11,336
All you do is raise the bar.

526
00:21:11,336 --> 00:21:14,016
And this is actually a recurring
theme in security and certainly

527
00:21:14,016 --> 00:21:17,376
in security research, which
is between us, the good guys

528
00:21:17,376 --> 00:21:19,776
or most of us, the good guys
and the bad guys out there.

529
00:21:20,086 --> 00:21:23,396
All you can really do
is raise the bar higher

530
00:21:23,396 --> 00:21:24,336
and higher and higher.

531
00:21:24,476 --> 00:21:27,126
And it's pretty much going to be
a perpetual cat and mouse game,

532
00:21:27,126 --> 00:21:29,966
though, between good
guys and bad guys,

533
00:21:29,966 --> 00:21:33,496
whereby all we can do is push
the threat a little farther out,

534
00:21:33,496 --> 00:21:35,156
make it a little
harder for someone else

535
00:21:35,156 --> 00:21:36,406
to compromise our accounts.

536
00:21:36,436 --> 00:21:39,816
Case in point, even if you
use HTTPS, it doesn't matter.

537
00:21:39,816 --> 00:21:42,356
For years there have existed
what are generally called man

538
00:21:42,356 --> 00:21:45,226
in the middle attacks,
whereby if the idea

539
00:21:45,346 --> 00:21:47,946
of security behind SSL
is that I'm supposed

540
00:21:47,946 --> 00:21:50,846
to establish a secure
connection between me, point A,

541
00:21:51,046 --> 00:21:54,856
and say facebook.com, point
B, well, I can use HTTPS.

542
00:21:54,856 --> 00:21:58,546
But what if my laptop
is tricked into talking

543
00:21:58,546 --> 00:22:02,356
to not facebook.com, but a
middleman, a man in the middle,

544
00:22:02,356 --> 00:22:04,196
some other computer,
some other router,

545
00:22:04,196 --> 00:22:07,806
some person in this audience
who has enough technical savvy

546
00:22:07,806 --> 00:22:10,766
to either write or these
days just download a program

547
00:22:10,976 --> 00:22:13,846
that listens for
requests to facebook.com

548
00:22:14,066 --> 00:22:16,206
and responds quicker
than Facebook and says,

549
00:22:16,396 --> 00:22:19,256
I am facebook.com, my little
PC here, my little Mac.

550
00:22:19,646 --> 00:22:22,606
And so my laptop, because
it's requested facebook.com,

551
00:22:22,836 --> 00:22:25,246
it then goes essentially
to your IP address,

552
00:22:25,246 --> 00:22:27,086
really to your ethernet address.

553
00:22:27,376 --> 00:22:31,446
And you then reply to me
with an HTTPS response.

554
00:22:31,536 --> 00:22:33,956
So you know what, I am
actually using HTTPS.

555
00:22:33,956 --> 00:22:37,886
I have a secure connection,
but to who?

556
00:22:37,886 --> 00:22:40,926
Right? The bad guy then, you,
on your computer can proceed

557
00:22:40,926 --> 00:22:42,976
to finish the other
half of that connection

558
00:22:43,206 --> 00:22:44,686
and establish a secure
connection

559
00:22:44,686 --> 00:22:46,246
to Facebook on my behalf.

560
00:22:46,536 --> 00:22:49,076
And, frankly, it doesn't take
all that much savvy these days

561
00:22:49,076 --> 00:22:51,836
to write or, again, to
download a program whose purpose

562
00:22:51,836 --> 00:22:53,986
in life is to sit
between points A and B.

563
00:22:54,146 --> 00:22:57,606
And if I request home.PHP,
Facebook's home page, well,

564
00:22:57,606 --> 00:23:00,536
I look at that and I say, oh,
this victim wants home.PHP.

565
00:23:00,536 --> 00:23:02,896
Let me request that
of facebook.com.

566
00:23:03,086 --> 00:23:05,566
Let me get the response, then
forward the response to them.

567
00:23:05,566 --> 00:23:06,596
So you can have someone sitting

568
00:23:06,596 --> 00:23:09,086
in the middle watching
every message you send,

569
00:23:09,086 --> 00:23:11,936
every pope that you send,
every profile that you visit.

570
00:23:12,096 --> 00:23:13,216
If you have a man in the middle,

571
00:23:13,216 --> 00:23:15,206
you might very well still
have a secure connection,

572
00:23:15,586 --> 00:23:17,106
but to the wrong
person out there.

573
00:23:17,106 --> 00:23:19,086
And this one is harder
to mitigate.

574
00:23:19,296 --> 00:23:21,876
There are certain defenses
that require certain software

575
00:23:21,876 --> 00:23:23,216
or hardware on one's computer,

576
00:23:23,476 --> 00:23:26,836
but at least now there's
not a Firefox plug-in

577
00:23:27,156 --> 00:23:29,946
that makes it point and click
to actually wage this attack.

578
00:23:30,146 --> 00:23:32,226
But none of this stuff --
and this is the scary thing.

579
00:23:32,466 --> 00:23:34,306
None of this stuff is new.

580
00:23:34,306 --> 00:23:37,276
This existed since I was an
undergraduate on their campus,

581
00:23:37,526 --> 00:23:39,966
since as long as the web
has really been in vogue

582
00:23:39,966 --> 00:23:42,056
and SSL has been in use.

583
00:23:42,136 --> 00:23:44,126
It's really just a wake-up call.

584
00:23:44,166 --> 00:23:46,596
So what's really
a better solution?

585
00:23:46,816 --> 00:23:49,006
Frankly, as undergraduates,
you at least have the luxury

586
00:23:49,006 --> 00:23:51,686
of having access to one
of Harvard's VPN's server.

587
00:23:51,686 --> 00:23:54,996
So you might know that a VPN
is a virtual private network.

588
00:23:55,226 --> 00:23:57,796
This is just generally a
technology with which you

589
00:23:57,796 --> 00:24:00,756
on a laptop or desktop
can connect securely using

590
00:24:00,756 --> 00:24:03,426
encryption to, for instance,

591
00:24:03,426 --> 00:24:06,146
one of Harvard's servers
called their VPN server.

592
00:24:06,416 --> 00:24:12,296
And then you have then any
programs you use get routed not

593
00:24:12,406 --> 00:24:17,006
wirelessly in the clear, but
encrypted to FAS's VPN server,

594
00:24:17,186 --> 00:24:19,496
and from there is goes out
to the rest of the internet.

595
00:24:19,496 --> 00:24:20,726
So if you actually
want to use this,

596
00:24:20,726 --> 00:24:23,346
Harvard actually made this
easier a year or so ago.

597
00:24:23,346 --> 00:24:26,276
If you visit
VPN.FAS.Harvard.edu,

598
00:24:26,556 --> 00:24:28,186
frankly in the short
term if you are worried

599
00:24:28,186 --> 00:24:31,016
about some nosy friends
frankly trying to mess with you

600
00:24:31,016 --> 00:24:32,796
and your accounts,
this is probably

601
00:24:32,796 --> 00:24:34,726
of all the solutions
we just rattled off one

602
00:24:34,726 --> 00:24:37,696
of the most robust, because
it encrypts everything

603
00:24:37,736 --> 00:24:39,656
about your traffic,
not just special sites

604
00:24:39,656 --> 00:24:40,796
that does plug-in's know about.

605
00:24:41,076 --> 00:24:43,416
So if you go here and log
in with your user name,

606
00:24:43,446 --> 00:24:46,816
I think you have to type at
FAS or at FAS.Harvard.edu

607
00:24:46,816 --> 00:24:47,626
and then your password.

608
00:24:47,866 --> 00:24:48,686
Click log in.

609
00:24:48,906 --> 00:24:50,616
A little Java program will run

610
00:24:50,616 --> 00:24:53,336
that will then create a new
encrypted connection between you

611
00:24:53,526 --> 00:24:55,126
and Harvard's FAS servers.

612
00:24:55,546 --> 00:24:58,606
This should be much less
vulnerable to the man

613
00:24:58,606 --> 00:25:03,456
in the middle attack, because,
well, hereto it is possible

614
00:25:03,636 --> 00:25:05,346
that the bar will be
significantly raised.

615
00:25:05,346 --> 00:25:07,636
And you don't have to
worry about traffic leaking

616
00:25:07,636 --> 00:25:10,086
out because some plug-in
doesn't know about that website.

617
00:25:10,086 --> 00:25:11,916
And the other thing,
too, is most of you,

618
00:25:11,916 --> 00:25:13,406
if you visit Facebook, you know,

619
00:25:13,406 --> 00:25:15,246
if you don't have it
currently open in a tab,

620
00:25:15,526 --> 00:25:17,386
what you probably do is
something like this --

621
00:25:17,386 --> 00:25:21,266
if I'm at, let's just say,
google.com and I decide I want

622
00:25:21,266 --> 00:25:22,436
to go to Facebook, most

623
00:25:22,436 --> 00:25:26,546
of us probably do
not type HTTPS://www.

624
00:25:26,546 --> 00:25:29,966
; right? Most of us
type facebook.com

625
00:25:29,966 --> 00:25:30,846
or something like that.

626
00:25:31,146 --> 00:25:35,616
The problem is if I have not
typed HTTPS:// and hit enter,

627
00:25:35,876 --> 00:25:37,366
my browser, trying
to be helpful,

628
00:25:37,486 --> 00:25:38,776
assumes I want a website.

629
00:25:38,986 --> 00:25:42,726
90 something percent of the
web is probably not using SSL.

630
00:25:42,786 --> 00:25:44,056
Made that up, but
it's probably true.

631
00:25:44,356 --> 00:25:48,676
And so it's going to assume
I want http://facebook.com.

632
00:25:48,936 --> 00:25:51,216
So even if you have
been super diligent

633
00:25:51,216 --> 00:25:55,006
about always typing HTTPS and
using these tools and whatnot,

634
00:25:55,266 --> 00:25:57,016
you just compromised yourself,

635
00:25:57,016 --> 00:25:59,576
because the next time you hit
enter and that first time go

636
00:25:59,576 --> 00:26:03,846
to http:// you have just showed
your hand to the whole world.

637
00:26:03,846 --> 00:26:04,876
So if you have some person

638
00:26:04,876 --> 00:26:07,336
in the room nearby who's
been running a tool like that

639
00:26:07,336 --> 00:26:09,476
or sniffing your traffic,
bam, it doesn't matter

640
00:26:09,476 --> 00:26:11,816
if you are safe 99
percent of the time,

641
00:26:12,056 --> 00:26:16,726
it just takes one divulgence of
your cookie or this hand stamp

642
00:26:17,046 --> 00:26:19,606
for your account to
actually be compromised.

643
00:26:19,816 --> 00:26:22,406
So with that said --
oh, and as an aside,

644
00:26:22,406 --> 00:26:25,596
Facebook's password policy, in
fact, is not all that secure.

645
00:26:25,596 --> 00:26:27,556
I was able to create -- I
tried creating an account just

646
00:26:27,556 --> 00:26:28,686
to be funny using --

647
00:26:29,156 --> 00:26:32,476
was it President
Skroob's password of 12345.

648
00:26:32,606 --> 00:26:35,636
It turns out they don't
allow five number passwords,

649
00:26:35,636 --> 00:26:39,976
but they do allow six
number passwords even

650
00:26:39,976 --> 00:26:43,256
if it's completely just
a string of like 111111.

651
00:26:43,256 --> 00:26:43,486
All right.

652
00:26:43,816 --> 00:26:45,656
So please don't take control
of my Facebook account,

653
00:26:45,656 --> 00:26:48,286
because I'd love to use this
as an example in the future

654
00:26:48,326 --> 00:26:49,046
with the same accounts.

655
00:26:49,486 --> 00:26:49,826
All right.

656
00:26:50,306 --> 00:26:53,976
So any questions on this
scary Halloween story?

657
00:26:54,846 --> 00:26:55,926
Yes. Okay.

658
00:26:55,926 --> 00:26:57,476
You two gentlemen
with the laptops.

659
00:26:57,476 --> 00:27:00,676
>> Yes. So if you log out every
time, does that secure it at all

660
00:27:01,106 --> 00:27:07,406
or does it get sent every
time you try to activate it?

661
00:27:07,406 --> 00:27:07,856
>> Good question.

662
00:27:07,936 --> 00:27:11,056
If you logged out, are
you thereafter safe?

663
00:27:11,306 --> 00:27:12,016
It depends.

664
00:27:12,016 --> 00:27:13,426
Sometimes when you log out,

665
00:27:13,636 --> 00:27:15,566
the website does not
actually scrub the data

666
00:27:15,566 --> 00:27:16,356
on the server side.

667
00:27:16,356 --> 00:27:18,056
They don't actually
remove their copy

668
00:27:18,056 --> 00:27:19,606
of that cookie, that
unique number.

669
00:27:19,896 --> 00:27:23,166
And so even though your browser
might forget who you are,

670
00:27:23,416 --> 00:27:25,986
that doesn't mean the
cookie doesn't still exist.

671
00:27:25,986 --> 00:27:30,456
And if someone has been sniffing
your traffic, their Firebug --

672
00:27:30,736 --> 00:27:33,106
Firefox plug-in might
still work.

673
00:27:33,316 --> 00:27:34,966
So, in short, logging
out is good.

674
00:27:35,156 --> 00:27:37,336
You narrow the window
of opportunity

675
00:27:37,336 --> 00:27:38,606
by not staying logged in

676
00:27:38,856 --> 00:27:41,326
and just letting the website
continually contact the server,

677
00:27:41,586 --> 00:27:43,476
but it just raises
the bar slightly.

678
00:27:43,476 --> 00:27:45,216
It's a good habit, but
it's not a solution.

679
00:27:45,326 --> 00:27:45,416
Yeah?

680
00:27:46,516 --> 00:27:50,646
[ Inaudible audience question ]

681
00:27:51,146 --> 00:27:52,196
>> It's a good question.

682
00:27:52,196 --> 00:27:53,576
What do these guys
propose to do?

683
00:27:53,576 --> 00:27:56,266
So the development of this
program really was meant

684
00:27:56,266 --> 00:27:57,116
with the best intentions.

685
00:27:57,116 --> 00:28:00,056
And this always sparks religious
debates over whether or not you,

686
00:28:00,056 --> 00:28:02,476
as a researcher or academic
or just good citizen,

687
00:28:02,646 --> 00:28:05,546
should actually tell the world
when you find vulnerabilities

688
00:28:05,546 --> 00:28:07,426
in products or in
software programs,

689
00:28:07,716 --> 00:28:08,926
because it's a two edge sword.

690
00:28:08,926 --> 00:28:11,386
On the one hand you educate
the good guys so they can shore

691
00:28:11,386 --> 00:28:13,576
up their defenses and
protect against these threats.

692
00:28:13,796 --> 00:28:16,216
But the downside of telling the
world about a vulnerability is

693
00:28:16,216 --> 00:28:19,376
that now all the bad guys know.

694
00:28:19,376 --> 00:28:21,246
I mean, I'm generally of
the opinion that you might

695
00:28:21,246 --> 00:28:22,476
as well share this information,

696
00:28:22,476 --> 00:28:24,726
because odds are the
bad guys probably know.

697
00:28:24,726 --> 00:28:27,016
And you know what they're
not doing is telling you.

698
00:28:27,256 --> 00:28:29,306
Right. So really you're
not defending against --

699
00:28:29,336 --> 00:28:31,646
you're not protecting
yourself all that much more.

700
00:28:31,646 --> 00:28:33,736
So generally getting
people mindful

701
00:28:33,736 --> 00:28:35,826
of these issues is likely
to spur them to action.

702
00:28:36,026 --> 00:28:39,056
So one of the things that these
fellow recommends is really

703
00:28:39,056 --> 00:28:43,226
that certainly all websites that
exchange any kind of credentials

704
00:28:43,226 --> 00:28:44,726
by a user name and password

705
00:28:44,726 --> 00:28:47,276
or subsequent cookies
run them over HTTPS.

706
00:28:47,446 --> 00:28:50,716
In fact, Gmail was known
this past summer or so

707
00:28:50,916 --> 00:28:54,116
to finally move all Gmail
servers by default to SSL.

708
00:28:54,326 --> 00:28:56,006
One of the common
concerns with SSL is

709
00:28:56,006 --> 00:28:57,456
that it takes more
CPU cycles.

710
00:28:57,456 --> 00:28:58,516
Therefore, it takes
more servers.

711
00:28:58,516 --> 00:28:59,546
Therefore, it takes more money.

712
00:28:59,826 --> 00:29:01,936
But we actually linked on
the lectures page today

713
00:29:02,206 --> 00:29:05,496
to a write-up by a google
researcher who explains

714
00:29:05,496 --> 00:29:09,436
that it only costs google like
two percent more in CPU cycles

715
00:29:09,436 --> 00:29:12,226
to enable SSL for all
of their e-mail servers.

716
00:29:12,606 --> 00:29:13,796
And so that's pretty compelling.

717
00:29:13,796 --> 00:29:15,506
And they had to do some
tweaking and whatnot,

718
00:29:15,586 --> 00:29:16,976
but there are certainly
some lessons there

719
00:29:16,976 --> 00:29:17,846
that anyone can use.

720
00:29:18,146 --> 00:29:20,466
So, frankly, I'd be
surprised if Facebook and some

721
00:29:20,466 --> 00:29:22,766
of these sites just
don't turn on SSL soon.

722
00:29:22,986 --> 00:29:25,616
Frankly, there exists special
products whose sole purpose

723
00:29:25,616 --> 00:29:29,056
in life is to sit on a network,
handle all the SSL traffic

724
00:29:29,246 --> 00:29:31,886
and then pass the unencrypted
requests off to the web servers.

725
00:29:31,886 --> 00:29:32,886
So there are plenty
of solutions.

726
00:29:32,886 --> 00:29:32,976
Yeah?

727
00:29:33,516 --> 00:29:40,406
[ Inaudible audience comment ]

728
00:29:40,906 --> 00:29:43,426
>> So most likely correct.

729
00:29:43,426 --> 00:29:45,896
So Firesheep works if your
ethernet card can be put

730
00:29:45,896 --> 00:29:48,686
into promiscuous mode,
which is usually the case.

731
00:29:48,686 --> 00:29:50,626
Certainly you can do
it on most modern Macs.

732
00:29:50,626 --> 00:29:52,816
You can do it on a lot of PCs
depending on the hardware,

733
00:29:53,046 --> 00:29:54,936
but it might very well
depend on what you have.

734
00:29:54,936 --> 00:29:55,946
But it is taking
advantage of that, yeah.

735
00:29:56,516 --> 00:30:20,136
[ Inaudible audience comment ]

736
00:30:20,636 --> 00:30:23,146
>> So, yes, if you have
physical access to the machine,

737
00:30:23,146 --> 00:30:25,246
even if it's using
SSL, you are not --

738
00:30:25,246 --> 00:30:28,256
it's not being encrypted
at the very beginning.

739
00:30:28,256 --> 00:30:30,086
Your data is going
to be unencrypted

740
00:30:30,086 --> 00:30:31,286
in some form in your laptop.

741
00:30:31,466 --> 00:30:32,506
So that's just generally true.

742
00:30:32,616 --> 00:30:34,336
Any time you have physical
access to a machine,

743
00:30:34,336 --> 00:30:36,136
you are pretty much screwed
when it comes to security,

744
00:30:36,376 --> 00:30:37,636
because there are so many ways

745
00:30:37,636 --> 00:30:39,426
in which the information
can be divulged.

746
00:30:39,426 --> 00:30:41,966
So long story short, yes, this
does not solve the problem,

747
00:30:42,176 --> 00:30:44,266
but it definitely
gives us time to kind

748
00:30:44,266 --> 00:30:46,126
of re-engineer a
better solution to this.

749
00:30:46,126 --> 00:30:48,896
And the problem, too, is
that there are known flaws

750
00:30:48,896 --> 00:30:51,126
in like the wireless
protocols the world uses,

751
00:30:51,166 --> 00:30:53,506
the SSL protocols
that the world uses.

752
00:30:53,736 --> 00:30:54,936
It's a very imperfect world.

753
00:30:54,936 --> 00:30:56,736
So really this begs a
bigger picture question.

754
00:30:56,976 --> 00:30:58,186
You know, what really
can you do?

755
00:30:58,186 --> 00:30:59,436
It might not be a huge deal

756
00:30:59,436 --> 00:31:01,116
if your Facebook
account is compromised.

757
00:31:01,116 --> 00:31:02,356
It might be a little
bit embarrassing.

758
00:31:02,356 --> 00:31:03,806
It's kind of more problematic

759
00:31:03,806 --> 00:31:05,516
if your bank accounts
are compromised

760
00:31:05,516 --> 00:31:07,586
or super sensitive
information is compromised.

761
00:31:07,876 --> 00:31:08,826
So what can you really do?

762
00:31:08,826 --> 00:31:10,166
Well, just as an
aside, I think one

763
00:31:10,166 --> 00:31:11,756
of the most compelling
technologies

764
00:31:12,006 --> 00:31:13,166
that some sites have started

765
00:31:13,166 --> 00:31:14,606
to implement is what's
generally known

766
00:31:14,606 --> 00:31:16,146
as two factor authentication.

767
00:31:16,396 --> 00:31:17,896
This, too, has been
around for years.

768
00:31:17,936 --> 00:31:20,856
It's just no one offers
it really or really none

769
00:31:20,856 --> 00:31:22,096
of us really demand it.

770
00:31:22,146 --> 00:31:25,466
Two factor authentication is
this technology that E*TRADE

771
00:31:25,466 --> 00:31:26,766
and some other brokers use

772
00:31:26,766 --> 00:31:28,816
where you get this
little electronic device

773
00:31:28,866 --> 00:31:31,476
that has a little LED
screen with four or five

774
00:31:31,476 --> 00:31:34,116
or six digital numbers on
it and usually a button.

775
00:31:34,376 --> 00:31:37,696
And those numbers change
every several seconds

776
00:31:37,696 --> 00:31:38,676
or every several minutes.

777
00:31:38,946 --> 00:31:40,906
But the device has been
designed in such a way

778
00:31:40,906 --> 00:31:44,056
that it's synchronized
with your E*TRADE account.

779
00:31:44,476 --> 00:31:47,106
So what happens now is
when you go to E*TRADE.com,

780
00:31:47,106 --> 00:31:49,836
log in with your user name and
password, that's not enough.

781
00:31:49,836 --> 00:31:50,906
Once you have done
that, they say,

782
00:31:50,946 --> 00:31:53,306
what's the secret number that's
currently on your device?

783
00:31:53,626 --> 00:31:55,626
And you have to provide
that same number.

784
00:31:55,796 --> 00:31:58,766
Otherwise, they assume this is
just a bad guy who's stolen your

785
00:31:58,766 --> 00:32:00,946
user name and password or
who's guessing your user name

786
00:32:00,946 --> 00:32:03,276
and password, but doesn't
have physical possession.

787
00:32:03,516 --> 00:32:06,876
So two factor authentication,
frankly, it's hugely compelling

788
00:32:07,066 --> 00:32:09,446
and that it requires that
to authenticate yourself,

789
00:32:09,446 --> 00:32:12,386
to prove you are who you are,
you need to know something

790
00:32:12,456 --> 00:32:13,956
like your password and you have

791
00:32:13,956 --> 00:32:15,746
to have something
like your key fob.

792
00:32:16,106 --> 00:32:18,156
But thereto someone could
certainly, you know,

793
00:32:18,156 --> 00:32:21,016
beat the password out of me
and just steal the key fob be.

794
00:32:21,016 --> 00:32:22,596
And then they would have
two of those factors,

795
00:32:22,966 --> 00:32:23,816
but it's a lot harder.

796
00:32:23,816 --> 00:32:26,256
And thereto they need physical
access to me, the human,

797
00:32:26,256 --> 00:32:28,886
to actually track that
device, which raises the bar.

798
00:32:28,886 --> 00:32:32,066
I'm not now exposed to billions
of humans on the internet.

799
00:32:32,346 --> 00:32:34,776
I'm only exposed to the people
in this room at the moment

800
00:32:34,776 --> 00:32:36,096
with my little secure key fob.

801
00:32:36,406 --> 00:32:37,386
But there's other
approaches, too.

802
00:32:37,386 --> 00:32:38,366
You don't need special hardware.

803
00:32:38,366 --> 00:32:41,556
Bank of America has a neat trick
whereby if you have a phone

804
00:32:41,556 --> 00:32:43,656
that supports text
messages, when you try to log

805
00:32:43,656 --> 00:32:45,296
into their website, if
I have turned this on,

806
00:32:45,536 --> 00:32:47,516
you have to provide your
user name, your password.

807
00:32:47,516 --> 00:32:49,086
And then they send
you a text message

808
00:32:49,316 --> 00:32:50,876
that is this random number.

809
00:32:51,086 --> 00:32:54,066
The idea being that unless
someone somehow intercepting my

810
00:32:54,066 --> 00:32:56,666
wireless phone traffic,
only I am going

811
00:32:56,666 --> 00:32:58,206
to receive that text message.

812
00:32:58,366 --> 00:33:01,626
So now I can type that temporary
numeric code into the website.

813
00:33:01,826 --> 00:33:02,776
But there, too, you know,

814
00:33:02,776 --> 00:33:05,126
our wireless networks certainly
have vulnerabilities in them.

815
00:33:05,366 --> 00:33:06,526
But, again, you raise the bar.

816
00:33:06,526 --> 00:33:08,086
And one of the best
defenses frankly

817
00:33:08,086 --> 00:33:10,396
against the security
issues is most people

818
00:33:10,396 --> 00:33:12,386
in the world don't care
about what you're doing

819
00:33:12,386 --> 00:33:13,586
with your Facebook account

820
00:33:13,586 --> 00:33:16,526
or don't care what little old
you is doing on the internet

821
00:33:16,526 --> 00:33:17,526
with your instant messages.

822
00:33:17,806 --> 00:33:19,796
It becomes a problem like it
has the last couple of days

823
00:33:19,796 --> 00:33:22,026
on the campus we all
know a lot of people

824
00:33:22,026 --> 00:33:24,396
who wouldn't get some sort of
amusement out of, you know,

825
00:33:24,396 --> 00:33:27,466
embarrassing you by logging into
your Facebook account or any one

826
00:33:27,466 --> 00:33:28,286
of these other accounts.

827
00:33:28,526 --> 00:33:30,196
So when you actually
have credible threats,

828
00:33:30,196 --> 00:33:33,176
even if it's just playful, then
you need to worry a bit more.

829
00:33:33,176 --> 00:33:35,436
And even on the internet
it's not compelling

830
00:33:35,436 --> 00:33:38,746
to get my little Gmail account
or my little Facebook account,

831
00:33:38,956 --> 00:33:42,566
but to get mine and 900 other
thousand users accounts.

832
00:33:42,756 --> 00:33:45,306
Because once you have access
to a million Facebook accounts,

833
00:33:45,596 --> 00:33:47,936
you can send a lot of spam,
at least for a few minutes

834
00:33:47,936 --> 00:33:49,966
or hours before you're
detected and shut down.

835
00:33:50,236 --> 00:33:52,586
But that's millions more spams
than you might have been able

836
00:33:53,096 --> 00:33:54,546
to send out otherwise.

837
00:33:54,546 --> 00:33:56,746
So it's when your adversary
cares about who you are

838
00:33:57,066 --> 00:33:57,956
or doesn't care,

839
00:33:57,956 --> 00:34:00,256
which unfortunately is the
complete set of possibilities,

840
00:34:00,586 --> 00:34:02,516
that you are really
at risk for something.

841
00:34:02,686 --> 00:34:05,416
So with that said,
how does this work?

842
00:34:05,416 --> 00:34:06,686
How do we defend against it?

843
00:34:06,686 --> 00:34:09,316
And how does it relate
PF7 and beyond?

844
00:34:09,316 --> 00:34:10,796
So you have a couple
of handouts today.

845
00:34:11,036 --> 00:34:13,376
These are really meant to
be cheat sheets for some

846
00:34:13,376 --> 00:34:15,416
of the languages and
technologies we're using.

847
00:34:15,416 --> 00:34:16,276
They're not exhausted.

848
00:34:16,526 --> 00:34:19,096
And what you will find on the
internet is that there's a lot

849
00:34:19,096 --> 00:34:22,406
of differences when it comes
to syntax, capitalization.

850
00:34:22,666 --> 00:34:24,926
So try to see through the
messiness and turn to me

851
00:34:24,926 --> 00:34:27,176
or the teaching fellows
or help.CS50.net

852
00:34:27,176 --> 00:34:28,436
if there's ever any ambiguity.

853
00:34:28,696 --> 00:34:32,576
But we pulled out some decent
PDFs that some nice people made

854
00:34:32,576 --> 00:34:37,656
that offer some common tags for
HTML, some common properties

855
00:34:37,876 --> 00:34:40,916
for CSS, some common
functions and commands

856
00:34:40,916 --> 00:34:42,076
for something called mySQL,

857
00:34:42,116 --> 00:34:44,456
which is a data base server
we'll start to talk about today

858
00:34:44,696 --> 00:34:46,096
and some common functions
for PHP.

859
00:34:46,096 --> 00:34:48,186
This is not at all exhausted.

860
00:34:48,186 --> 00:34:50,906
This is meant to be the sort of
thing you just keep on your desk

861
00:34:50,906 --> 00:34:52,966
as you are coding, and it
might be a quick answer

862
00:34:52,966 --> 00:34:54,216
or you might have
to turn to google.

863
00:34:54,516 --> 00:34:57,736
But for those of you who
have never coded HTML before,

864
00:34:57,736 --> 00:35:00,546
this is actually a
decent little tutorial

865
00:35:00,546 --> 00:35:02,356
to at least read or
skim through once.

866
00:35:02,496 --> 00:35:04,866
So all of these are linked
on the course's website, too.

867
00:35:05,256 --> 00:35:08,326
And then, finally, I want to
draw your attention to this.

868
00:35:08,516 --> 00:35:10,966
So for the handout for Monday
was about the final project.

869
00:35:11,226 --> 00:35:13,646
And recall that there were
these links on the front page

870
00:35:13,676 --> 00:35:16,946
that recommend that you look
at some of these resources just

871
00:35:16,946 --> 00:35:18,326
to entice you with this.

872
00:35:18,776 --> 00:35:22,356
Notice that, one, any of the
campus related apps we talked

873
00:35:22,356 --> 00:35:25,416
about in the course, whether
it's events or courses or tweets

874
00:35:25,416 --> 00:35:28,646
or news or maps, all of
them have what we call APIs,

875
00:35:28,646 --> 00:35:32,626
application programming
interfaces, whereby if you don't

876
00:35:32,876 --> 00:35:36,086
like the way we've implemented
the core shopping tool,

877
00:35:36,086 --> 00:35:38,206
if you don't like the way we're
presenting the shuttle data,

878
00:35:38,406 --> 00:35:41,156
well, that's okay, because we
can give you all of the data

879
00:35:41,306 --> 00:35:44,466
in raw format so that you can
then represent it to the world

880
00:35:44,466 --> 00:35:47,786
in a website, in a C
program, in an iPhone app,

881
00:35:47,786 --> 00:35:49,386
in an Android app,
in a Blackberry app,

882
00:35:49,386 --> 00:35:52,236
any kind of application you
want for your final project.

883
00:35:52,236 --> 00:35:53,836
So realize that these
are all available.

884
00:35:53,866 --> 00:35:56,636
One of the most popular APIs to
use for final projects, frankly,

885
00:35:56,686 --> 00:36:00,036
is the Harvard food
API whereby we screen

886
00:36:00,036 --> 00:36:02,076
and scrape Harvard dinings
services website, which is,

887
00:36:02,076 --> 00:36:04,016
frankly, a little hard to
navigate when you just want

888
00:36:04,056 --> 00:36:04,886
to know what's for lunch.

889
00:36:04,886 --> 00:36:07,326
And we then give you all
of the data in raw format

890
00:36:07,366 --> 00:36:09,666
for breakfast, lunch or
dinner on any given day.

891
00:36:09,666 --> 00:36:11,256
You can search based on dates.

892
00:36:11,506 --> 00:36:15,206
We've also put on the course's
website and on this sheet

893
00:36:15,206 --> 00:36:17,666
from Monday a list of
what we call fun APIs.

894
00:36:18,046 --> 00:36:21,656
There's a lot of third party
websites and companies out there

895
00:36:21,866 --> 00:36:24,596
that provide really neat
functionality and/or data

896
00:36:24,596 --> 00:36:25,136
these days.

897
00:36:25,136 --> 00:36:25,956
And this is frankly

898
00:36:25,956 --> 00:36:28,116
where programming is really
getting fun and exciting,

899
00:36:28,116 --> 00:36:31,186
at least for me these
days, whereby it's getting

900
00:36:31,186 --> 00:36:35,206
so much easier to make cool
things relatively easy.

901
00:36:35,206 --> 00:36:37,706
Case in point, the Shuttleboy
text messaging service

902
00:36:37,706 --> 00:36:40,426
that I demoed a few weeks
ago I don't really know much

903
00:36:40,426 --> 00:36:41,706
about how cell phones work.

904
00:36:41,706 --> 00:36:42,946
I certainly don't have access

905
00:36:42,996 --> 00:36:44,736
to like Verizon's
equipment and all of that.

906
00:36:45,036 --> 00:36:48,846
But using a free or ad supported
service was I initially able a

907
00:36:48,846 --> 00:36:50,116
couple of years ago to implement

908
00:36:50,116 --> 00:36:54,536
that program whereby I made a
website, a PHP based website

909
00:36:54,806 --> 00:36:58,026
that listens for web requests
for an origin and a destination.

910
00:36:58,136 --> 00:37:00,536
And then I just spit out
the response after I look

911
00:37:00,536 --> 00:37:03,106
up in the data base for shuttle
boy when the next shuttles are

912
00:37:03,106 --> 00:37:06,366
for point A and point B. And
then this third party company,

913
00:37:06,366 --> 00:37:10,046
thanks to their API,
routes my website's response

914
00:37:10,266 --> 00:37:12,156
to your cell phone
whether you're on Sprint

915
00:37:12,156 --> 00:37:13,476
or T-Mobile or Horizon.

916
00:37:13,476 --> 00:37:15,096
So it's really quite
cool what you can do.

917
00:37:15,346 --> 00:37:17,916
Google calendar has an API
whereby you can get all

918
00:37:17,916 --> 00:37:19,266
of the data from
a google calendar.

919
00:37:19,266 --> 00:37:20,956
You can put data into
a google calendar.

920
00:37:21,226 --> 00:37:23,796
I'll google Checkout and Paypal
if you want to create a website

921
00:37:24,036 --> 00:37:25,356
that actually charge
people money.

922
00:37:25,356 --> 00:37:27,556
Frankly, I always thought
this was a missed opportunity.

923
00:37:27,556 --> 00:37:30,176
The Quincy Grille, bless
their heart, has been popular

924
00:37:30,176 --> 00:37:32,616
for years, apparently still
takes orders by a Gchat,

925
00:37:32,856 --> 00:37:34,716
which is actually
pretty clever, I think,

926
00:37:34,716 --> 00:37:36,206
to actually have a
little window open there.

927
00:37:36,466 --> 00:37:38,426
But, just think, you
can allow people to pay

928
00:37:38,426 --> 00:37:40,076
for food with credit card.

929
00:37:40,076 --> 00:37:40,996
You can have them order it.

930
00:37:40,996 --> 00:37:42,116
You can maintain logs.

931
00:37:42,116 --> 00:37:44,456
You can know exactly how much
food is going in and goes out.

932
00:37:44,456 --> 00:37:47,626
I think this is, frankly, a
really neat fine project idea.

933
00:37:47,626 --> 00:37:48,536
Foho [assumed spelling],
as well,

934
00:37:48,766 --> 00:37:50,476
apparently does it in person.

935
00:37:50,476 --> 00:37:51,926
You have to visit the desk.

936
00:37:51,926 --> 00:37:53,076
And I would like a hot dog.

937
00:37:53,396 --> 00:37:55,236
We have computers that
can tell the people

938
00:37:55,276 --> 00:37:56,686
that you want a hot
dog these days.

939
00:37:56,966 --> 00:37:58,716
And they can charge
you for it, too.

940
00:37:59,286 --> 00:38:02,056
Google Finance, Yahoo Finance
we'll look at this week.

941
00:38:02,346 --> 00:38:05,826
Google charts, if you want to
create interesting visuals.

942
00:38:06,196 --> 00:38:07,986
What else here?

943
00:38:07,986 --> 00:38:08,516
A few more.

944
00:38:08,516 --> 00:38:12,436
Anything related to maps, mobile
phones, news, I mean, profanity.

945
00:38:12,686 --> 00:38:15,296
We have accounts with
a provider if you want

946
00:38:15,296 --> 00:38:18,106
to write an application like I
saw you at Harvard and you want

947
00:38:18,106 --> 00:38:21,376
to filter out the crazy talk,
at least with high probability,

948
00:38:21,376 --> 00:38:23,836
you can use profanity
type filters and automate

949
00:38:23,836 --> 00:38:25,286
that process and not have

950
00:38:25,326 --> 00:38:28,696
to spend human hours actually
regulating what your classmates

951
00:38:28,696 --> 00:38:29,696
are posting to sites.

952
00:38:29,696 --> 00:38:30,776
So do follow those links.

953
00:38:30,816 --> 00:38:33,126
There's some really
juicy stuff there.

954
00:38:33,126 --> 00:38:35,926
So let's actually start to give
ourselves the framework in which

955
00:38:35,926 --> 00:38:37,156
to use these kinds of tools.

956
00:38:37,156 --> 00:38:39,826
So HTML is a mark-up language.

957
00:38:39,826 --> 00:38:41,286
It is a language
that's not really

958
00:38:41,286 --> 00:38:42,616
about programming and logic.

959
00:38:42,616 --> 00:38:45,446
It's really about structure
and esthetics and display.

960
00:38:45,706 --> 00:38:48,426
We have the open bracket HTML
tag, which tells the browser,

961
00:38:48,486 --> 00:38:49,536
here comes a web page.

962
00:38:49,536 --> 00:38:51,076
We have the head tag
and the title tag

963
00:38:51,076 --> 00:38:52,876
that says here comes
the site of the page

964
00:38:52,876 --> 00:38:53,736
in the so-called header.

965
00:38:54,006 --> 00:38:55,456
And we have the body
tag which says,

966
00:38:55,456 --> 00:38:56,826
here comes the body
of this page.

967
00:38:56,826 --> 00:38:59,686
And we saw briefly on
Monday things like the tag

968
00:38:59,686 --> 00:39:01,216
for anchor for hyper links.

969
00:39:01,476 --> 00:39:03,866
We saw the image
tag, IMG for images.

970
00:39:03,866 --> 00:39:05,306
And can you see on
this cheat sheet

971
00:39:05,526 --> 00:39:07,866
that we really just scratched
the surface on Monday.

972
00:39:08,166 --> 00:39:10,396
But anything you've
seen on a website today,

973
00:39:10,666 --> 00:39:11,976
you can implement yourself.

974
00:39:11,976 --> 00:39:15,316
And I can't emphasize
enough utility, again,

975
00:39:15,316 --> 00:39:17,436
of actually learning
from existing examples.

976
00:39:17,436 --> 00:39:18,586
If you want to know,
for instance,

977
00:39:18,796 --> 00:39:22,586
how Facebook put this table of
first name, last name over there

978
00:39:22,586 --> 00:39:24,726
and how did they put that
picture over there, well,

979
00:39:24,726 --> 00:39:27,956
you can certainly go to the
view menu and go to page source

980
00:39:28,206 --> 00:39:30,766
and you can see all
of the raw HTML

981
00:39:30,766 --> 00:39:32,046
that implements this website.

982
00:39:32,266 --> 00:39:33,616
But generally it's pretty messy.

983
00:39:33,616 --> 00:39:35,636
So it looks like very bad style.

984
00:39:35,636 --> 00:39:36,756
Nothing is really indented.

985
00:39:36,756 --> 00:39:38,826
There's no comments, but
that's to be expected.

986
00:39:38,826 --> 00:39:40,816
If every byte costs
Facebook money,

987
00:39:41,076 --> 00:39:42,526
you don't necessarily
want to send all

988
00:39:42,526 --> 00:39:44,726
of that additional
formatting to the browser.

989
00:39:44,976 --> 00:39:47,726
But realize that there are
some really wonderful tools.

990
00:39:47,726 --> 00:39:49,546
And we've linked these
on the course's website

991
00:39:49,546 --> 00:39:52,236
and we'll mention them
in problem set seven.

992
00:39:52,706 --> 00:39:53,776
The one I think I showed

993
00:39:53,776 --> 00:39:56,316
on Monday is called Firebug
whereby you can visit any

994
00:39:56,316 --> 00:39:58,936
website like facebook.com,
and then if you want

995
00:39:58,936 --> 00:40:01,706
to see how they implemented
this word sign-up,

996
00:40:01,706 --> 00:40:04,226
how did they put this text way
over there and not all the way

997
00:40:04,226 --> 00:40:06,816
on the left, well, you can
right click or control click it,

998
00:40:07,016 --> 00:40:10,546
choose inspect element and bam,
this plug-in called Firebug,

999
00:40:10,876 --> 00:40:13,206
which is kind of a debugging
tool, shows you exactly

1000
00:40:13,206 --> 00:40:15,416
where in the HTML they have laid

1001
00:40:15,416 --> 00:40:17,106
out that particular
text or image.

1002
00:40:17,136 --> 00:40:20,336
It's so nice for actually boot
strapping yourself to nutrition

1003
00:40:20,546 --> 00:40:22,716
and understanding how
the web currently works.

1004
00:40:23,016 --> 00:40:24,096
So that was HTML that.

1005
00:40:24,096 --> 00:40:25,196
We talked briefly about CSS.

1006
00:40:25,196 --> 00:40:28,206
And it was requested we
change the font of some text,

1007
00:40:28,476 --> 00:40:29,896
the font size of some text.

1008
00:40:30,126 --> 00:40:32,476
I needed to align things
in the center as opposed

1009
00:40:32,476 --> 00:40:33,606
to being flush on the left.

1010
00:40:33,806 --> 00:40:35,726
And so we use this
language called CSS,

1011
00:40:35,726 --> 00:40:37,116
called cascading style sheets.

1012
00:40:37,396 --> 00:40:39,916
And thus far we've seen
it really in one context.

1013
00:40:39,916 --> 00:40:41,466
We had a style attribute.

1014
00:40:41,546 --> 00:40:44,596
You recall that an attribute
modifies the behavior of a tag.

1015
00:40:44,596 --> 00:40:47,616
And we said style equals quote,
unquote, and then we had a list

1016
00:40:47,616 --> 00:40:51,546
of properties: Color,
colon, white, semicolon,

1017
00:40:51,546 --> 00:40:55,566
and then font family, colon, san
serif, semicolon and the like.

1018
00:40:55,566 --> 00:40:57,426
And for more such
properties, again,

1019
00:40:57,426 --> 00:41:00,476
you'll have such resources
as the little cheat sheets

1020
00:41:00,556 --> 00:41:02,266
from today and google
is your friend.

1021
00:41:02,266 --> 00:41:04,616
And we have enumerable resources
on the course's website.

1022
00:41:04,856 --> 00:41:07,736
But everything we did on
Monday was static; right?

1023
00:41:07,736 --> 00:41:08,426
We wrote it.

1024
00:41:08,606 --> 00:41:09,356
We saved it.

1025
00:41:09,356 --> 00:41:10,546
We pulled it up in a browser.

1026
00:41:10,546 --> 00:41:11,966
And it never changed on me.

1027
00:41:11,966 --> 00:41:14,816
If I kept reloading that
hamster, I saw the same hamster

1028
00:41:14,816 --> 00:41:16,976
and the same text again
and again and again.

1029
00:41:17,236 --> 00:41:19,376
And this is very much web 1.0.

1030
00:41:19,376 --> 00:41:22,046
So it's stupid buzz
words, web 1.0, web 2.0.

1031
00:41:22,266 --> 00:41:24,936
Web 2.0 is just a monocure that
the world gave to this idea

1032
00:41:24,936 --> 00:41:27,276
of websites taking more
and more user input.

1033
00:41:27,276 --> 00:41:29,306
So you have websites
like Facebook and YouTube

1034
00:41:29,306 --> 00:41:31,636
and Flicker being
part of web 2.0

1035
00:41:31,796 --> 00:41:34,136
where it's not just Mark
Zuckerberg and one guy

1036
00:41:34,136 --> 00:41:35,426
at Flicker and one person

1037
00:41:35,426 --> 00:41:38,036
at this other company making
content for the world to see.

1038
00:41:38,276 --> 00:41:40,066
It's those people
making a website

1039
00:41:40,276 --> 00:41:43,896
with which you people can make
your own websites and profiles

1040
00:41:43,896 --> 00:41:47,146
and the like which then
constitute the content

1041
00:41:47,586 --> 00:41:48,096
of that page.

1042
00:41:48,096 --> 00:41:49,286
It's a brilliant business model.

1043
00:41:49,286 --> 00:41:51,046
Right. You build the
infrastructure, the framework.

1044
00:41:51,046 --> 00:41:53,126
And then you let everyone
else do all the hard

1045
00:41:53,126 --> 00:41:54,126
and the interesting work.

1046
00:41:54,126 --> 00:41:56,716
And that's very much the
phase we are currently in.

1047
00:41:56,716 --> 00:41:59,856
So we don't, though, have
the ability yet like Mark did

1048
00:41:59,856 --> 00:42:01,266
with initially making Facebook

1049
00:42:01,456 --> 00:42:03,106
to actually code
things dynamically.

1050
00:42:03,106 --> 00:42:04,756
I could make a site that
looks like Facebook.

1051
00:42:04,986 --> 00:42:07,656
I could hard code a profile
for myself with happy cat

1052
00:42:07,656 --> 00:42:10,156
in the top left corner
and my name David Malan

1053
00:42:10,156 --> 00:42:12,706
in the top middle of the page,
but it's going to never change

1054
00:42:12,706 --> 00:42:13,896
if you reload it, reload it.

1055
00:42:13,896 --> 00:42:16,316
The only way my profile is
going to change is if I SSH

1056
00:42:16,316 --> 00:42:18,296
to the cloud or if I use SFTP

1057
00:42:18,296 --> 00:42:20,996
and enter a text
file and save it.

1058
00:42:20,996 --> 00:42:22,806
And this, again, is not
what you're all doing

1059
00:42:22,806 --> 00:42:23,866
on Facebook these days.

1060
00:42:23,866 --> 00:42:25,796
You're using the
web to edit the web,

1061
00:42:26,126 --> 00:42:28,646
because all of the
HTML being spit

1062
00:42:28,646 --> 00:42:34,126
out by Facebook is not dot HTML
files, but it's dot PHP files.

1063
00:42:34,126 --> 00:42:36,496
On other websites it's
not necessarily PHP.

1064
00:42:36,496 --> 00:42:40,276
It might be Python or Ruby or
C plus plus or C Sharp or VB.

1065
00:42:40,276 --> 00:42:44,216
Any number of languages
can generate HTML.

1066
00:42:44,496 --> 00:42:48,956
So whereas Monday it was
about creating HTML by hand,

1067
00:42:49,246 --> 00:42:53,256
today it will by creating HTML
dynamically, by programming.

1068
00:42:53,256 --> 00:42:55,276
And we'll come circle now
with our programming tricks,

1069
00:42:55,616 --> 00:42:58,206
but first a five-minute
Halloween song break.

1070
00:42:58,676 --> 00:43:06,266
[music] We're not done yet.

1071
00:43:06,686 --> 00:43:07,406
All right.

1072
00:43:08,706 --> 00:43:09,376
So we are back.

1073
00:43:09,686 --> 00:43:11,326
Let's actually go
ahead and sniff some

1074
00:43:11,326 --> 00:43:14,266
of my own Firefox
traffic to actually see

1075
00:43:14,436 --> 00:43:16,836
in what way these accounts
are being compromised

1076
00:43:16,876 --> 00:43:20,186
and then how we can actually use
the same mechanism of cookies

1077
00:43:20,426 --> 00:43:22,616
for actually good and
compelling reasons.

1078
00:43:22,616 --> 00:43:25,106
So I'm going to go ahead and
pull up Firefox again here.

1079
00:43:25,416 --> 00:43:28,766
I've already pulled up Firebug,
which is a debugging utility.

1080
00:43:28,766 --> 00:43:31,496
Some spirited DGB, but
much more web centric.

1081
00:43:31,496 --> 00:43:32,726
It's got different
types of features.

1082
00:43:32,726 --> 00:43:34,916
Some of them are just esthetic
like letting you see things,

1083
00:43:35,156 --> 00:43:38,126
but I'm going to go specifically
to the net tab, which is going

1084
00:43:38,126 --> 00:43:39,706
to show me all of
my network traffic.

1085
00:43:40,036 --> 00:43:41,586
Realize that what
I showed you before

1086
00:43:41,586 --> 00:43:43,836
with the thing called
Wireshark where we saw all

1087
00:43:43,836 --> 00:43:46,556
of the data flowing
across the screen in rows,

1088
00:43:46,876 --> 00:43:49,656
that's a lower level
packet sniffer that shows me

1089
00:43:49,656 --> 00:43:52,706
that this is related to HTTP,
this packet, this is related

1090
00:43:52,706 --> 00:43:53,636
to instant messaging,

1091
00:43:53,836 --> 00:43:55,876
but it doesn't reassemble
everything nicely

1092
00:43:55,876 --> 00:43:57,526
in a nice graphical
user interface.

1093
00:43:57,746 --> 00:44:01,266
So, again, per my hand gestures
on Monday about layering

1094
00:44:01,266 --> 00:44:04,496
on the energy net,
ethernet and an IP and TCP,

1095
00:44:04,496 --> 00:44:06,356
these programs do
the same thing.

1096
00:44:06,356 --> 00:44:08,266
We're going to see a
nice user friendly view

1097
00:44:08,266 --> 00:44:10,926
of what my browser is
doing with Facebook server,

1098
00:44:11,176 --> 00:44:13,926
but it's on a higher level
than we looked at earlier today

1099
00:44:14,216 --> 00:44:16,416
with the raw packet sniffer.

1100
00:44:16,416 --> 00:44:18,806
So for debugging
purposes and actually

1101
00:44:18,806 --> 00:44:21,696
for development purposes for
P set seven and on beyond,

1102
00:44:21,876 --> 00:44:23,756
it's always a good
practice to get in the habit

1103
00:44:23,756 --> 00:44:26,496
of clearing your cash often
when the designing websites

1104
00:44:26,496 --> 00:44:29,606
so you don't get confused
by having changed something,

1105
00:44:29,606 --> 00:44:31,896
but the browser doesn't realize
it because you forgot to reload.

1106
00:44:31,896 --> 00:44:34,276
In short, re-clearing
your browser

1107
00:44:34,276 --> 00:44:35,936
by whatever menu
options is appropriate.

1108
00:44:35,936 --> 00:44:38,596
Ask a friend or google for
your browser is a good thing.

1109
00:44:38,596 --> 00:44:40,716
It will avoid confusion
for yourself.

1110
00:44:40,946 --> 00:44:42,946
So I now have a fresh cash.

1111
00:44:42,946 --> 00:44:45,226
No pages have been downloaded
already even though I see the

1112
00:44:45,226 --> 00:44:46,396
remnants of this past one.

1113
00:44:46,626 --> 00:44:49,416
I'm going to go ahead and
click on facebook.com.

1114
00:44:49,486 --> 00:44:52,606
And now down here on the left,
it looks like when you pull

1115
00:44:52,606 --> 00:44:54,536
up facebook.com for
the first time,

1116
00:44:55,036 --> 00:44:58,806
it looks like 15 HTTP
requests are induced

1117
00:44:58,896 --> 00:45:00,646
between my browser
and the server.

1118
00:45:00,856 --> 00:45:02,416
Now, I only visited
one web page.

1119
00:45:02,416 --> 00:45:03,706
What are all those
other requests?

1120
00:45:03,876 --> 00:45:05,076
Well, Facebook's got images.

1121
00:45:05,116 --> 00:45:06,656
It's got a language
called Java script.

1122
00:45:06,656 --> 00:45:08,936
It's got this other language
called cascading style sheets.

1123
00:45:09,206 --> 00:45:11,296
Some pages have videos
and sounds.

1124
00:45:11,296 --> 00:45:14,406
And so there's lots of
files embedded in a website.

1125
00:45:14,406 --> 00:45:16,786
Case in point, on Monday
when we embedded the hamster

1126
00:45:16,786 --> 00:45:22,036
into my web page, I had index
-- or rather I had hello.HTML,

1127
00:45:22,326 --> 00:45:25,106
but then inside hello.HTML
I mentioned a file,

1128
00:45:25,316 --> 00:45:27,066
the URL of that hamster file.

1129
00:45:27,096 --> 00:45:29,926
And so the way a browser works
is it actually uses recursion.

1130
00:45:30,166 --> 00:45:33,656
When it downloads a HTML file
or starting today a PHP file,

1131
00:45:33,906 --> 00:45:36,066
it analyzes that
HTML source code top

1132
00:45:36,066 --> 00:45:37,056
to bottom, left to right.

1133
00:45:37,286 --> 00:45:40,196
And if it sees the names of
any other files like a JIFF

1134
00:45:40,196 --> 00:45:42,846
or a JPEG or a HTML
file or whatever,

1135
00:45:43,196 --> 00:45:47,566
it then recursively requests
those files and grabs them

1136
00:45:47,566 --> 00:45:49,816
and then integrates
them into the web page.

1137
00:45:49,816 --> 00:45:52,176
And so this is what's
happened here on this table.

1138
00:45:52,176 --> 00:45:53,856
It looks like there's 15 files

1139
00:45:53,856 --> 00:45:55,906
that compose Facebook's
home page at the moment.

1140
00:45:56,116 --> 00:45:58,236
The one I really care
about now is the first one,

1141
00:45:58,236 --> 00:45:59,386
because that's what
started it all.

1142
00:45:59,666 --> 00:46:03,356
If I click this link, again, I
see a lot of juicy information,

1143
00:46:03,356 --> 00:46:05,456
some of it archaic and
some of it useful for us.

1144
00:46:05,756 --> 00:46:08,536
My request headers are the
ones we looked at Monday.

1145
00:46:08,536 --> 00:46:10,266
Notice when I pull
up facebook.com,

1146
00:46:10,556 --> 00:46:13,616
I'm telling the server what
I typed into the address bar,

1147
00:46:13,616 --> 00:46:16,856
which can be useful if multiple
websites are on the same server.

1148
00:46:17,146 --> 00:46:19,126
There's this mention
of Gzip and deflate.

1149
00:46:19,126 --> 00:46:20,316
This just means that
my browser knows how

1150
00:46:20,316 --> 00:46:21,316
to compress information.

1151
00:46:21,316 --> 00:46:22,826
So if Facebook wants
to save some bytes

1152
00:46:23,116 --> 00:46:26,326
and send me a compressed
response, I can decompress

1153
00:46:26,326 --> 00:46:27,526
that for efficiency sake.

1154
00:46:27,866 --> 00:46:29,416
And then I apparently go

1155
00:46:29,416 --> 00:46:31,656
and download all these
randomly named files

1156
00:46:31,656 --> 00:46:35,416
that compose the rest
of the site's content.

1157
00:46:35,896 --> 00:46:37,636
So now let's go ahead
and do this.

1158
00:46:38,396 --> 00:46:41,616
And I'm going to go ahead and
log in as Malan at CS50.net.

1159
00:46:41,726 --> 00:46:43,616
And my password for
the world to see --

1160
00:46:43,856 --> 00:46:46,496
I'll change it later
-- is 12345.

1161
00:46:46,496 --> 00:46:48,456
It was too short, but 6 worked.

1162
00:46:48,456 --> 00:46:50,256
So I'm going to go
ahead and go here.

1163
00:46:50,256 --> 00:46:51,846
And, actually, let me go to --

1164
00:46:51,846 --> 00:46:53,846
let me go ahead and
click log-in.

1165
00:46:55,436 --> 00:46:55,806
All right.

1166
00:46:56,356 --> 00:46:57,846
Good. No one has
changed my site yet.

1167
00:46:58,046 --> 00:47:00,966
This, as an aside, is a security
feature that Facebook offers.

1168
00:47:00,966 --> 00:47:03,416
If you go to like account
settings, security,

1169
00:47:03,416 --> 00:47:06,656
something like that, you can
have the site email you any time

1170
00:47:06,656 --> 00:47:08,766
someone logs into your
account from a new computer.

1171
00:47:09,006 --> 00:47:09,936
This is use, frankly,

1172
00:47:09,936 --> 00:47:11,566
if you think a friend
knows your password

1173
00:47:11,566 --> 00:47:13,036
or has been figuring
out your password.

1174
00:47:13,206 --> 00:47:16,026
It does not protect against
the attack we looked at today,

1175
00:47:16,026 --> 00:47:17,666
because I did not
know Rose's password.

1176
00:47:17,936 --> 00:47:19,056
This prompt only protects

1177
00:47:19,056 --> 00:47:21,086
against someone figuring
out your password.

1178
00:47:21,286 --> 00:47:24,316
So I'm just going to say,
this is my MacBook Pro.

1179
00:47:24,316 --> 00:47:27,086
And this is just my
reminder that it's okay

1180
00:47:27,086 --> 00:47:28,986
if Facebook sees traffic
from this computer again.

1181
00:47:29,276 --> 00:47:30,316
But the point here is this --

1182
00:47:30,316 --> 00:47:33,086
let me go ahead and
actually clear this screen

1183
00:47:33,376 --> 00:47:34,186
so we see it again.

1184
00:47:34,186 --> 00:47:35,876
Malan@CSF50.net.

1185
00:47:36,336 --> 00:47:39,646
123456. Enter.

1186
00:47:39,646 --> 00:47:39,866
All right.

1187
00:47:39,926 --> 00:47:40,806
So what just happened?

1188
00:47:41,186 --> 00:47:44,166
So I ultimately got my
home page or my profile.

1189
00:47:44,386 --> 00:47:46,076
But notice this, I first clicked

1190
00:47:46,076 --> 00:47:48,426
on the first page
that was visited.

1191
00:47:48,426 --> 00:47:49,956
And notice the URL, HTTPS.

1192
00:47:50,446 --> 00:47:52,056
Now, I can still
see my own traffic.

1193
00:47:52,056 --> 00:47:53,426
So in answer to your
comment, David,

1194
00:47:53,426 --> 00:47:55,786
about it still being
unencrypted somewhere,

1195
00:47:56,116 --> 00:47:58,616
I am in my own browser can
certainly see what data my

1196
00:47:58,616 --> 00:47:59,446
browser is sending.

1197
00:47:59,446 --> 00:48:00,686
So it's not being
hidden from me.

1198
00:48:00,686 --> 00:48:01,536
And that's what we're seeing,

1199
00:48:01,536 --> 00:48:02,956
what my browser sent
to Facebook.

1200
00:48:02,956 --> 00:48:05,506
I want to look at request
headers here for a moment.

1201
00:48:05,776 --> 00:48:06,816
And under request headers,

1202
00:48:06,816 --> 00:48:09,556
it looks like Facebook sends
all traffic for log-ins

1203
00:48:09,556 --> 00:48:12,496
to a server called
login.facebook.com.

1204
00:48:12,496 --> 00:48:16,976
It looks like down here,
I have now this thing.

1205
00:48:16,976 --> 00:48:18,776
Let me go here to post.

1206
00:48:19,066 --> 00:48:20,156
You might be generally familiar

1207
00:48:20,156 --> 00:48:21,816
with the idea of
post versus get.

1208
00:48:22,016 --> 00:48:23,866
To post information
to a website means

1209
00:48:23,866 --> 00:48:25,576
to submit information
to a website.

1210
00:48:25,816 --> 00:48:27,766
This, again, is just a tool
that's making things nice

1211
00:48:27,766 --> 00:48:28,876
and pretty for us to see.

1212
00:48:29,096 --> 00:48:32,176
But what Facebook receives
is essentially a hashtable

1213
00:48:32,376 --> 00:48:34,696
containing a bunch of keys
on the left-hand side,

1214
00:48:34,736 --> 00:48:37,096
one of which is called email,
one of which is called locale,

1215
00:48:37,336 --> 00:48:38,136
one of which is called pass.

1216
00:48:38,666 --> 00:48:40,776
And on the right-hand
side are those values.

1217
00:48:40,776 --> 00:48:43,676
And so what we get here is
apparently some evidence

1218
00:48:43,676 --> 00:48:46,106
that my e-mail address
is indeed Malan@CS50.net.

1219
00:48:46,296 --> 00:48:48,966
My password at the
moment is 123456.

1220
00:48:48,966 --> 00:48:50,246
And that's literally
the information

1221
00:48:50,246 --> 00:48:51,186
that was sent to Facebook.

1222
00:48:51,416 --> 00:48:55,476
This, again, is just this
Firebug tools presentation

1223
00:48:55,476 --> 00:48:56,256
of this information.

1224
00:48:56,506 --> 00:48:58,996
Let me actually look at the
raw source that was sent.

1225
00:48:59,616 --> 00:49:01,866
When you submit information
to a website,

1226
00:49:02,166 --> 00:49:06,386
what really happens here
is -- can I see it here?

1227
00:49:06,386 --> 00:49:07,646
Request headers.

1228
00:49:07,646 --> 00:49:09,816
Let me scroll up here.

1229
00:49:09,976 --> 00:49:13,026
Post. What really
happens is this:

1230
00:49:13,026 --> 00:49:14,566
It's going to look
a little arcane.

1231
00:49:14,776 --> 00:49:17,446
But what was sent to Facebook's
website was this super

1232
00:49:17,446 --> 00:49:18,336
long string.

1233
00:49:18,616 --> 00:49:21,396
But this string is
essentially key value pairs,

1234
00:49:21,396 --> 00:49:24,606
a key like this called
Char-set test equal sign

1235
00:49:24,606 --> 00:49:25,706
and then some value.

1236
00:49:25,706 --> 00:49:27,516
This value looks a little
weird, but that's fine.

1237
00:49:27,516 --> 00:49:29,006
But let's fast-forward
to the bottom.

1238
00:49:29,236 --> 00:49:30,726
It looks like then
there's an ampersand.

1239
00:49:30,946 --> 00:49:33,006
So what's sent to a
website is an ampersand

1240
00:49:33,006 --> 00:49:34,486
in between these
key values pairs

1241
00:49:34,486 --> 00:49:36,906
and then a key email equals mail

1242
00:49:36,906 --> 00:49:38,996
in some weird character
at CS50.net.

1243
00:49:39,296 --> 00:49:42,786
This percent four zero is
just a web oriented way

1244
00:49:42,786 --> 00:49:44,086
of encoding an at sign.

1245
00:49:44,086 --> 00:49:47,226
So it uses simpler characters
just in case weird characters

1246
00:49:47,226 --> 00:49:48,376
like at signs break things.

1247
00:49:48,676 --> 00:49:49,666
And there's my password.

1248
00:49:49,666 --> 00:49:52,736
So in short what is actually
sent to facebook.com,

1249
00:49:53,016 --> 00:49:54,536
what I have highlighted
here, a bunch of stuff

1250
00:49:54,536 --> 00:49:55,796
that we're not going
to care about today,

1251
00:49:56,096 --> 00:50:03,046
and email equals Malan@CSF50.net
and path equals 123456.

1252
00:50:03,046 --> 00:50:05,036
The web server on Facebook's
end passes that request.

1253
00:50:05,036 --> 00:50:06,286
It's just a big line of text.

1254
00:50:06,286 --> 00:50:09,756
It's a big string, passes that
to what's called a PHP program,

1255
00:50:09,806 --> 00:50:12,976
a program written in PHP
that analyzes that string,

1256
00:50:13,236 --> 00:50:16,796
looks for all those ampersands
and splits that big string

1257
00:50:16,796 --> 00:50:19,596
on all the ampersands and
then looks for equals signs

1258
00:50:19,596 --> 00:50:22,286
and splits that big string
on all those equal signs

1259
00:50:22,496 --> 00:50:25,946
so that it can then in ram in
memory create a little table,

1260
00:50:25,946 --> 00:50:27,506
a little hashtable like this.

1261
00:50:27,506 --> 00:50:29,896
And, nicely enough,
what PHP is going to do

1262
00:50:29,896 --> 00:50:31,936
for us is it's just
going to hand us all

1263
00:50:31,936 --> 00:50:34,536
of those key value pairs
in a variable that,

1264
00:50:34,536 --> 00:50:36,156
in fact, is a hashtable.

1265
00:50:36,156 --> 00:50:38,266
So you'll see that what you're
doing very low level this week

1266
00:50:38,266 --> 00:50:41,606
and see implementing a hashtable
is going to be handed to you

1267
00:50:41,606 --> 00:50:44,846
in ever so nice form in
PHP by way of one variable

1268
00:50:44,846 --> 00:50:46,976
that you yourselves
don't have to implement.

1269
00:50:47,206 --> 00:50:48,886
But now let's look at
the server's response.

1270
00:50:48,886 --> 00:50:51,036
So I'm going to scroll back
up to the so-called headers.

1271
00:50:51,246 --> 00:50:54,246
And notice that Facebook
server has actually responded

1272
00:50:54,246 --> 00:50:55,356
with a whole bunch of junk,

1273
00:50:55,356 --> 00:50:58,046
most of which is not too
interesting for us today.

1274
00:50:58,376 --> 00:51:01,836
But the key word of the day
certainly is this, set cookie.

1275
00:51:02,126 --> 00:51:05,346
Once I have logged into
Facebook, Facebook servers,

1276
00:51:05,346 --> 00:51:08,176
behind the scenes, replies to
my browser with another one

1277
00:51:08,176 --> 00:51:09,736
of these HTTP headers.

1278
00:51:09,736 --> 00:51:10,626
We've seen a few of these.

1279
00:51:10,626 --> 00:51:12,266
We've seen location, colon.

1280
00:51:12,586 --> 00:51:14,186
We've seen the word, get.

1281
00:51:14,186 --> 00:51:16,316
We've seen this stuff on
Monday and now again today.

1282
00:51:16,646 --> 00:51:20,076
This row here that says set
cookie is Facebook's way

1283
00:51:20,076 --> 00:51:23,256
of telling me kind of
nicely, but forcibly,

1284
00:51:23,496 --> 00:51:24,816
remember this information.

1285
00:51:25,236 --> 00:51:27,236
And it's planting this
information essentially

1286
00:51:27,236 --> 00:51:29,996
in my ram or in a
file on my hard drive

1287
00:51:29,996 --> 00:51:32,526
in some default Firefox
or Safari location.

1288
00:51:32,846 --> 00:51:35,266
And my browser's purpose
in life henceforth,

1289
00:51:35,266 --> 00:51:39,626
according to HTTP version
1.1, it's supposed to grab

1290
00:51:39,626 --> 00:51:41,526
that information from
information from ram or grab

1291
00:51:41,526 --> 00:51:46,016
that information from disk and
resend it to Facebook any time

1292
00:51:46,016 --> 00:51:48,066
in the future that I
request a web page.

1293
00:51:48,066 --> 00:51:51,766
So you can think of this huge
junk, huge mess of text here

1294
00:51:52,006 --> 00:51:54,396
as the conceptional hand stamp.

1295
00:51:54,656 --> 00:51:56,016
It's a lot of key values pairs.

1296
00:51:56,176 --> 00:51:58,786
And every time I visit a
profile or your profile

1297
00:51:58,786 --> 00:52:01,836
or send a message or click that
link on Facebook, I'm supposed

1298
00:52:01,836 --> 00:52:02,926
to re-present this data.

1299
00:52:02,926 --> 00:52:04,526
So it's a little
inefficient arguably.

1300
00:52:04,526 --> 00:52:06,456
It's a whole lot of
text to be sending back

1301
00:52:06,456 --> 00:52:07,686
and forth across the internet.

1302
00:52:07,876 --> 00:52:10,426
The web is not really known
for its space efficiency,

1303
00:52:10,716 --> 00:52:13,486
but Facebook appears to
have consciously decided

1304
00:52:13,746 --> 00:52:15,416
to set a lot of cookies.

1305
00:52:15,666 --> 00:52:17,896
But I believe -- don't
quote me on this.

1306
00:52:18,976 --> 00:52:21,856
I believe the one that
matters for Fire --

1307
00:52:22,386 --> 00:52:27,636
what's it called again --
Firesheep what matters,

1308
00:52:27,636 --> 00:52:29,356
I believe, this is
the scary cookie,

1309
00:52:29,356 --> 00:52:33,966
this one down here
XS equals ZB06617 --

1310
00:52:34,016 --> 00:52:37,866
so this is the big random
number I eluded to earlier.

1311
00:52:38,066 --> 00:52:39,686
Even though there's some
letters in there, that's fine.

1312
00:52:39,686 --> 00:52:41,126
We know about hexadecimal
notation.

1313
00:52:41,126 --> 00:52:42,136
There's other basis systems.

1314
00:52:42,136 --> 00:52:43,306
So it's still a number

1315
00:52:43,456 --> 00:52:45,956
that we're drawing
using English letters.

1316
00:52:45,956 --> 00:52:47,366
It's a big random number.

1317
00:52:47,606 --> 00:52:49,456
The key, the cookie
is called XS.

1318
00:52:49,966 --> 00:52:52,356
And I think just based on
having read this fellow's work,

1319
00:52:52,506 --> 00:52:55,776
I think that's the one that
Firesheep is looking for,

1320
00:52:55,776 --> 00:52:59,346
stealing and then re-presenting
to the website as its own.

1321
00:52:59,346 --> 00:53:01,746
And there is nothing, again,
in that tool Firesheep

1322
00:53:01,986 --> 00:53:04,856
that I couldn't have done
in today's lecture manually

1323
00:53:04,926 --> 00:53:07,116
by just copying and
pasting that kind of string

1324
00:53:07,116 --> 00:53:09,706
or snipping the traffic with
that low level packet sniffer,

1325
00:53:10,006 --> 00:53:11,456
but it would have
taken a lot more work.

1326
00:53:11,456 --> 00:53:13,376
And what's scary, there's this
term on the internet known

1327
00:53:13,376 --> 00:53:15,396
as script kiddie,
this refers to someone

1328
00:53:15,396 --> 00:53:16,896
who might be a kid,
might be an adult.

1329
00:53:17,056 --> 00:53:18,776
It's generally someone
with too much free time

1330
00:53:18,776 --> 00:53:21,556
and relatively little
technical skill, but who is good

1331
00:53:21,716 --> 00:53:24,096
at downloading things and
double clicking things.

1332
00:53:24,096 --> 00:53:26,706
And so when you start to put
tools like this into the hands

1333
00:53:26,706 --> 00:53:27,876
of the masses, frankly,

1334
00:53:28,246 --> 00:53:32,196
it's probably overall a big
net positive, because it wakes

1335
00:53:32,196 --> 00:53:34,306
up people who have no
clue how this stuff works

1336
00:53:34,676 --> 00:53:36,206
that they really need to
get their act together

1337
00:53:36,206 --> 00:53:38,686
and consumers need to
start demanding this kind

1338
00:53:38,686 --> 00:53:39,606
of protection.

1339
00:53:39,936 --> 00:53:42,376
So that's the cookie it seems
that's going back and forth

1340
00:53:42,376 --> 00:53:44,756
across the wire that's
making us all vulnerable.

1341
00:53:44,886 --> 00:53:47,536
How is now home.PHP,
the site that many

1342
00:53:47,636 --> 00:53:50,066
of you probably spend
way too much time on,

1343
00:53:50,356 --> 00:53:53,856
how do you actually implement
a file like this home.PHP?

1344
00:53:54,246 --> 00:53:56,256
Well, it turns out if you
have access to a web server

1345
00:53:56,256 --> 00:53:59,266
like the cloud, it's actually --
there's all the internet traffic

1346
00:53:59,266 --> 00:54:00,606
in the room still
going across the wire.

1347
00:54:01,186 --> 00:54:04,266
It turns out that it's
relatively easy to get started.

1348
00:54:04,266 --> 00:54:07,826
So I'm going to go ahead
and SSH to cloud.CS50.net.

1349
00:54:08,356 --> 00:54:09,956
I'll make the font
bigger in just a moment.

1350
00:54:10,356 --> 00:54:11,106
All right.

1351
00:54:12,366 --> 00:54:14,316
I'm going to go into,
if you recall,

1352
00:54:14,316 --> 00:54:16,166
my public HTML directory.

1353
00:54:16,166 --> 00:54:17,626
And in case some of
you guys have been

1354
00:54:17,626 --> 00:54:19,656
like very zealously
trying to get started,

1355
00:54:19,906 --> 00:54:21,976
recall I typed this
command the other day,

1356
00:54:21,976 --> 00:54:25,626
A plus R for hello.C
-- hello.HTML.

1357
00:54:25,916 --> 00:54:30,096
This command gave the whole
world all readabilities.

1358
00:54:30,096 --> 00:54:31,006
Plus R is read.

1359
00:54:31,256 --> 00:54:32,766
So there's another
command, though,

1360
00:54:32,766 --> 00:54:34,916
if you need to make a
directory accessible,

1361
00:54:34,916 --> 00:54:36,256
folder accessible on the web.

1362
00:54:36,256 --> 00:54:38,536
So just FYI, if you're doing
this on your own before

1363
00:54:38,536 --> 00:54:40,506
of P set eight -- P
set seven goes out,

1364
00:54:40,816 --> 00:54:43,816
you need to do Tamed [assumed
spelling] A plus x, little x,

1365
00:54:44,376 --> 00:54:48,216
on two things, your public HTML
directory, and you also need

1366
00:54:48,216 --> 00:54:50,276
to do this on your
home directory denoted

1367
00:54:50,276 --> 00:54:51,126
by a single tilde.

1368
00:54:51,396 --> 00:54:52,366
There. All right.

1369
00:54:52,486 --> 00:54:54,676
So let me go into my
public HTML directory,

1370
00:54:54,676 --> 00:54:56,786
but all that will be
spelled in P set seven

1371
00:54:57,406 --> 00:54:59,286
into eight into source.

1372
00:54:59,686 --> 00:55:00,656
And I'm going to go ahead --

1373
00:55:00,656 --> 00:55:02,326
actually, let me do
something even quicker.

1374
00:55:02,326 --> 00:55:03,446
It turns out I can do this.

1375
00:55:03,966 --> 00:55:05,376
So we made this file
the other day.

1376
00:55:05,376 --> 00:55:06,526
Hello.HTML.

1377
00:55:06,846 --> 00:55:07,576
And it looked like this:

1378
00:55:07,576 --> 00:55:11,686
cloud.CS50.net, tilde,
hello.HTML.

1379
00:55:12,106 --> 00:55:13,976
Oh, and as an aside,
let this be confusing.

1380
00:55:14,056 --> 00:55:16,246
Unfortunately the left hand was
not talking to the right hand

1381
00:55:16,246 --> 00:55:17,026
when the internet was made.

1382
00:55:17,316 --> 00:55:19,726
And so Tilde means
your home directory.

1383
00:55:19,726 --> 00:55:22,996
When you have SSH'd to a server
like the cloud, unfortunately

1384
00:55:23,026 --> 00:55:27,286
in a URL like we used Monday
tilde CS50 is not your

1385
00:55:27,286 --> 00:55:28,186
home directory.

1386
00:55:28,186 --> 00:55:32,796
It's instead your public
HTML directory; right?

1387
00:55:32,796 --> 00:55:35,726
So it's close, but there's
slightly different meanings.

1388
00:55:35,726 --> 00:55:36,816
So don't get the two confused.

1389
00:55:36,816 --> 00:55:39,106
So tilde at the command
line is home directory.

1390
00:55:39,466 --> 00:55:41,706
Tilde in the context of a URL is

1391
00:55:41,846 --> 00:55:43,756
that user's public
HTML directory.

1392
00:55:43,996 --> 00:55:45,146
So I made this the other day.

1393
00:55:45,336 --> 00:55:47,526
It turns out if I want to
make a dynamic website,

1394
00:55:47,526 --> 00:55:48,326
watch this magic.

1395
00:55:48,326 --> 00:55:50,426
So I'm going to go
to my terminal here.

1396
00:55:50,826 --> 00:55:51,786
CP for copy.

1397
00:55:52,176 --> 00:55:58,646
Hello.HTML, hello.PHP and,
wallah, now I know PHP.

1398
00:55:58,646 --> 00:55:58,846
All right.

1399
00:55:58,846 --> 00:56:04,356
So it turns out that PHP is
a an interpreted language.

1400
00:56:04,386 --> 00:56:06,316
And this means I don't
have to run a compiler.

1401
00:56:06,316 --> 00:56:08,146
I don't run GCC or
anything like that.

1402
00:56:08,356 --> 00:56:09,366
It just kind of works.

1403
00:56:09,566 --> 00:56:12,816
And PHP is like a lot of
languages in this regard, Pearl,

1404
00:56:12,986 --> 00:56:15,376
Python, Ruby, Java-script.

1405
00:56:15,376 --> 00:56:17,116
Whole bunches of others
are what are called

1406
00:56:17,116 --> 00:56:18,266
interpreted languages.

1407
00:56:18,486 --> 00:56:20,866
And they're generally
smiled upon,

1408
00:56:20,866 --> 00:56:22,216
because it eliminates a step.

1409
00:56:22,496 --> 00:56:24,806
It just makes it a little
faster, a little more friendly

1410
00:56:24,806 --> 00:56:27,836
to develop code, because you
don't have to recompile, rerun.

1411
00:56:27,836 --> 00:56:30,046
It just works after you
reload the web page.

1412
00:56:30,326 --> 00:56:31,546
But there is a slight down side.

1413
00:56:31,546 --> 00:56:33,836
If you are not actually
compiling a program downs

1414
00:56:33,836 --> 00:56:36,846
into zeros and ones that
specific CPU understands,

1415
00:56:36,846 --> 00:56:40,826
what's probably the
price you're paying

1416
00:56:40,976 --> 00:56:43,176
if you're skipping that step?

1417
00:56:43,176 --> 00:56:44,696
It's probably performance;
right?

1418
00:56:44,696 --> 00:56:46,106
Because I keep saying verbally

1419
00:56:46,106 --> 00:56:48,446
that a browser reads
an HTML file top

1420
00:56:48,446 --> 00:56:49,416
to bottom, left to right.

1421
00:56:49,596 --> 00:56:52,166
Well, web server does
the same thing with PHP.

1422
00:56:52,166 --> 00:56:54,446
When my web server,
something called Apache,

1423
00:56:54,576 --> 00:56:55,566
which is free software --

1424
00:56:55,566 --> 00:56:57,806
it's probably the most popular
web server software out there

1425
00:56:57,806 --> 00:56:58,796
that we're running on the cloud.

1426
00:56:59,126 --> 00:57:02,706
When Apache, the web server,
realizes, oh, some random person

1427
00:57:02,706 --> 00:57:04,886
on the internet wants
a dot PHP file,

1428
00:57:05,116 --> 00:57:08,516
it doesn't just send the PHP
file to the user's browser,

1429
00:57:08,656 --> 00:57:10,286
because otherwise
that would divulge all

1430
00:57:10,286 --> 00:57:12,036
of the intellectual
property that I wrote

1431
00:57:12,296 --> 00:57:13,516
in the form of that program.

1432
00:57:13,766 --> 00:57:15,656
What it's supposed to do
first, the web server,

1433
00:57:15,866 --> 00:57:19,966
is open this PHP file and read
it top to bottom, left to right

1434
00:57:20,206 --> 00:57:23,416
and look for any PHP
code that's in that file.

1435
00:57:23,416 --> 00:57:26,086
And if there is any PHP
code, it should execute it.

1436
00:57:26,446 --> 00:57:29,006
If that PHP code's purpose
in life is essentially

1437
00:57:29,006 --> 00:57:31,376
to call print F, it
should actually send

1438
00:57:31,376 --> 00:57:34,796
to the browser whatever
the PHP program printed.

1439
00:57:35,066 --> 00:57:38,406
And then only do I get on
the user's end, the browser,

1440
00:57:38,626 --> 00:57:40,636
the HTML that resulted
from that process.

1441
00:57:40,636 --> 00:57:43,846
So in short just as you guys
have used print F or some

1442
00:57:43,846 --> 00:57:46,746
of the end curse's functions to
print information to the screen,

1443
00:57:47,006 --> 00:57:49,566
that's ultimately what we're
going to be using PHP for,

1444
00:57:49,566 --> 00:57:54,846
to print or to echo or to output
raw HTML code that changes

1445
00:57:55,046 --> 00:57:58,096
because our PHP code is an
actual programming language

1446
00:57:58,096 --> 00:58:00,156
with if conditions and
loops and functions

1447
00:58:00,386 --> 00:58:02,576
so we can output any
HTML function we want.

1448
00:58:02,876 --> 00:58:04,366
So how do we actually do this?

1449
00:58:04,366 --> 00:58:05,956
Well, I really just
cheated there.

1450
00:58:05,956 --> 00:58:10,186
When I loaded hello.PHP, this
is literally the same file

1451
00:58:10,256 --> 00:58:10,706
from Monday.

1452
00:58:10,996 --> 00:58:13,146
But that's consistent with
my story, because when I said

1453
00:58:13,146 --> 00:58:15,086
that when the web server
pulls up this file,

1454
00:58:15,086 --> 00:58:16,796
it looks for any PHP code.

1455
00:58:17,086 --> 00:58:18,466
And we had no PHP on Monday.

1456
00:58:18,466 --> 00:58:19,966
I didn't write any
PHP on Monday.

1457
00:58:20,206 --> 00:58:23,106
So it's kind of an empty task.

1458
00:58:23,736 --> 00:58:25,986
It looks at the file,
doesn't see any PHP.

1459
00:58:26,036 --> 00:58:28,456
So it sends everything
else raw to the browser.

1460
00:58:28,456 --> 00:58:29,846
It sends all of that HTML.

1461
00:58:30,096 --> 00:58:33,066
So what the browser sees, if
I view source on this page,

1462
00:58:33,516 --> 00:58:35,096
is literally what's
on the server.

1463
00:58:35,426 --> 00:58:37,756
But now let's do things
that's a little more dynamic.

1464
00:58:37,756 --> 00:58:39,696
Let me go ahead and
not cheat in this way.

1465
00:58:40,326 --> 00:58:44,366
Let me go ahead and do
something like this.

1466
00:58:44,626 --> 00:58:46,596
Let me delete the
hamster from Monday.

1467
00:58:46,596 --> 00:58:48,816
Let me really simplify
the code here

1468
00:58:48,816 --> 00:58:50,096
so we can focus only on the PHP.

1469
00:58:50,096 --> 00:58:54,066
And I'm going to tell the web
server here comes some PHP code.

1470
00:58:54,066 --> 00:58:55,366
And the way to do that is

1471
00:58:55,366 --> 00:58:57,856
with an open bracket,
question mark, PHP.

1472
00:58:57,856 --> 00:59:00,736
And then you do almost
the opposite,

1473
00:59:00,816 --> 00:59:02,286
question mark, close bracket.

1474
00:59:02,496 --> 00:59:07,196
This tag tells the web server
here comes some PHP code.

1475
00:59:07,386 --> 00:59:10,376
So anything that's in between
these two tags is executed,

1476
00:59:10,556 --> 00:59:15,946
is interpreted on the server,
converted or converted to HTML.

1477
00:59:16,186 --> 00:59:17,406
And then the result is sent.

1478
00:59:17,406 --> 00:59:21,136
So in my browser I should never
see open bracket question mark

1479
00:59:21,406 --> 00:59:24,676
unless the web server is broken
or is not configured correctly

1480
00:59:24,886 --> 00:59:27,156
and accidentally divulged
all of my source code.

1481
00:59:27,366 --> 00:59:29,976
Now, as an aside, this is
kind of a stupid looking tag.

1482
00:59:29,976 --> 00:59:32,266
And the world has come up with
what are called short tags,

1483
00:59:32,356 --> 00:59:35,406
which folks have rather
religious feelings on this.

1484
00:59:35,406 --> 00:59:36,806
I'm going to save that.

1485
00:59:36,806 --> 00:59:37,536
Let me do this again.

1486
00:59:37,896 --> 00:59:40,716
I would say stylistically
it's a lot easier.

1487
00:59:40,926 --> 00:59:42,286
And, frankly, the nitpicky side

1488
00:59:42,286 --> 00:59:43,906
of me prefers the
symmetry of this.

1489
00:59:44,426 --> 00:59:46,556
So in the course you'll
generally see me write PHP code

1490
00:59:46,556 --> 00:59:48,516
like this and just
omit the word PHP,

1491
00:59:48,516 --> 00:59:50,286
which frankly I've always
thought is stupid that I have

1492
00:59:50,286 --> 00:59:52,716
to constantly say what language
I'm using when it's obvious.

1493
00:59:52,986 --> 00:59:54,746
So this looks a little
cleaner to me.

1494
00:59:54,786 --> 00:59:56,626
It's certainly saved
me three key strokes.

1495
00:59:56,846 --> 01:00:01,136
So let's go ahead and
do print, hello world,

1496
01:00:01,506 --> 01:00:03,466
exclamation point, semicolon.

1497
01:00:03,766 --> 01:00:07,056
Now, let me go back to the
browser, reload, wallah.

1498
01:00:07,056 --> 01:00:08,236
My first dynamic website.

1499
01:00:08,506 --> 01:00:11,226
I'm now actually calling
a function print F just

1500
01:00:11,226 --> 01:00:13,276
like in C. It's printing
hello world.

1501
01:00:13,276 --> 01:00:16,496
Now it's a PHP website, but
it's not really dynamic; right?

1502
01:00:16,496 --> 01:00:18,056
It's not actually changing.

1503
01:00:18,596 --> 01:00:20,156
So could I do something
different?

1504
01:00:20,346 --> 01:00:21,616
Well, I'm really
going to cheat here.

1505
01:00:21,616 --> 01:00:22,986
I'm going to go ahead
and print out --

1506
01:00:23,286 --> 01:00:25,256
it turns out PHP has a
function called date.

1507
01:00:25,536 --> 01:00:26,956
And date takes an argument

1508
01:00:27,096 --> 01:00:29,256
that specifies what you
want the date to look like.

1509
01:00:29,556 --> 01:00:33,296
So I'm going to say something
like YMD for year month day.

1510
01:00:33,806 --> 01:00:35,716
So notice I'm just calling
a function called date,

1511
01:00:35,716 --> 01:00:38,806
passing it another function
called print F. Notice here I

1512
01:00:38,806 --> 01:00:42,656
don't need to use the format
strings, because I'm just kind

1513
01:00:42,656 --> 01:00:44,716
of printing some
static string here.

1514
01:00:44,716 --> 01:00:49,536
I could use percent signs, but
notice in PHP more commonly used

1515
01:00:49,536 --> 01:00:51,526
than print F is just a
function called print.

1516
01:00:51,556 --> 01:00:53,566
So I'm going to get into that
habit just to be consistent

1517
01:00:53,566 --> 01:00:54,476
with what the world uses.

1518
01:00:54,776 --> 01:00:58,086
Reload. And, dammit, server
is not configured correctly.

1519
01:00:58,086 --> 01:01:01,626
How to fix this problem?

1520
01:01:02,946 --> 01:01:07,086
Quickly. Let's not do --
let's do this: I can cheat.

1521
01:01:07,496 --> 01:01:10,516
Let's print out the current time
in seconds since January 1st,

1522
01:01:10,516 --> 01:01:13,536
1970, because that will change
every second of this demo.

1523
01:01:14,566 --> 01:01:16,586
Dynamic website finally.

1524
01:01:16,586 --> 01:01:17,126
All right.

1525
01:01:17,126 --> 01:01:18,706
So I'm printing the
clock on the server

1526
01:01:18,706 --> 01:01:19,856
by reloading every second.

1527
01:01:19,946 --> 01:01:20,206
All right.

1528
01:01:20,206 --> 01:01:20,876
So overwhelming.

1529
01:01:20,876 --> 01:01:23,126
Let's actually do something
that's more compelling

1530
01:01:23,126 --> 01:01:24,986
than just printing stupid
exercises like this.

1531
01:01:25,266 --> 01:01:27,686
So let's literally
go into code quite

1532
01:01:27,686 --> 01:01:30,306
like what I did several
years ago for frosh IM.

1533
01:01:30,466 --> 01:01:31,956
So, again, the silly
back story was

1534
01:01:31,956 --> 01:01:34,696
that years ago there was no
freshman intra-mirror website.

1535
01:01:34,696 --> 01:01:37,166
And so if you wanted to sign
up for a sport, you would go

1536
01:01:37,166 --> 01:01:39,586
to the proctor's dorm and
wiggle's worth, slide a piece

1537
01:01:39,586 --> 01:01:42,106
of paper under the door and,
wallah, you were registered.

1538
01:01:42,276 --> 01:01:43,426
And maybe they'd email you back.

1539
01:01:43,836 --> 01:01:47,346
So now we introduced in
1990 or whatever a website.

1540
01:01:47,636 --> 01:01:49,636
Right? And it looked a
little something like this.

1541
01:01:50,086 --> 01:01:52,446
And this is just using
some simple HTML,

1542
01:01:52,446 --> 01:01:53,496
which we'll look at in a moment.

1543
01:01:53,616 --> 01:01:56,856
But what's compelling about
this website versus Monday's is

1544
01:01:56,856 --> 01:01:59,406
that I just have hyperlinks
and images in a web page.

1545
01:01:59,676 --> 01:02:01,236
I now have form controls.

1546
01:02:01,236 --> 01:02:05,136
And the funny thing is we
humans have done amazing amount

1547
01:02:05,136 --> 01:02:09,566
of interesting work using so
few user input mechanisms.

1548
01:02:09,566 --> 01:02:12,296
Even though the websites
today kind of make some

1549
01:02:12,296 --> 01:02:14,696
of these things look a little
sexier, a little more colorful

1550
01:02:14,696 --> 01:02:18,106
and pretty, for the most part
the worldwide web supports only

1551
01:02:18,106 --> 01:02:19,576
these forms of user input.

1552
01:02:19,946 --> 01:02:22,426
Text fields like the
name field up here,

1553
01:02:22,696 --> 01:02:24,296
sometimes it can
be multiple lines

1554
01:02:24,296 --> 01:02:26,726
which is called the text area
as opposed to a text field.

1555
01:02:27,046 --> 01:02:29,806
Website support check boxes,
that's something like this.

1556
01:02:30,136 --> 01:02:32,166
Something like radio
buttons which are similar

1557
01:02:32,166 --> 01:02:34,386
to check boxes, but these
are mutually exclusive.

1558
01:02:34,386 --> 01:02:37,026
If your check one, you can't
check the other and vice versa

1559
01:02:37,026 --> 01:02:40,386
and these things called select
menus or drop-down menus.

1560
01:02:40,386 --> 01:02:42,986
And, again, on various
websites you see somewhat

1561
01:02:42,986 --> 01:02:44,006
different interfaces.

1562
01:02:44,256 --> 01:02:46,566
And that's because people
are using a language called

1563
01:02:46,566 --> 01:02:50,116
Java-script and CSS all
the more to simulate

1564
01:02:50,196 --> 01:02:52,926
in sexier form these
basic user input controls.

1565
01:02:53,176 --> 01:02:54,786
But recall that when
I visited Facebook,

1566
01:02:54,786 --> 01:02:57,086
I had to provide my user
name and my password.

1567
01:02:57,286 --> 01:02:58,146
I clicked submit.

1568
01:02:58,146 --> 01:03:01,216
And in those key value pairs
were submitted to the server.

1569
01:03:01,486 --> 01:03:03,686
Let's actually see
what happens here.

1570
01:03:03,686 --> 01:03:04,636
So here is a form.

1571
01:03:04,636 --> 01:03:07,276
Imagine it's some random website
you discovered as a freshman

1572
01:03:07,276 --> 01:03:08,116
when you want to register.

1573
01:03:08,406 --> 01:03:11,686
I'm pulling up Firebug and my
net tab just so I can see what's

1574
01:03:11,686 --> 01:03:12,956
about to go across the wire.

1575
01:03:12,956 --> 01:03:15,196
And I'm going to go ahead
and type David here.

1576
01:03:15,406 --> 01:03:18,216
I'll nominate myself
as a captain, male,

1577
01:03:18,216 --> 01:03:20,146
Matthews, and now register.

1578
01:03:20,146 --> 01:03:21,836
And now let's see what happens.

1579
01:03:22,246 --> 01:03:22,516
All right.

1580
01:03:22,516 --> 01:03:25,406
It looks like the website says
I'm registered, but not really.

1581
01:03:25,406 --> 01:03:26,466
This is just version one.

1582
01:03:26,756 --> 01:03:28,246
And so now let's look down here.

1583
01:03:28,426 --> 01:03:31,166
If I expand this link,
notice what was sent

1584
01:03:31,166 --> 01:03:34,216
to the server was a bunch
of key values pairs.

1585
01:03:34,596 --> 01:03:36,636
Captain was sent a value of on.

1586
01:03:36,726 --> 01:03:38,556
So it turns out when you
check a box on the web,

1587
01:03:38,606 --> 01:03:40,496
the keyword on is
sent to the server.

1588
01:03:40,816 --> 01:03:43,996
The word Matthews was
sent as the value of dorm.

1589
01:03:44,296 --> 01:03:45,906
M was sent for gender.

1590
01:03:45,996 --> 01:03:47,186
David was sent for name.

1591
01:03:47,456 --> 01:03:49,836
What was really actually
sent across the wire?

1592
01:03:50,046 --> 01:03:52,806
Well, again, as I predicted
earlier, what's really sent

1593
01:03:52,866 --> 01:03:55,186
from browser to server is
just a really big long string

1594
01:03:55,186 --> 01:03:57,326
with a bunch of ampersands
and a bunch of equal signs.

1595
01:03:57,606 --> 01:03:59,266
Again, this is just a
pretty printed version.

1596
01:03:59,506 --> 01:04:03,916
This is what my browser, because
it knows how to speak HTTP,

1597
01:04:03,916 --> 01:04:05,336
sent from browser to server.

1598
01:04:05,336 --> 01:04:06,436
Name equals David.

1599
01:04:06,436 --> 01:04:08,206
Ampersand captain equals on.

1600
01:04:08,326 --> 01:04:10,656
Ampersand gender
equals M and so forth.

1601
01:04:10,656 --> 01:04:12,836
Those are HTTP parameters.

1602
01:04:13,056 --> 01:04:15,436
So this begs the question if
I now want to be a programmer

1603
01:04:15,436 --> 01:04:16,816
on the web, I need to be able

1604
01:04:16,926 --> 01:04:19,326
to access those values
on the server side.

1605
01:04:19,326 --> 01:04:20,676
So let's actually take a look

1606
01:04:20,866 --> 01:04:24,636
at what frosh IM's one
dot PHP looks like.

1607
01:04:24,636 --> 01:04:27,936
It turns out that even though I
called this PHP, just to get me

1608
01:04:27,936 --> 01:04:29,706
into the habit of
writing PHP code,

1609
01:04:30,086 --> 01:04:31,656
everything in here is static.

1610
01:04:31,976 --> 01:04:33,026
So I'm kind of cheating.

1611
01:04:33,286 --> 01:04:35,426
Technically this could
have been an HTML file.

1612
01:04:35,696 --> 01:04:37,536
But if I scroll down,
the takes aways

1613
01:04:37,536 --> 01:04:38,976
for today are a few new tags.

1614
01:04:38,976 --> 01:04:40,276
I've got a DIV tag up there.

1615
01:04:40,566 --> 01:04:41,836
And I'll make the font
a little bit bigger.

1616
01:04:41,836 --> 01:04:43,086
I've got a DIV tag up there,

1617
01:04:43,926 --> 01:04:47,166
but that's just doing some
structural stuff for me,

1618
01:04:47,396 --> 01:04:50,716
but H1 tag that says register
for frosh IMs in big bold text,

1619
01:04:50,996 --> 01:04:52,236
and then this form tag.

1620
01:04:52,296 --> 01:04:53,726
And it's the form tag really

1621
01:04:53,726 --> 01:04:55,306
that the magic starts
to happen with.

1622
01:04:55,306 --> 01:04:56,536
So I've got this form tag.

1623
01:04:56,536 --> 01:04:58,536
Recall we used this for the
google example on Monday.

1624
01:04:59,036 --> 01:05:02,776
The action value here
is register one dot PHP,

1625
01:05:02,776 --> 01:05:06,046
because I just decided based
on my design of this program,

1626
01:05:06,426 --> 01:05:09,606
frosh IM's one dot PHP when
the submit button is clicked,

1627
01:05:09,636 --> 01:05:11,696
is going to submit
to, is going to post

1628
01:05:11,696 --> 01:05:14,626
to this file called
register one dot PHP.

1629
01:05:14,826 --> 01:05:17,016
So that's where the interesting
stuff must be happening

1630
01:05:17,016 --> 01:05:18,366
for frosh IM's registration.

1631
01:05:18,596 --> 01:05:19,876
What method am I going to use?

1632
01:05:20,096 --> 01:05:21,466
Well, I chose to use post.

1633
01:05:21,466 --> 01:05:23,666
Long story short, today
there's two methods in the world

1634
01:05:23,666 --> 01:05:26,266
that are those commonly
used get and post.

1635
01:05:26,576 --> 01:05:27,776
What's the difference anyone?

1636
01:05:28,346 --> 01:05:30,976
So get --

1637
01:05:31,516 --> 01:05:35,966
[ Inaudible audience comment ]

1638
01:05:36,466 --> 01:05:37,106
>> Exactly.

1639
01:05:37,106 --> 01:05:39,066
If you used method
equals quote, unquote get,

1640
01:05:39,066 --> 01:05:41,756
all of these key value
pairs get sent in the URL

1641
01:05:42,016 --> 01:05:43,266
where the user can see them.

1642
01:05:43,346 --> 01:05:45,436
But that has advantages, because
it means that you can copy

1643
01:05:45,436 --> 01:05:46,956
and paste the URL into an email.

1644
01:05:47,206 --> 01:05:48,196
You can bookmark it.

1645
01:05:48,456 --> 01:05:49,986
But if you're submitting
like a password,

1646
01:05:49,986 --> 01:05:52,306
you probably don't want that
in your browser's history

1647
01:05:52,306 --> 01:05:52,916
in the URL bar.

1648
01:05:53,176 --> 01:05:55,706
So any time you want to submit
information that's a little

1649
01:05:55,706 --> 01:05:57,736
sensitive, you should
generally use post.

1650
01:05:57,736 --> 01:05:59,776
Or if you want to submit
information like photographs

1651
01:05:59,776 --> 01:06:01,296
or just things that
obviously can't fit

1652
01:06:01,296 --> 01:06:03,116
in a URL, you use post.

1653
01:06:03,316 --> 01:06:05,126
Now, I have what's
called a table here.

1654
01:06:05,126 --> 01:06:07,416
This is kind of frowned upon
by some people these days,

1655
01:06:07,416 --> 01:06:09,346
but the realty is it makes
things really simple.

1656
01:06:09,696 --> 01:06:12,196
What I have here
really on this page

1657
01:06:12,196 --> 01:06:15,636
if I change border colon
zero to border colon one,

1658
01:06:15,906 --> 01:06:18,786
what's really going on here,
it's kind of a nice way

1659
01:06:18,786 --> 01:06:22,146
of laying out this page.

1660
01:06:22,146 --> 01:06:26,406
Come on. Let me cheat
temporarily.

1661
01:06:27,506 --> 01:06:30,306
So what I really have is the
table in the middle of this page

1662
01:06:30,306 --> 01:06:31,836
that looks a little
something like this.

1663
01:06:31,836 --> 01:06:33,776
And if I really change
what this looks like --

1664
01:06:34,496 --> 01:06:37,256
and, again, we won't focus so
much on the HTML aspect today.

1665
01:06:37,506 --> 01:06:38,186
What's really going

1666
01:06:38,186 --> 01:06:41,266
on underneath the
hood here -- sorry.

1667
01:06:41,506 --> 01:06:42,046
Oh, dammit.

1668
01:06:44,416 --> 01:06:44,966
All right.

1669
01:06:45,366 --> 01:06:46,516
I can't show you the border.

1670
01:06:46,546 --> 01:06:49,506
Oh, wait. Yes, I can, if I
actually save the right answer.

1671
01:06:50,886 --> 01:06:53,526
Okay. So this is what I have
done to lay out this page.

1672
01:06:53,526 --> 01:06:54,696
And it's a common
approach that we use

1673
01:06:54,696 --> 01:06:56,216
in P set seven for simplicity.

1674
01:06:56,426 --> 01:06:58,406
But I wanted everything
to be a little anal

1675
01:06:58,406 --> 01:06:59,756
to line up nicely here.

1676
01:06:59,976 --> 01:07:02,626
So really I have a table
underneath the hood with rows

1677
01:07:02,626 --> 01:07:05,306
and columns, but just lining
all this up, but this looks,

1678
01:07:05,346 --> 01:07:06,416
frankly, very amatuer.

1679
01:07:06,416 --> 01:07:09,196
I didn't want people to see
these ugly lines in the rows

1680
01:07:09,196 --> 01:07:10,166
that compose the grid.

1681
01:07:10,426 --> 01:07:13,166
So I essentially changed
border equal to zero.

1682
01:07:13,166 --> 01:07:15,136
As an aside, there's
more sophisticated ways

1683
01:07:15,136 --> 01:07:16,596
of laying stuff out,
but at least

1684
01:07:16,596 --> 01:07:18,826
for P set seven we'll
probably take this relatively

1685
01:07:18,886 --> 01:07:19,596
simple approach.

1686
01:07:19,876 --> 01:07:22,946
So this then begs the
question, how does this data get

1687
01:07:22,946 --> 01:07:26,846
from frosh IMs one dot PHP
to register one dot PHP?

1688
01:07:26,846 --> 01:07:28,326
Well, just a couple new tags.

1689
01:07:28,366 --> 01:07:29,346
There's this tag here.

1690
01:07:29,396 --> 01:07:30,736
Input name equals name.

1691
01:07:31,056 --> 01:07:31,986
Type equals text.

1692
01:07:32,296 --> 01:07:33,686
Input name equals captain.

1693
01:07:33,876 --> 01:07:35,016
Type equals check box.

1694
01:07:35,276 --> 01:07:37,196
And we saw some of
these things on Monday

1695
01:07:37,196 --> 01:07:38,986
when we simulated
the google form.

1696
01:07:39,136 --> 01:07:41,846
And the interesting one at
the bottom, if I scroll down,

1697
01:07:42,136 --> 01:07:43,986
is gender, because
it's a radio button.

1698
01:07:43,986 --> 01:07:45,646
So input name equals gender.

1699
01:07:45,906 --> 01:07:47,306
Type equals radio.

1700
01:07:47,476 --> 01:07:50,016
And I'm not just making
these up entirely as I go on.

1701
01:07:50,016 --> 01:07:51,536
I found in a book
or a cheat sheet

1702
01:07:51,646 --> 01:07:53,786
that type equals radio
is a legit value,

1703
01:07:54,046 --> 01:07:56,316
but name I have full
discretion over.

1704
01:07:56,316 --> 01:07:58,176
Just like you can choose
your own variables names,

1705
01:07:58,176 --> 01:07:59,796
you can choose your
own form field names.

1706
01:08:00,126 --> 01:08:02,306
And then down here I have
what's called a select menu.

1707
01:08:02,526 --> 01:08:04,236
Because the select menu
is a little meatier,

1708
01:08:04,236 --> 01:08:05,326
it's got more data in it,

1709
01:08:05,536 --> 01:08:07,606
you actually need multiple
tags to implement it.

1710
01:08:07,636 --> 01:08:09,866
So I say select name
equals dorm,

1711
01:08:10,276 --> 01:08:12,546
size equals one means how
many things do you want

1712
01:08:12,546 --> 01:08:13,356
to show at once?

1713
01:08:13,356 --> 01:08:15,366
Just a drop down or do you
want to see them all at once?

1714
01:08:15,366 --> 01:08:18,156
And then I have option
value equals Applicor,

1715
01:08:18,486 --> 01:08:20,706
and then the word I want
to appear in the drop down,

1716
01:08:20,946 --> 01:08:23,196
and then, again, the
close tag or the end tag,

1717
01:08:23,196 --> 01:08:25,256
which is open bracket
slash option

1718
01:08:25,256 --> 01:08:26,696
which says that's the
end of the option.

1719
01:08:26,736 --> 01:08:29,976
And then, lastly, I have this
thing, input type equals submit,

1720
01:08:30,406 --> 01:08:32,866
value equals register
with an exclamation point.

1721
01:08:32,866 --> 01:08:35,636
But none of this really
pertains to what happens next.

1722
01:08:35,956 --> 01:08:37,966
What happens next is
all of the information

1723
01:08:37,966 --> 01:08:42,266
in this web page gets submitted
to register one dot PHP.

1724
01:08:42,266 --> 01:08:48,136
And register one dot PHP looks
like this, not much at all.

1725
01:08:48,136 --> 01:08:51,226
So at the very bottom we see the
spoiler for what we already saw.

1726
01:08:51,436 --> 01:08:52,306
You are registered?

1727
01:08:52,306 --> 01:08:53,006
Well, not really.

1728
01:08:53,106 --> 01:08:54,166
Well, what did I mean by that?

1729
01:08:54,486 --> 01:08:57,006
Well, at the top of this
file is a bunch of PHP codes,

1730
01:08:57,006 --> 01:09:00,206
because it turns out, this
is actually going on here.

1731
01:09:00,206 --> 01:09:02,736
If I start over with this
form and I say, you don't need

1732
01:09:02,736 --> 01:09:05,096
to know my name, you don't
need to know my gender.

1733
01:09:05,126 --> 01:09:05,386
All right.

1734
01:09:05,386 --> 01:09:08,566
Fine. I'm in welt, I'll tell you
that much and click register,

1735
01:09:08,876 --> 01:09:11,896
it turns out that this
page actually doesn't say

1736
01:09:11,956 --> 01:09:12,586
I'm registered.

1737
01:09:12,586 --> 01:09:14,976
It's not very user friendly,
but an error has happened.

1738
01:09:14,976 --> 01:09:17,896
If I try to mess around and just
not give the proctor all the

1739
01:09:17,896 --> 01:09:20,816
information I want, notice it's
actually not letting me submit.

1740
01:09:20,816 --> 01:09:23,436
And that's because atop
register one dot PHP --

1741
01:09:23,436 --> 01:09:27,076
let me shrink the font
so it fits a little more.

1742
01:09:27,326 --> 01:09:29,486
Okay. So let me shrink
the fonts here.

1743
01:09:29,486 --> 01:09:32,096
Atop register one dot
PHP is this notice.

1744
01:09:32,576 --> 01:09:33,806
Open bracket question mark.

1745
01:09:34,236 --> 01:09:35,496
Question mark, close bracket.

1746
01:09:35,496 --> 01:09:38,176
So everything at the top
of this file is PHP code.

1747
01:09:38,466 --> 01:09:40,476
Now, this mess here
is just comments.

1748
01:09:40,476 --> 01:09:42,946
PHP supports inline
comments with slash slash

1749
01:09:43,226 --> 01:09:46,806
and then also slash star,
star slash comments like C.

1750
01:09:47,076 --> 01:09:48,606
So the PHP code is this.

1751
01:09:48,606 --> 01:09:50,886
And this is what's really
neat about PHP is that it's

1752
01:09:50,886 --> 01:09:52,626
so relatively easy
to get started.

1753
01:09:52,926 --> 01:09:56,466
It turns out that any time you
submit a form from one page

1754
01:09:56,466 --> 01:09:59,706
to another, if the
second one is PHP,

1755
01:09:59,706 --> 01:10:01,176
all of those key value pairs,

1756
01:10:01,176 --> 01:10:03,286
that so-called hashtable
I eluded to before,

1757
01:10:03,576 --> 01:10:07,446
are handed to you in a special
variable called dollar sign

1758
01:10:07,666 --> 01:10:09,576
underscore P-O-S-T.

1759
01:10:09,786 --> 01:10:11,916
If by contrast you use
that method called get

1760
01:10:11,916 --> 01:10:13,936
where the values are still
sent, but in the URL,

1761
01:10:14,146 --> 01:10:17,496
dollar sign underscore
G-E-T in all capitals.

1762
01:10:17,766 --> 01:10:20,486
The underscore is just so that
they figure you're never going

1763
01:10:20,486 --> 01:10:22,326
to choose a variable name that
starts with an underscore.

1764
01:10:22,326 --> 01:10:22,936
So we will.

1765
01:10:23,186 --> 01:10:26,746
This is a special super global
variable that just always exists

1766
01:10:26,746 --> 01:10:27,866
that you get for free.

1767
01:10:27,936 --> 01:10:29,096
And we're leveraging that.

1768
01:10:29,096 --> 01:10:33,116
What's inside of this variable
is essentially a hashtable,

1769
01:10:33,226 --> 01:10:35,426
more generally known as
an associate of array.

1770
01:10:35,726 --> 01:10:37,516
In C we really were limited.

1771
01:10:37,516 --> 01:10:39,626
The only thing you could
put between square brackets

1772
01:10:39,816 --> 01:10:41,306
with respect to a ray was what?

1773
01:10:41,826 --> 01:10:44,866
Like a number, zero, one, two,

1774
01:10:44,926 --> 01:10:47,056
three or a variable
containing a number.

1775
01:10:47,216 --> 01:10:50,646
What's really cool about
PHP and languages like it is

1776
01:10:50,646 --> 01:10:52,806
that arrays are not
always numeric.

1777
01:10:53,066 --> 01:10:56,376
They are associative
whereby you can use anything

1778
01:10:56,376 --> 01:10:58,376
as the index into an array.

1779
01:10:58,536 --> 01:10:59,776
You can use a word.

1780
01:10:59,776 --> 01:11:00,756
You can use a number.

1781
01:11:00,976 --> 01:11:02,296
You can use a floating
point value.

1782
01:11:02,296 --> 01:11:03,586
You can use anything you want.

1783
01:11:03,796 --> 01:11:07,376
Associated arrays in PHP
is a generalization --

1784
01:11:07,376 --> 01:11:10,006
is an incarnation of
this idea of a hashtable.

1785
01:11:10,006 --> 01:11:12,456
A hashtable, even though you
might be implementing this

1786
01:11:12,456 --> 01:11:15,236
for P set six and really trying
to wrap your mind around how

1787
01:11:15,236 --> 01:11:17,726
to implement it, at the
end of the day it's one

1788
01:11:17,726 --> 01:11:20,346
of the most useful data
structures in computer science,

1789
01:11:20,506 --> 01:11:22,866
because it's just a big
container that takes

1790
01:11:22,866 --> 01:11:24,796
in keys, outputs values.

1791
01:11:24,876 --> 01:11:27,496
And in theory it runs in
constant time or at least

1792
01:11:27,496 --> 01:11:28,946
in the best case
it's constant sign.

1793
01:11:29,196 --> 01:11:32,126
So it's sort of the Swiss
Army knife of data structures,

1794
01:11:32,356 --> 01:11:35,006
because it's just so useful
as a container for stuff.

1795
01:11:35,006 --> 01:11:36,496
So that's what's inside post.

1796
01:11:36,526 --> 01:11:39,586
So what I'm saying with my
if condition here in PHP,

1797
01:11:39,586 --> 01:11:45,266
if the name key inside of
this hashtable equals equals

1798
01:11:45,266 --> 01:11:45,576
what's this?

1799
01:11:47,016 --> 01:11:47,546
Just nothing.

1800
01:11:47,546 --> 01:11:48,296
The empty string.

1801
01:11:48,296 --> 01:11:49,316
So quote, unquote.

1802
01:11:49,656 --> 01:11:52,786
Or so vertical bars
the gender field

1803
01:11:53,086 --> 01:11:56,346
in that super global called
post equals equals nothing

1804
01:11:56,656 --> 01:11:59,816
or dorm equals equals
nothing, what do I do?

1805
01:11:59,816 --> 01:12:02,466
Well, this is kind of a long
line, because it's a long URL.

1806
01:12:02,556 --> 01:12:05,556
I'm going to respond with
not HTML, but I'm going

1807
01:12:05,556 --> 01:12:07,066
to call a function
called header.

1808
01:12:07,466 --> 01:12:08,926
And that header function says,

1809
01:12:08,926 --> 01:12:14,426
location colon space
HTTP colon slash slash.

1810
01:12:14,426 --> 01:12:17,746
So what this is doing is the
web PHP is telling the browser,

1811
01:12:17,966 --> 01:12:19,876
go there to this location.

1812
01:12:19,906 --> 01:12:20,606
Well, what's there?

1813
01:12:20,866 --> 01:12:21,966
If you look at that URL,

1814
01:12:22,186 --> 01:12:24,196
it's the same location
I just came from.

1815
01:12:24,396 --> 01:12:26,786
And so this is why I just
ended up back where I was.

1816
01:12:26,816 --> 01:12:30,216
And nothing actually happened,
because I then called exit.

1817
01:12:30,216 --> 01:12:32,806
And so I never hit the
bottom of this file.

1818
01:12:32,806 --> 01:12:35,396
So it's important to realize
again PHP's interpreted

1819
01:12:35,596 --> 01:12:38,686
in that it was read top
to bottom, left to right.

1820
01:12:38,686 --> 01:12:40,556
And so if you call exit,
you're just not going

1821
01:12:40,556 --> 01:12:41,556
to proceed any further.

1822
01:12:41,836 --> 01:12:43,656
Now, this is not a very
user friendly version.

1823
01:12:43,656 --> 01:12:46,186
Let's pull up version
two of frosh IM's here.

1824
01:12:46,186 --> 01:12:49,336
It looks the same, but now
let me go ahead and just say,

1825
01:12:49,616 --> 01:12:50,496
you don't need to
know any of this.

1826
01:12:50,496 --> 01:12:51,526
I'm David, and that's all.

1827
01:12:51,886 --> 01:12:55,306
Register. So now we finally
have a more familiar user

1828
01:12:55,306 --> 01:12:56,256
interface mechanism.

1829
01:12:56,256 --> 01:12:58,216
You must provide your
name, gender and dorm.

1830
01:12:58,446 --> 01:13:00,436
Go back. Well, how
did I implement this?

1831
01:13:00,436 --> 01:13:01,456
Well, let's take a look.

1832
01:13:01,456 --> 01:13:05,526
In register two dot
PHP notice I did this.

1833
01:13:05,526 --> 01:13:06,866
And this is what's
cool, too, about PHP.

1834
01:13:06,866 --> 01:13:10,686
In that last example I put all
my PHP code at the very top

1835
01:13:10,686 --> 01:13:12,136
of the file, but it turns

1836
01:13:12,136 --> 01:13:15,076
out that I can use these open
bracket question marks really

1837
01:13:15,076 --> 01:13:16,106
any time I want.

1838
01:13:16,106 --> 01:13:18,546
I can alternate between HTML
mode, which is just going

1839
01:13:18,636 --> 01:13:20,246
to get spit out raw
to the browser.

1840
01:13:20,436 --> 01:13:22,746
And then if I need to make a
decision here, wait a minute,

1841
01:13:22,746 --> 01:13:25,826
I either want to print out
X or I want to print out Y,

1842
01:13:26,136 --> 01:13:29,096
I can make that decision
in line with PHP

1843
01:13:29,096 --> 01:13:31,266
as follows: Here's my HTML tag.

1844
01:13:31,266 --> 01:13:31,976
Let me zoom in.

1845
01:13:32,296 --> 01:13:33,426
Here's my HTML tag.

1846
01:13:33,756 --> 01:13:35,536
Here's my head tag,
my title tag.

1847
01:13:35,686 --> 01:13:36,346
Close head.

1848
01:13:36,576 --> 01:13:37,356
Open body.

1849
01:13:37,356 --> 01:13:39,006
And now I'm at the
body part of the page.

1850
01:13:39,006 --> 01:13:40,176
I'm not sure what
I want to do yet.

1851
01:13:40,176 --> 01:13:41,776
So I'm going to check
a condition.

1852
01:13:41,876 --> 01:13:44,686
I enter PHP mode, open
bracket, question mark.

1853
01:13:45,096 --> 01:13:50,276
If the name key inside the post
hashtable equals equals nothing

1854
01:13:50,606 --> 01:13:54,026
or gender is nothing or dorm
is nothing, what do I do?

1855
01:13:54,026 --> 01:13:57,336
Well, notice at the end of this
condition slightly new syntax

1856
01:13:57,336 --> 01:14:00,846
versus C, notice I have a
colon, but then I have close --

1857
01:14:00,906 --> 01:14:04,706
then I have question
mark close bracket.

1858
01:14:05,086 --> 01:14:08,546
So that means if any one of
those expressions is true,

1859
01:14:08,776 --> 01:14:11,336
go ahead, PHP, and
just start spitting

1860
01:14:11,336 --> 01:14:12,646
out the following content.

1861
01:14:12,646 --> 01:14:13,746
What's the following content?

1862
01:14:13,966 --> 01:14:15,096
You must provide your name,

1863
01:14:15,096 --> 01:14:16,766
gender and dorm,
exclamation point.

1864
01:14:17,146 --> 01:14:19,956
Else, notice I'm back in
PHP mode, because I have

1865
01:14:19,956 --> 01:14:22,226
to ask a question
again of the computer.

1866
01:14:22,456 --> 01:14:26,866
Else, go ahead and echo this
instead you are registered.

1867
01:14:26,866 --> 01:14:27,666
Well, not really.

1868
01:14:27,906 --> 01:14:29,646
So I'm dropping in
and out of PHP mode

1869
01:14:29,646 --> 01:14:30,806
to make these decisions.

1870
01:14:30,806 --> 01:14:33,096
Well, I can do slight
enhancements of this still

1871
01:14:33,376 --> 01:14:36,526
if I pull up this
time frosh IMs three.

1872
01:14:36,636 --> 01:14:39,616
Let me go ahead and do
this, frosh IMs three

1873
01:14:39,936 --> 01:14:41,956
and open up register three.

1874
01:14:42,986 --> 01:14:48,356
And notice here if I'm at three
and I click register here,

1875
01:14:48,566 --> 01:14:52,726
David, one, two,
three, register.

1876
01:14:53,506 --> 01:14:54,486
What's going on here?

1877
01:14:55,126 --> 01:14:56,556
What I've done in
register three is this:

1878
01:14:57,316 --> 01:15:01,166
If the name is not blank -- so
notice I'm using bang equals.

1879
01:15:01,226 --> 01:15:04,666
If it's not blank, and
gender is not blank

1880
01:15:05,066 --> 01:15:07,836
and over here dorm is
not blank, notice this,

1881
01:15:08,236 --> 01:15:09,716
I'm going to declare
a few variables.

1882
01:15:09,716 --> 01:15:11,656
So if you haven't caught on
already, variables in PHP

1883
01:15:11,656 --> 01:15:13,466
by convention always
start with dollar signs.

1884
01:15:13,746 --> 01:15:15,916
A two variable is going to
be Malan at two CS50.net.

1885
01:15:16,246 --> 01:15:17,956
A subject variable is
going to be registration.

1886
01:15:18,146 --> 01:15:20,686
A body variable is going
to be this line here.

1887
01:15:20,906 --> 01:15:24,146
In PHP you can use dot as
the concatenation operator,

1888
01:15:24,366 --> 01:15:27,636
which means take this string and
concatenate it with this string

1889
01:15:27,866 --> 01:15:29,276
and this one and this one.

1890
01:15:29,276 --> 01:15:32,536
So this multiline thing here
just says make a really long

1891
01:15:32,536 --> 01:15:35,366
string, but I'm concatenating
it line by line for style,

1892
01:15:35,566 --> 01:15:37,126
but the magic is
in this last line.

1893
01:15:37,406 --> 01:15:39,826
There's thankfully
finally in C you have

1894
01:15:39,826 --> 01:15:41,206
to do everything low level.

1895
01:15:41,286 --> 01:15:44,986
But in PHP, male two,
this subject, this body

1896
01:15:45,286 --> 01:15:48,206
and these headers, well,
what just happened, well,

1897
01:15:48,206 --> 01:15:52,556
let me go back to my browser,
mail dot CS50.net, which happens

1898
01:15:52,556 --> 01:15:53,606
to be hosted by Gmail.

1899
01:15:53,606 --> 01:15:56,026
Let me go ahead -- and
thankfully it's GPS.

1900
01:15:56,196 --> 01:15:57,396
So you're not getting
into this one.

1901
01:15:58,416 --> 01:16:02,946
Enter. And Joseph
wants to be friends.

1902
01:16:03,096 --> 01:16:03,406
Thank you.

1903
01:16:04,386 --> 01:16:08,146
And wait. I got to click submit.

1904
01:16:08,326 --> 01:16:08,816
Wait a minute.

1905
01:16:08,856 --> 01:16:09,496
Come on, David.

1906
01:16:09,496 --> 01:16:10,666
Applicor. Register.

1907
01:16:10,666 --> 01:16:15,656
This better work.

1908
01:16:15,856 --> 01:16:16,496
Registration.

1909
01:16:16,826 --> 01:16:19,356
I have now implemented
what I did years ago --

1910
01:16:19,616 --> 01:16:21,106
it took me like weeks
years ago --

1911
01:16:21,496 --> 01:16:24,696
the idea of an email system that
just informed the Proctor or me

1912
01:16:24,696 --> 01:16:26,396
in this case who
registered for frosh IMs.

1913
01:16:26,696 --> 01:16:28,626
So now we have an online
registration system.

1914
01:16:28,966 --> 01:16:29,966
More on this on Monday
[applause].