>> All right.
This is CS50 Halloween week and the end of Week 8.
So we do actually have some pretty scary stories today,
but first a couple of announcements.
So, one, any of you that showed
up at office hours last night, my apologies.
We actually overcompensated by moving too much of the staff
from last night to tonight and tomorrow.
So my apologies.
Quite honestly, if you showed up at my bidding encouraging
and we weren't actually there in sufficient numbers to help you.
So we will be there tonight and tomorrow.
And we will adjust accordingly next week.
So some of you tuned into this last night.
If you pulled up any of the course's lectures videos, we,
of course, have a lot of students
in the extension school taking this course remotely.
We, of course, have a lot
of your classmates taking this course remotely.
And so we have these videos online of lectures
and sections and walkthroughs.
And what we thought we'd try is an experiment,
really a social pedological experiment just to try
to lower the bar online, so you guys talking
to one another ideally about material
and the lecture and question.
And so what some of you might have seen is
that we've integrated CS50 chat into each
of the course's lectures at the moment.
This is an interface after you've logged
into your cloud account that you can see who else is watching
that video or perhaps another one.
And then in theory you can discuss the material.
You can click any of the sentences
in the transcripts once they appear to jump
that part of the lecture.
And, so, I think in a decent size class there might actually
be some pedological value here
in giving you guys the easier ability
to chat amongst yourselves.
And for now we also put this on the course's home page
so you can actually log in and see what kind
of chatter is going on.
And we'll see how it goes.
We'll tweak it as needed.
The first several posts that ended
up in the chat room last night --
I actually started setting it up last night.
Didn't have time to add the authentication,
because I had to run to dinner.
So I ran to dinner and just let people log
in with whatever nickname they wanted to.
And so the first message I think posted to the chat room was, hi.
So that was kind of nice and fitting.
Seems to work.
The next one was, hello.
The third one that I saw when I came back
from dinner was this one here.
And the fourth chat ever posted to the CS50 chat interface was,
why I actually do not know.
So, in any case, that is CS50 chat.
And you will see this interface on any of the course's videos
if you now tune in to the MP4 versions
on the course's website.
So all of the rage over the last couple of days,
if you've been talking with some of your technical friends
or you read any of the blocks,
is this utility called Firesheep.
And it's actually rather epiphora
that just this week we started talking about web programming
and security issues and even as far back
as our crypto discussion did we talk about one
of the technologies involved in this
or not involved something called SSL.
So a researcher by the name of Eric Butler and a buddy
of his named Ian Gallagher just a couple of days ago presented
at a hacker conference of sorts a very compelling reason
for the world to start being mindful of some
of the inherit insecurities in today's internet
and more specifically today's web.
What's curious is that their presentation really did not
point any new fundamental weaknesses
in today's worldwide web, but it was a wake-up call
to people not only in the audience, but also more broadly,
because the mass media has picked this
up as have some of you have.
So Firesheep is a program that automates the process
of sitting inside of a room like this or an internet cafe
or Starbucks or where there's a lot of wireless traffic.
And with the click of the button you can then sniff all
of the wireless traffic in the vicinity of you.
And if the people near you are using that wireless connection
to connect to popular websites like Facebook or Twitter
or Gmail or the like, with the single click,
you can log into that person's Facebook or Twitter
or other such account.
And this is not because some new fatal flaw was discovered
in these technologies, but because two fellows highlighted
for the whole world's attention just how insecure
and how poorly designed some of today's websites or really some
of our underlying technologies are.
So if you caught wind of this,
do realize that you can go to the source.
You might have heard some correct things,
some incorrect things from friends and the like,
but this is actually the blog post where the author
of this presentation actually discusses this utility,
Firesheep, both before the day he released it
and then a day after, after 100 plus thousand people actually
downloaded it.
What happens is if you download this utility,
it's a free plug-in for Firefox, for Macs and Windows.
You see a Firefox window like this.
And on the left-hand side you see a little button
that simply says, start capturing.
And if you click that start capturing button, what you start
to see are anyone nearby whose been logging into some
of those popular websites.
So in this hacker demonstration he give a demonstration
with himself named Eric, his buddy and then someone else,
two other people who were actually in the audience.
And then what you can do is click on, for instance,
Ian's name up at top left and bam.
Now, Eric is logged into Ian's account,
not knowing his password, not having looked over his shoulder,
just by sniffing the wireless traffic.
And, frankly, just to hammer home this point,
since one of the goals of this course is really
to educate you guys, not necessarily
to be computer scientists,
but to be technically savvy politicians or business people
or really just ordinary people on the street.
I decided it would be the most compelling example to tell you
that James, Trisha, James, Chris, Emily,
Zar [assumed spelling], Mike, Brian, RJ, Jonathan, Waldo,
Emily, Clougan [assumed spelling] Rose, Nick, Lou, Mike,
Jonathan, Brecka [assumed spelling], Chris, Anna, Brian,
Charlie, RJ, Joe, James, Lee, Ryan, CC,
all of your accounts have been compromised
as of the past five minutes.
[applause] Now, frankly, what are you doing on Facebook
and all these websites during CS50's lecture?
So, I mean, perhaps that's the take away here.
But just to show how easy this is, I won't go poking
around your own personal accounts, but I do recognize one
of the names, Rose Cowe, [assumed spelling] there
at top left, one of our teaching fellows.
So, Rose, here is your Facebook account.
It is that easy.
So I actually got her blessing before doing this.
We sanitized her news-feed here.
But it is literally that easy.
I downloaded a program from the web.
I read up on how it works,
because I was technically curious.
I installed this thing, double clicked and bam.
And literally the dozen or two names I just rattled off,
if someone else in this audience -- and please do not do this --
is running this tool at this moment in time, literally all
of your accounts have been compromised, because now anyone
in this room, myself included, can start poking
around your messages, your pokes, your e-mail,
your tweets and the like.
And so this was really a wake-up call
in this research conference.
And don't worry, I won't leave you completely hanging today
and just say, good luck.
I will actually propose some technological solutions
and use this really as a stepping stone this week
and next to discuss what these flaws are and what we,
as computer scientists, can do to familiarize them,
what you as users can do to avoid them
and really what we more generally as a society
of increasingly technical people can actually do
to protect ourselves.
But I grabbed this link off the internet yesterday, too.
Some folks decided that it would be compelling
to say something like this.
This is additional program someone wrote called idiocy
that's a warning shot to people browsing the
internet insecurely.
And what utility does is if you install that utility
and it's a text that there are people in your vicinity
who are logged into twitter, it logs itself in as that person
to twitter, poses a tweet saying, hey, idiot,
your account has been compromised;
here's how to fix it.
And then it logs off.
So this is what it means by warning shot across the bow.
And it's a program called Idiocy.
So I bring this up because actually a lot
of you e-mailed me right after lecture on Monday
when this tool was first announced asking about this.
Because everyone in this room and really anyone
on this campus, anyone at Starbucks, at an airport,
really are vulnerable to these kinds of attacks.
And I would be remissed probably if I didn't point out that,
though, Harvard might not have all the possible technological
defenses against this, they do have all
of the administrative board possible defenses
against something like this.
So please do be mindful of such policies and do
as I say, not as I do.
But how can you actually defend against these kinds of threats?
Well, really, what are the threats in the first place?
Well, I'm going to go ahead
and run a little command on my Mac here.
You can do this on almost any Linux system.
It's a command called TCP dump, TCP being one
of the protocols we talked briefly about Monday that has
to do with getting data from point A to point B.
And when I hit enter here and then log into my own computer,
I've essentially put my wireless ethernet adapter
into what's called promiscuous mode, which actually means
that it's listening not only to traffic destined for my laptop,
but for any traffic that's here in the room.
So if we actually look through this,
hopefully we won't see anything sketchy.
Actually, one of you seems to be downloading Firesheep,
it appears, or googling for it.
But what we see going across my terminal window here is just a
raw dump of all of the wireless internet traffic going
across the -- going through the air right here
at this moment in time.
I'm going to go ahead and run a different program
that makes this a little more visually interesting for us.
This is what's generally called
in the security community a packet sniffing utility,
which has actually really useful technical value.
This, too, is a free tool.
This has been around for 10, 15 years, something like it.
I'm going to click on my wireless interface.
And what you see now scrolling by is every one
of the individual data packets flowing across the wire,
flowing through the air here wirelessly in Sanders
or unsuspecting freshman in Annenberg across the way.
You can see on the left-hand column the IP addresses,
the unique addresses that identify the origin
or destination of each of these packets.
And if we really spend some time looking,
we'd notice some familiar acronyms, TCP, HTTP.
So if I actually got nosy and started digging into each
of these rows on this table,
I could see every website these freshman are visiting or people
in this room, we could see what emails have been sent.
If you're not using a secure website like Gmail,
we could see all of the instant messages certainly going
across the wire.
You could see everything.
And so really the only thing that's been protecting you
up until this past Monday was ignorance both on campus here
and the general ignorance of the population as to all
of these fundamental weaknesses.
So hereto I'm quite sure Harvard's administrative board
has rules against running packet sniffers for anything other
than CS50 lecture purposes.
So do be mindful of taking visual things away from this
and not practical skills.
So what are the other possible solutions?
Well, one of the first things that comes to mind
and has been proposed by some of your classmates in some
of the e-mails is, well, why is Harvard's wireless not secure?
I mean, my God, like my little apartment has more secure
wireless than Harvard University and a lot of companies.
Well, what's the reason perhaps
that Harvard does not have encrypted or secure Wi-Fi?
Yeah? What's that?
>> [ Inaudible comment ]
>> Compatibility.
Okay. So that's one issue,
because there are different encryption technologies.
One is called WEP, W-E-P.
One is called WPA.
Another is called WPA2.
These are all different versions.
And people with slightly older laptops might not actually
support the latest and greatest ciphers, the latest
and greatest security technologies.
And so the implication is Harvard might have
to dumb everything down to that lowest common denominator,
but the reason that there exists version one of WPA
and version two of WPA is
because WEP, for instance, sucks.
It's a completely vulnerable protocol such that
if you sniff enough encrypted traffic,
so traffic that's been encrypted to your home router or wherever,
if it's using WEP, after a few seconds or a few minutes
if you have gathered enough wireless packets,
you can reverse engineer what the secret key or password is
for that wireless router and, bam, you're connected.
Case in point, the first time I saw this demonstrated was
several years ago when I was helping random contacts,
a friend's brother move.
And we had finished moving all of his boxes into his apartment.
And it was this new apartment in Cambridge.
And he or my friend really wanted to check their e-mail.
And he didn't have Com-cast or cable mode
or anything like that yet.
And so my buddy pulled up his computer on which he downloaded
yet another free program.
And within I think two minutes, maybe five minutes
of sniffing all of the neighbors' wireless traffic,
all of which was encrypted, bam,
he found someone whose key was not sufficiently strong.
It was something silly like one, two, three, four, five.
And he figured it out just by running this program that,
again, any kid off the internet can download these days.
So thankfully there exists more secure protocols like WPA2.
There are even flaws in these, but there's a gotcha like that
on campus where, well, then you have
to be compatible with everyone.
We have to somehow tell all 20,000,
30,000 affiliates what the secret password is
to access the wireless access point.
It might involve a bit more CPU cycles
to actually encrypt all this data,
which means Harvard might need more hardware, more money.
So there is a lot of gotchas there.
It just raises the bar.
And so it's not actually uncommon
to use unencrypted Wi-Fi here.
And even then this only pushes the problem away a little bit.
The fundamental problem right now,
which we'll actually discuss today, is that when you log
into a website like Facebook or Twitter or any of these others,
you generally are using a secure connection.
HTTPS colon slash slash.
And the S stands for secure, for SSL,
which means that connection is encrypted.
But then once you're finished logging in, you might notice
that the URL usually changes back
to just HTTP colon slash slash.
So insecure.
But that's not a big deal,
because you've already provided your user name and password
or maybe your credit card number if you bought something.
And so it's not a big deal.
It's not as big a deal if someone sees your profile
or sees who your friends are.
It's more worrisome if someone sees,
let's argue, your password.
But unfortunately HTTP hypertext transfer protocol,
this thing that's getting data from points A to B browser
and server it's what's called a stateless protocol.
And you can see this visually if you visit with a website,
you usually see some simplifying icon
as the web page is downloading and then it stops eventually.
And once it stops, that means the connection between browser
and server has been severed.
They're not talking anymore.
And yet the next time you click a link on your Facebook page
to a friend or to a message or whatever, surely you don't have
to log in again and again to visit every page.
Somehow the website Facebook has remembered who you are or really
that you have logged in.
And it does so by planting what's called a cookie
on your computer, which is a little file
or it's a big random number
that gets planted somewhere on your computer.
And unbenounced to the typical user, that big random number,
that cookie is sent back and forth, back and forth
to Facebook, much like a little red stamp at a carnival
that gets you in and out of the carnival if you actually leave
for an amount of time.
Your browser unbenounced
to you is always presenting this random number, this hand stamp
to Facebook saying you are already authenticated;
you are already authenticated; don't ask me again and again
and again for my user name and password.
And the problem is this hand stamp,
this cookie is generally not being transmitted securely,
because it's being transmitted by HTTP.
So this program Fireshark,
if you see where the story is going, is not eavesdropping
on all your encrypted traffic.
I actually don't know what any of your guys' passwords are
to Facebook or to Twitter.
What I have stolen using this program
and what anyone can steal using this program must be what?
That cookie.
That hand stamp.
It's as though a Firesheep is kind of making a copy
of that hand stamp and then presenting it to Facebook
or the like as its own.
And that's sufficient to get you
through that website's security layer.
Now, what about encrypting the traffic?
So this actually does solve the problem at least of the freshman
in Annenberg and the person sitting next to you.
If you actually have an encrypted connection,
your laptop is going to connect
to Harvard's wireless access points, which, as you know,
actually are not in Sanders
since we have very poor wireless here.
You probably are in Annenberg.
So between your laptop and those antennas you probably do have a
secure encrypted connection if Harvard turned
on a protocol like this.
It would be a bit of a nuisance for all of us
to actually reconfiguring our laptops, but it would
at least encrypt us between us and those antennas on the wall.
But the problem is that encryption ends
at that wireless access point.
And there's an ethernet cable leading
from that wireless access point to one of Harvard's routers,
big computer that moves data around.
There's another big wire leading from Harvard's router
to the next router, to the next router,
to the next router on the internet.
So you raise the bar to people you know actually sniffing your
data if you're at least encrypted wirelessly,
but the whole rest of the internet.
If there are twenty hops, 20 routers between you and point B,
you really only encrypted the first of those.
There are 19 other opportunities where anyone
on the internet can actually still sniff your data.
So what's the solution?
Well, what about encrypting your data not between you
and the access point, but between you and point B; right?
Go the whole nine yards all the way across the country
to Facebook server by using the S in HTTP in the URL, which,
again, denotes secure.
This means using a technology
that we mentioned briefly weeks ago,
RSA and cryptography more generally can your browser
establish a secure connection to facebook.com itself.
And the upside of this is that after your hand is stamped,
after a cookie is planted on your computer,
so long as you stay on the SSL version of Facebook,
the one whose URL starts with HTTPS,
at least then this cookie, this hand stamp will continue
to be transmitted securely again and again and again.
But there's a problem here.
So case in point, let's go ahead and do this.
So I'm going to go to -- I got to log out of Rose's account.
I'm going to clear my recent history.
That clears my cookies and all of my temporary files
that have been downloaded.
So now I'm going to go to facebook.com.
All right.
So I'm actually on HTTP, which is, in fact, the default.
You know, it turns out Facebook does support SSL.
So I can insert the S there and hit enter.
So it feels like I might have solved this problem.
Notice, too, the world has adopted these visual queues
like green here.
If you visit a company that's paid some extra money
to get what's called a digital certificate, you can signify
to the world in green, hey, this is secure.
But watch what happens.
So I'm going to go ahead and log in here, not as Rose,
but with a little fake email account.
I'm going to log in with my password.
And now notice what -- where is the log in button?
I'm going to click log in and watch what happens to the URL.
I can't see it all at once.
Here we go.
Log in. So I have to name my new computer.
This is actually a security feature that I have turned
on just so I can detect who is logging
in to my Facebook account after lecture.
But now notice what did the URL go back to?
Dammit; right?
Even though I used HTTPS for the whole transaction,
the very last step where I logged into Facebook,
I got a response from the server.
It says, okay.
You're logged in.
Now go to home.PHP, Facebook's home page.
Guess what URL they redirected me to?
HTTP. So even though I've been keeping my little hand stamp
secret for all previous steps, I went so far
as to manually type the S into the URL,
then Facebook took it upon itself to say, hey there,
here I am, I'm logging in now.
And that cookie is now compromised.
And those of you who are playing with fire could now log
into my little happy account here and see exactly what I see,
which is zero friends with this particular account.
It's actually fascinating not having signed
up for Facebook account in like five or six years
to see what the rest of the world is now going through,
but not the point of today.
So SSL doesn't seem to work perfectly, because you,
the user, have no control
over where the web server is going to send you.
Now, I wouldn't be surprised, frankly,
in the next several days, weeks, months, that Facebook,
because they're just so dam big and because this is going to be
such a headache for them having so many compromised accounts,
so many more spamming accounts from compromised accounts,
I wouldn't be surprised if they just move all of their servers
to HTTPS and some of this will be taken care of for you.
But what can you do in the meantime?
Because literally what you saw me do is as easy
as running this utility.
What are some of the options you actually have?
Well, there are also some other plug-ins.
So you have to start using a certain browser to use these.
But if you use Firefox or are willing
to download the free browser called Firefox,
there's another plug-in called forced TLS.
That's actually been around for a long time.
And this plug-in essentially monitors
in a good way all of your web browsing.
And any time that it sees that your browser is
about to request HTTP colon slash slash for a known site
like Facebook or Twitter, one of these sites
where they know they support HTTPs, they just don't seem
to be using it 100 percent of the time,
this plug-in will intercept that request, change it to HTTPS
for you and then let the request go along its way.
So these slides will be on the lectures page today,
but there's an alternative.
Pretty much the same kind of plug-in.
It's just a competitor plug-in, but they're both free.
HTTPS is everywhere from the Electronic Frontier Foundation,
which is an organization that's all about privacy.
And they, too, have put out a plug-in for Firefox
with which you can mitigate this.
Unfortunately it's not the solution.
It's not a fundamental solution.
All you do is raise the bar.
And this is actually a recurring theme in security and certainly
in security research, which is between us, the good guys
or most of us, the good guys and the bad guys out there.
All you can really do is raise the bar higher
and higher and higher.
And it's pretty much going to be a perpetual cat and mouse game,
though, between good guys and bad guys,
whereby all we can do is push the threat a little farther out,
make it a little harder for someone else
to compromise our accounts.
Case in point, even if you use HTTPS, it doesn't matter.
For years there have existed what are generally called man
in the middle attacks, whereby if the idea
of security behind SSL is that I'm supposed
to establish a secure connection between me, point A,
and say facebook.com, point B, well, I can use HTTPS.
But what if my laptop is tricked into talking
to not facebook.com, but a middleman, a man in the middle,
some other computer, some other router,
some person in this audience who has enough technical savvy
to either write or these days just download a program
that listens for requests to facebook.com
and responds quicker than Facebook and says,
I am facebook.com, my little PC here, my little Mac.
And so my laptop, because it's requested facebook.com,
it then goes essentially to your IP address,
really to your ethernet address.
And you then reply to me with an HTTPS response.
So you know what, I am actually using HTTPS.
I have a secure connection, but to who?
Right? The bad guy then, you, on your computer can proceed
to finish the other half of that connection
and establish a secure connection
to Facebook on my behalf.
And, frankly, it doesn't take all that much savvy these days
to write or, again, to download a program whose purpose
in life is to sit between points A and B.
And if I request home.PHP, Facebook's home page, well,
I look at that and I say, oh, this victim wants home.PHP.
Let me request that of facebook.com.
Let me get the response, then forward the response to them.
So you can have someone sitting
in the middle watching every message you send,
every pope that you send, every profile that you visit.
If you have a man in the middle,
you might very well still have a secure connection,
but to the wrong person out there.
And this one is harder to mitigate.
There are certain defenses that require certain software
or hardware on one's computer,
but at least now there's not a Firefox plug-in
that makes it point and click to actually wage this attack.
But none of this stuff -- and this is the scary thing.
None of this stuff is new.
This existed since I was an undergraduate on their campus,
since as long as the web has really been in vogue
and SSL has been in use.
It's really just a wake-up call.
So what's really a better solution?
Frankly, as undergraduates, you at least have the luxury
of having access to one of Harvard's VPN's server.
So you might know that a VPN is a virtual private network.
This is just generally a technology with which you
on a laptop or desktop can connect securely using
encryption to, for instance,
one of Harvard's servers called their VPN server.
And then you have then any programs you use get routed not
wirelessly in the clear, but encrypted to FAS's VPN server,
and from there is goes out to the rest of the internet.
So if you actually want to use this,
Harvard actually made this easier a year or so ago.
If you visit VPN.FAS.Harvard.edu,
frankly in the short term if you are worried
about some nosy friends frankly trying to mess with you
and your accounts, this is probably
of all the solutions we just rattled off one
of the most robust, because it encrypts everything
about your traffic, not just special sites
that does plug-in's know about.
So if you go here and log in with your user name,
I think you have to type at FAS or at FAS.Harvard.edu
and then your password.
Click log in.
A little Java program will run
that will then create a new encrypted connection between you
and Harvard's FAS servers.
This should be much less vulnerable to the man
in the middle attack, because, well, hereto it is possible
that the bar will be significantly raised.
And you don't have to worry about traffic leaking
out because some plug-in doesn't know about that website.
And the other thing, too, is most of you,
if you visit Facebook, you know,
if you don't have it currently open in a tab,
what you probably do is something like this --
if I'm at, let's just say, google.com and I decide I want
to go to Facebook, most
of us probably do not type HTTPS://www.
; right? Most of us type facebook.com
or something like that.
The problem is if I have not typed HTTPS:// and hit enter,
my browser, trying to be helpful,
assumes I want a website.
90 something percent of the web is probably not using SSL.
Made that up, but it's probably true.
And so it's going to assume I want http://facebook.com.
So even if you have been super diligent
about always typing HTTPS and using these tools and whatnot,
you just compromised yourself,
because the next time you hit enter and that first time go
to http:// you have just showed your hand to the whole world.
So if you have some person
in the room nearby who's been running a tool like that
or sniffing your traffic, bam, it doesn't matter
if you are safe 99 percent of the time,
it just takes one divulgence of your cookie or this hand stamp
for your account to actually be compromised.
So with that said -- oh, and as an aside,
Facebook's password policy, in fact, is not all that secure.
I was able to create -- I tried creating an account just
to be funny using --
was it President Skroob's password of 12345.
It turns out they don't allow five number passwords,
but they do allow six number passwords even
if it's completely just a string of like 111111.
All right.
So please don't take control of my Facebook account,
because I'd love to use this as an example in the future
with the same accounts.
All right.
So any questions on this scary Halloween story?
Yes. Okay.
You two gentlemen with the laptops.
>> Yes. So if you log out every time, does that secure it at all
or does it get sent every time you try to activate it?
>> Good question.
If you logged out, are you thereafter safe?
It depends.
Sometimes when you log out,
the website does not actually scrub the data
on the server side.
They don't actually remove their copy
of that cookie, that unique number.
And so even though your browser might forget who you are,
that doesn't mean the cookie doesn't still exist.
And if someone has been sniffing your traffic, their Firebug --
Firefox plug-in might still work.
So, in short, logging out is good.
You narrow the window of opportunity
by not staying logged in
and just letting the website continually contact the server,
but it just raises the bar slightly.
It's a good habit, but it's not a solution.
Yeah?
[ Inaudible audience question ]
>> It's a good question.
What do these guys propose to do?
So the development of this program really was meant
with the best intentions.
And this always sparks religious debates over whether or not you,
as a researcher or academic or just good citizen,
should actually tell the world when you find vulnerabilities
in products or in software programs,
because it's a two edge sword.
On the one hand you educate the good guys so they can shore
up their defenses and protect against these threats.
But the downside of telling the world about a vulnerability is
that now all the bad guys know.
I mean, I'm generally of the opinion that you might
as well share this information,
because odds are the bad guys probably know.
And you know what they're not doing is telling you.
Right. So really you're not defending against --
you're not protecting yourself all that much more.
So generally getting people mindful
of these issues is likely to spur them to action.
So one of the things that these fellow recommends is really
that certainly all websites that exchange any kind of credentials
by a user name and password
or subsequent cookies run them over HTTPS.
In fact, Gmail was known this past summer or so
to finally move all Gmail servers by default to SSL.
One of the common concerns with SSL is
that it takes more CPU cycles.
Therefore, it takes more servers.
Therefore, it takes more money.
But we actually linked on the lectures page today
to a write-up by a google researcher who explains
that it only costs google like two percent more in CPU cycles
to enable SSL for all of their e-mail servers.
And so that's pretty compelling.
And they had to do some tweaking and whatnot,
but there are certainly some lessons there
that anyone can use.
So, frankly, I'd be surprised if Facebook and some
of these sites just don't turn on SSL soon.
Frankly, there exists special products whose sole purpose
in life is to sit on a network, handle all the SSL traffic
and then pass the unencrypted requests off to the web servers.
So there are plenty of solutions.
Yeah?
[ Inaudible audience comment ]
>> So most likely correct.
So Firesheep works if your ethernet card can be put
into promiscuous mode, which is usually the case.
Certainly you can do it on most modern Macs.
You can do it on a lot of PCs depending on the hardware,
but it might very well depend on what you have.
But it is taking advantage of that, yeah.
[ Inaudible audience comment ]
>> So, yes, if you have physical access to the machine,
even if it's using SSL, you are not --
it's not being encrypted at the very beginning.
Your data is going to be unencrypted
in some form in your laptop.
So that's just generally true.
Any time you have physical access to a machine,
you are pretty much screwed when it comes to security,
because there are so many ways
in which the information can be divulged.
So long story short, yes, this does not solve the problem,
but it definitely gives us time to kind
of re-engineer a better solution to this.
And the problem, too, is that there are known flaws
in like the wireless protocols the world uses,
the SSL protocols that the world uses.
It's a very imperfect world.
So really this begs a bigger picture question.
You know, what really can you do?
It might not be a huge deal
if your Facebook account is compromised.
It might be a little bit embarrassing.
It's kind of more problematic
if your bank accounts are compromised
or super sensitive information is compromised.
So what can you really do?
Well, just as an aside, I think one
of the most compelling technologies
that some sites have started
to implement is what's generally known
as two factor authentication.
This, too, has been around for years.
It's just no one offers it really or really none
of us really demand it.
Two factor authentication is this technology that E*TRADE
and some other brokers use
where you get this little electronic device
that has a little LED screen with four or five
or six digital numbers on it and usually a button.
And those numbers change every several seconds
or every several minutes.
But the device has been designed in such a way
that it's synchronized with your E*TRADE account.
So what happens now is when you go to E*TRADE.com,
log in with your user name and password, that's not enough.
Once you have done that, they say,
what's the secret number that's currently on your device?
And you have to provide that same number.
Otherwise, they assume this is just a bad guy who's stolen your
user name and password or who's guessing your user name
and password, but doesn't have physical possession.
So two factor authentication, frankly, it's hugely compelling
and that it requires that to authenticate yourself,
to prove you are who you are, you need to know something
like your password and you have
to have something like your key fob.
But thereto someone could certainly, you know,
beat the password out of me and just steal the key fob be.
And then they would have two of those factors,
but it's a lot harder.
And thereto they need physical access to me, the human,
to actually track that device, which raises the bar.
I'm not now exposed to billions of humans on the internet.
I'm only exposed to the people in this room at the moment
with my little secure key fob.
But there's other approaches, too.
You don't need special hardware.
Bank of America has a neat trick whereby if you have a phone
that supports text messages, when you try to log
into their website, if I have turned this on,
you have to provide your user name, your password.
And then they send you a text message
that is this random number.
The idea being that unless someone somehow intercepting my
wireless phone traffic, only I am going
to receive that text message.
So now I can type that temporary numeric code into the website.
But there, too, you know,
our wireless networks certainly have vulnerabilities in them.
But, again, you raise the bar.
And one of the best defenses frankly
against the security issues is most people
in the world don't care about what you're doing
with your Facebook account
or don't care what little old you is doing on the internet
with your instant messages.
It becomes a problem like it has the last couple of days
on the campus we all know a lot of people
who wouldn't get some sort of amusement out of, you know,
embarrassing you by logging into your Facebook account or any one
of these other accounts.
So when you actually have credible threats,
even if it's just playful, then you need to worry a bit more.
And even on the internet it's not compelling
to get my little Gmail account or my little Facebook account,
but to get mine and 900 other thousand users accounts.
Because once you have access to a million Facebook accounts,
you can send a lot of spam, at least for a few minutes
or hours before you're detected and shut down.
But that's millions more spams than you might have been able
to send out otherwise.
So it's when your adversary cares about who you are
or doesn't care,
which unfortunately is the complete set of possibilities,
that you are really at risk for something.
So with that said, how does this work?
How do we defend against it?
And how does it relate PF7 and beyond?
So you have a couple of handouts today.
These are really meant to be cheat sheets for some
of the languages and technologies we're using.
They're not exhausted.
And what you will find on the internet is that there's a lot
of differences when it comes to syntax, capitalization.
So try to see through the messiness and turn to me
or the teaching fellows or help.CS50.net
if there's ever any ambiguity.
But we pulled out some decent PDFs that some nice people made
that offer some common tags for HTML, some common properties
for CSS, some common functions and commands
for something called mySQL,
which is a data base server we'll start to talk about today
and some common functions for PHP.
This is not at all exhausted.
This is meant to be the sort of thing you just keep on your desk
as you are coding, and it might be a quick answer
or you might have to turn to google.
But for those of you who have never coded HTML before,
this is actually a decent little tutorial
to at least read or skim through once.
So all of these are linked on the course's website, too.
And then, finally, I want to draw your attention to this.
So for the handout for Monday was about the final project.
And recall that there were these links on the front page
that recommend that you look at some of these resources just
to entice you with this.
Notice that, one, any of the campus related apps we talked
about in the course, whether it's events or courses or tweets
or news or maps, all of them have what we call APIs,
application programming interfaces, whereby if you don't
like the way we've implemented the core shopping tool,
if you don't like the way we're presenting the shuttle data,
well, that's okay, because we can give you all of the data
in raw format so that you can then represent it to the world
in a website, in a C program, in an iPhone app,
in an Android app, in a Blackberry app,
any kind of application you want for your final project.
So realize that these are all available.
One of the most popular APIs to use for final projects, frankly,
is the Harvard food API whereby we screen
and scrape Harvard dinings services website, which is,
frankly, a little hard to navigate when you just want
to know what's for lunch.
And we then give you all of the data in raw format
for breakfast, lunch or dinner on any given day.
You can search based on dates.
We've also put on the course's website and on this sheet
from Monday a list of what we call fun APIs.
There's a lot of third party websites and companies out there
that provide really neat functionality and/or data
these days.
And this is frankly
where programming is really getting fun and exciting,
at least for me these days, whereby it's getting
so much easier to make cool things relatively easy.
Case in point, the Shuttleboy text messaging service
that I demoed a few weeks ago I don't really know much
about how cell phones work.
I certainly don't have access
to like Verizon's equipment and all of that.
But using a free or ad supported service was I initially able a
couple of years ago to implement
that program whereby I made a website, a PHP based website
that listens for web requests for an origin and a destination.
And then I just spit out the response after I look
up in the data base for shuttle boy when the next shuttles are
for point A and point B. And then this third party company,
thanks to their API, routes my website's response
to your cell phone whether you're on Sprint
or T-Mobile or Horizon.
So it's really quite cool what you can do.
Google calendar has an API whereby you can get all
of the data from a google calendar.
You can put data into a google calendar.
I'll google Checkout and Paypal if you want to create a website
that actually charge people money.
Frankly, I always thought this was a missed opportunity.
The Quincy Grille, bless their heart, has been popular
for years, apparently still takes orders by a Gchat,
which is actually pretty clever, I think,
to actually have a little window open there.
But, just think, you can allow people to pay
for food with credit card.
You can have them order it.
You can maintain logs.
You can know exactly how much food is going in and goes out.
I think this is, frankly, a really neat fine project idea.
Foho [assumed spelling], as well,
apparently does it in person.
You have to visit the desk.
And I would like a hot dog.
We have computers that can tell the people
that you want a hot dog these days.
And they can charge you for it, too.
Google Finance, Yahoo Finance we'll look at this week.
Google charts, if you want to create interesting visuals.
What else here?
A few more.
Anything related to maps, mobile phones, news, I mean, profanity.
We have accounts with a provider if you want
to write an application like I saw you at Harvard and you want
to filter out the crazy talk, at least with high probability,
you can use profanity type filters and automate
that process and not have
to spend human hours actually regulating what your classmates
are posting to sites.
So do follow those links.
There's some really juicy stuff there.
So let's actually start to give ourselves the framework in which
to use these kinds of tools.
So HTML is a mark-up language.
It is a language that's not really
about programming and logic.
It's really about structure and esthetics and display.
We have the open bracket HTML tag, which tells the browser,
here comes a web page.
We have the head tag and the title tag
that says here comes the site of the page
in the so-called header.
And we have the body tag which says,
here comes the body of this page.
And we saw briefly on Monday things like the tag
for anchor for hyper links.
We saw the image tag, IMG for images.
And can you see on this cheat sheet
that we really just scratched the surface on Monday.
But anything you've seen on a website today,
you can implement yourself.
And I can't emphasize enough utility, again,
of actually learning from existing examples.
If you want to know, for instance,
how Facebook put this table of first name, last name over there
and how did they put that picture over there, well,
you can certainly go to the view menu and go to page source
and you can see all of the raw HTML
that implements this website.
But generally it's pretty messy.
So it looks like very bad style.
Nothing is really indented.
There's no comments, but that's to be expected.
If every byte costs Facebook money,
you don't necessarily want to send all
of that additional formatting to the browser.
But realize that there are some really wonderful tools.
And we've linked these on the course's website
and we'll mention them in problem set seven.
The one I think I showed
on Monday is called Firebug whereby you can visit any
website like facebook.com, and then if you want
to see how they implemented this word sign-up,
how did they put this text way over there and not all the way
on the left, well, you can right click or control click it,
choose inspect element and bam, this plug-in called Firebug,
which is kind of a debugging tool, shows you exactly
where in the HTML they have laid
out that particular text or image.
It's so nice for actually boot strapping yourself to nutrition
and understanding how the web currently works.
So that was HTML that.
We talked briefly about CSS.
And it was requested we change the font of some text,
the font size of some text.
I needed to align things in the center as opposed
to being flush on the left.
And so we use this language called CSS,
called cascading style sheets.
And thus far we've seen it really in one context.
We had a style attribute.
You recall that an attribute modifies the behavior of a tag.
And we said style equals quote, unquote, and then we had a list
of properties: Color, colon, white, semicolon,
and then font family, colon, san serif, semicolon and the like.
And for more such properties, again,
you'll have such resources as the little cheat sheets
from today and google is your friend.
And we have enumerable resources on the course's website.
But everything we did on Monday was static; right?
We wrote it.
We saved it.
We pulled it up in a browser.
And it never changed on me.
If I kept reloading that hamster, I saw the same hamster
and the same text again and again and again.
And this is very much web 1.0.
So it's stupid buzz words, web 1.0, web 2.0.
Web 2.0 is just a monocure that the world gave to this idea
of websites taking more and more user input.
So you have websites like Facebook and YouTube
and Flicker being part of web 2.0
where it's not just Mark Zuckerberg and one guy
at Flicker and one person
at this other company making content for the world to see.
It's those people making a website
with which you people can make your own websites and profiles
and the like which then constitute the content
of that page.
It's a brilliant business model.
Right. You build the infrastructure, the framework.
And then you let everyone else do all the hard
and the interesting work.
And that's very much the phase we are currently in.
So we don't, though, have the ability yet like Mark did
with initially making Facebook
to actually code things dynamically.
I could make a site that looks like Facebook.
I could hard code a profile for myself with happy cat
in the top left corner and my name David Malan
in the top middle of the page, but it's going to never change
if you reload it, reload it.
The only way my profile is going to change is if I SSH
to the cloud or if I use SFTP
and enter a text file and save it.
And this, again, is not what you're all doing
on Facebook these days.
You're using the web to edit the web,
because all of the HTML being spit
out by Facebook is not dot HTML files, but it's dot PHP files.
On other websites it's not necessarily PHP.
It might be Python or Ruby or C plus plus or C Sharp or VB.
Any number of languages can generate HTML.
So whereas Monday it was about creating HTML by hand,
today it will by creating HTML dynamically, by programming.
And we'll come circle now with our programming tricks,
but first a five-minute Halloween song break.
[music] We're not done yet.
All right.
So we are back.
Let's actually go ahead and sniff some
of my own Firefox traffic to actually see
in what way these accounts are being compromised
and then how we can actually use the same mechanism of cookies
for actually good and compelling reasons.
So I'm going to go ahead and pull up Firefox again here.
I've already pulled up Firebug, which is a debugging utility.
Some spirited DGB, but much more web centric.
It's got different types of features.
Some of them are just esthetic like letting you see things,
but I'm going to go specifically to the net tab, which is going
to show me all of my network traffic.
Realize that what I showed you before
with the thing called Wireshark where we saw all
of the data flowing across the screen in rows,
that's a lower level packet sniffer that shows me
that this is related to HTTP, this packet, this is related
to instant messaging,
but it doesn't reassemble everything nicely
in a nice graphical user interface.
So, again, per my hand gestures on Monday about layering
on the energy net, ethernet and an IP and TCP,
these programs do the same thing.
We're going to see a nice user friendly view
of what my browser is doing with Facebook server,
but it's on a higher level than we looked at earlier today
with the raw packet sniffer.
So for debugging purposes and actually
for development purposes for P set seven and on beyond,
it's always a good practice to get in the habit
of clearing your cash often when the designing websites
so you don't get confused by having changed something,
but the browser doesn't realize it because you forgot to reload.
In short, re-clearing your browser
by whatever menu options is appropriate.
Ask a friend or google for your browser is a good thing.
It will avoid confusion for yourself.
So I now have a fresh cash.
No pages have been downloaded already even though I see the
remnants of this past one.
I'm going to go ahead and click on facebook.com.
And now down here on the left, it looks like when you pull
up facebook.com for the first time,
it looks like 15 HTTP requests are induced
between my browser and the server.
Now, I only visited one web page.
What are all those other requests?
Well, Facebook's got images.
It's got a language called Java script.
It's got this other language called cascading style sheets.
Some pages have videos and sounds.
And so there's lots of files embedded in a website.
Case in point, on Monday when we embedded the hamster
into my web page, I had index -- or rather I had hello.HTML,
but then inside hello.HTML I mentioned a file,
the URL of that hamster file.
And so the way a browser works is it actually uses recursion.
When it downloads a HTML file or starting today a PHP file,
it analyzes that HTML source code top
to bottom, left to right.
And if it sees the names of any other files like a JIFF
or a JPEG or a HTML file or whatever,
it then recursively requests those files and grabs them
and then integrates them into the web page.
And so this is what's happened here on this table.
It looks like there's 15 files
that compose Facebook's home page at the moment.
The one I really care about now is the first one,
because that's what started it all.
If I click this link, again, I see a lot of juicy information,
some of it archaic and some of it useful for us.
My request headers are the ones we looked at Monday.
Notice when I pull up facebook.com,
I'm telling the server what I typed into the address bar,
which can be useful if multiple websites are on the same server.
There's this mention of Gzip and deflate.
This just means that my browser knows how
to compress information.
So if Facebook wants to save some bytes
and send me a compressed response, I can decompress
that for efficiency sake.
And then I apparently go
and download all these randomly named files
that compose the rest of the site's content.
So now let's go ahead and do this.
And I'm going to go ahead and log in as Malan at CS50.net.
And my password for the world to see --
I'll change it later -- is 12345.
It was too short, but 6 worked.
So I'm going to go ahead and go here.
And, actually, let me go to --
let me go ahead and click log-in.
All right.
Good. No one has changed my site yet.
This, as an aside, is a security feature that Facebook offers.
If you go to like account settings, security,
something like that, you can have the site email you any time
someone logs into your account from a new computer.
This is use, frankly,
if you think a friend knows your password
or has been figuring out your password.
It does not protect against the attack we looked at today,
because I did not know Rose's password.
This prompt only protects
against someone figuring out your password.
So I'm just going to say, this is my MacBook Pro.
And this is just my reminder that it's okay
if Facebook sees traffic from this computer again.
But the point here is this --
let me go ahead and actually clear this screen
so we see it again.
Malan@CSF50.net.
123456. Enter.
All right.
So what just happened?
So I ultimately got my home page or my profile.
But notice this, I first clicked
on the first page that was visited.
And notice the URL, HTTPS.
Now, I can still see my own traffic.
So in answer to your comment, David,
about it still being unencrypted somewhere,
I am in my own browser can certainly see what data my
browser is sending.
So it's not being hidden from me.
And that's what we're seeing,
what my browser sent to Facebook.
I want to look at request headers here for a moment.
And under request headers,
it looks like Facebook sends all traffic for log-ins
to a server called login.facebook.com.
It looks like down here, I have now this thing.
Let me go here to post.
You might be generally familiar
with the idea of post versus get.
To post information to a website means
to submit information to a website.
This, again, is just a tool that's making things nice
and pretty for us to see.
But what Facebook receives is essentially a hashtable
containing a bunch of keys on the left-hand side,
one of which is called email, one of which is called locale,
one of which is called pass.
And on the right-hand side are those values.
And so what we get here is apparently some evidence
that my e-mail address is indeed Malan@CS50.net.
My password at the moment is 123456.
And that's literally the information
that was sent to Facebook.
This, again, is just this Firebug tools presentation
of this information.
Let me actually look at the raw source that was sent.
When you submit information to a website,
what really happens here is -- can I see it here?
Request headers.
Let me scroll up here.
Post. What really happens is this:
It's going to look a little arcane.
But what was sent to Facebook's website was this super
long string.
But this string is essentially key value pairs,
a key like this called Char-set test equal sign
and then some value.
This value looks a little weird, but that's fine.
But let's fast-forward to the bottom.
It looks like then there's an ampersand.
So what's sent to a website is an ampersand
in between these key values pairs
and then a key email equals mail
in some weird character at CS50.net.
This percent four zero is just a web oriented way
of encoding an at sign.
So it uses simpler characters just in case weird characters
like at signs break things.
And there's my password.
So in short what is actually sent to facebook.com,
what I have highlighted here, a bunch of stuff
that we're not going to care about today,
and email equals Malan@CSF50.net and path equals 123456.
The web server on Facebook's end passes that request.
It's just a big line of text.
It's a big string, passes that to what's called a PHP program,
a program written in PHP that analyzes that string,
looks for all those ampersands and splits that big string
on all the ampersands and then looks for equals signs
and splits that big string on all those equal signs
so that it can then in ram in memory create a little table,
a little hashtable like this.
And, nicely enough, what PHP is going to do
for us is it's just going to hand us all
of those key value pairs in a variable that,
in fact, is a hashtable.
So you'll see that what you're doing very low level this week
and see implementing a hashtable is going to be handed to you
in ever so nice form in PHP by way of one variable
that you yourselves don't have to implement.
But now let's look at the server's response.
So I'm going to scroll back up to the so-called headers.
And notice that Facebook server has actually responded
with a whole bunch of junk,
most of which is not too interesting for us today.
But the key word of the day certainly is this, set cookie.
Once I have logged into Facebook, Facebook servers,
behind the scenes, replies to my browser with another one
of these HTTP headers.
We've seen a few of these.
We've seen location, colon.
We've seen the word, get.
We've seen this stuff on Monday and now again today.
This row here that says set cookie is Facebook's way
of telling me kind of nicely, but forcibly,
remember this information.
And it's planting this information essentially
in my ram or in a file on my hard drive
in some default Firefox or Safari location.
And my browser's purpose in life henceforth,
according to HTTP version 1.1, it's supposed to grab
that information from information from ram or grab
that information from disk and resend it to Facebook any time
in the future that I request a web page.
So you can think of this huge junk, huge mess of text here
as the conceptional hand stamp.
It's a lot of key values pairs.
And every time I visit a profile or your profile
or send a message or click that link on Facebook, I'm supposed
to re-present this data.
So it's a little inefficient arguably.
It's a whole lot of text to be sending back
and forth across the internet.
The web is not really known for its space efficiency,
but Facebook appears to have consciously decided
to set a lot of cookies.
But I believe -- don't quote me on this.
I believe the one that matters for Fire --
what's it called again -- Firesheep what matters,
I believe, this is the scary cookie,
this one down here XS equals ZB06617 --
so this is the big random number I eluded to earlier.
Even though there's some letters in there, that's fine.
We know about hexadecimal notation.
There's other basis systems.
So it's still a number
that we're drawing using English letters.
It's a big random number.
The key, the cookie is called XS.
And I think just based on having read this fellow's work,
I think that's the one that Firesheep is looking for,
stealing and then re-presenting to the website as its own.
And there is nothing, again, in that tool Firesheep
that I couldn't have done in today's lecture manually
by just copying and pasting that kind of string
or snipping the traffic with that low level packet sniffer,
but it would have taken a lot more work.
And what's scary, there's this term on the internet known
as script kiddie, this refers to someone
who might be a kid, might be an adult.
It's generally someone with too much free time
and relatively little technical skill, but who is good
at downloading things and double clicking things.
And so when you start to put tools like this into the hands
of the masses, frankly,
it's probably overall a big net positive, because it wakes
up people who have no clue how this stuff works
that they really need to get their act together
and consumers need to start demanding this kind
of protection.
So that's the cookie it seems that's going back and forth
across the wire that's making us all vulnerable.
How is now home.PHP, the site that many
of you probably spend way too much time on,
how do you actually implement a file like this home.PHP?
Well, it turns out if you have access to a web server
like the cloud, it's actually -- there's all the internet traffic
in the room still going across the wire.
It turns out that it's relatively easy to get started.
So I'm going to go ahead and SSH to cloud.CS50.net.
I'll make the font bigger in just a moment.
All right.
I'm going to go into, if you recall,
my public HTML directory.
And in case some of you guys have been
like very zealously trying to get started,
recall I typed this command the other day,
A plus R for hello.C -- hello.HTML.
This command gave the whole world all readabilities.
Plus R is read.
So there's another command, though,
if you need to make a directory accessible,
folder accessible on the web.
So just FYI, if you're doing this on your own before
of P set eight -- P set seven goes out,
you need to do Tamed [assumed spelling] A plus x, little x,
on two things, your public HTML directory, and you also need
to do this on your home directory denoted
by a single tilde.
There. All right.
So let me go into my public HTML directory,
but all that will be spelled in P set seven
into eight into source.
And I'm going to go ahead --
actually, let me do something even quicker.
It turns out I can do this.
So we made this file the other day.
Hello.HTML.
And it looked like this:
cloud.CS50.net, tilde, hello.HTML.
Oh, and as an aside, let this be confusing.
Unfortunately the left hand was not talking to the right hand
when the internet was made.
And so Tilde means your home directory.
When you have SSH'd to a server like the cloud, unfortunately
in a URL like we used Monday tilde CS50 is not your
home directory.
It's instead your public HTML directory; right?
So it's close, but there's slightly different meanings.
So don't get the two confused.
So tilde at the command line is home directory.
Tilde in the context of a URL is
that user's public HTML directory.
So I made this the other day.
It turns out if I want to make a dynamic website,
watch this magic.
So I'm going to go to my terminal here.
CP for copy.
Hello.HTML, hello.PHP and, wallah, now I know PHP.
All right.
So it turns out that PHP is a an interpreted language.
And this means I don't have to run a compiler.
I don't run GCC or anything like that.
It just kind of works.
And PHP is like a lot of languages in this regard, Pearl,
Python, Ruby, Java-script.
Whole bunches of others are what are called
interpreted languages.
And they're generally smiled upon,
because it eliminates a step.
It just makes it a little faster, a little more friendly
to develop code, because you don't have to recompile, rerun.
It just works after you reload the web page.
But there is a slight down side.
If you are not actually compiling a program downs
into zeros and ones that specific CPU understands,
what's probably the price you're paying
if you're skipping that step?
It's probably performance; right?
Because I keep saying verbally
that a browser reads an HTML file top
to bottom, left to right.
Well, web server does the same thing with PHP.
When my web server, something called Apache,
which is free software --
it's probably the most popular web server software out there
that we're running on the cloud.
When Apache, the web server, realizes, oh, some random person
on the internet wants a dot PHP file,
it doesn't just send the PHP file to the user's browser,
because otherwise that would divulge all
of the intellectual property that I wrote
in the form of that program.
What it's supposed to do first, the web server,
is open this PHP file and read it top to bottom, left to right
and look for any PHP code that's in that file.
And if there is any PHP code, it should execute it.
If that PHP code's purpose in life is essentially
to call print F, it should actually send
to the browser whatever the PHP program printed.
And then only do I get on the user's end, the browser,
the HTML that resulted from that process.
So in short just as you guys have used print F or some
of the end curse's functions to print information to the screen,
that's ultimately what we're going to be using PHP for,
to print or to echo or to output raw HTML code that changes
because our PHP code is an actual programming language
with if conditions and loops and functions
so we can output any HTML function we want.
So how do we actually do this?
Well, I really just cheated there.
When I loaded hello.PHP, this is literally the same file
from Monday.
But that's consistent with my story, because when I said
that when the web server pulls up this file,
it looks for any PHP code.
And we had no PHP on Monday.
I didn't write any PHP on Monday.
So it's kind of an empty task.
It looks at the file, doesn't see any PHP.
So it sends everything else raw to the browser.
It sends all of that HTML.
So what the browser sees, if I view source on this page,
is literally what's on the server.
But now let's do things that's a little more dynamic.
Let me go ahead and not cheat in this way.
Let me go ahead and do something like this.
Let me delete the hamster from Monday.
Let me really simplify the code here
so we can focus only on the PHP.
And I'm going to tell the web server here comes some PHP code.
And the way to do that is
with an open bracket, question mark, PHP.
And then you do almost the opposite,
question mark, close bracket.
This tag tells the web server here comes some PHP code.
So anything that's in between these two tags is executed,
is interpreted on the server, converted or converted to HTML.
And then the result is sent.
So in my browser I should never see open bracket question mark
unless the web server is broken or is not configured correctly
and accidentally divulged all of my source code.
Now, as an aside, this is kind of a stupid looking tag.
And the world has come up with what are called short tags,
which folks have rather religious feelings on this.
I'm going to save that.
Let me do this again.
I would say stylistically it's a lot easier.
And, frankly, the nitpicky side
of me prefers the symmetry of this.
So in the course you'll generally see me write PHP code
like this and just omit the word PHP,
which frankly I've always thought is stupid that I have
to constantly say what language I'm using when it's obvious.
So this looks a little cleaner to me.
It's certainly saved me three key strokes.
So let's go ahead and do print, hello world,
exclamation point, semicolon.
Now, let me go back to the browser, reload, wallah.
My first dynamic website.
I'm now actually calling a function print F just
like in C. It's printing hello world.
Now it's a PHP website, but it's not really dynamic; right?
It's not actually changing.
So could I do something different?
Well, I'm really going to cheat here.
I'm going to go ahead and print out --
it turns out PHP has a function called date.
And date takes an argument
that specifies what you want the date to look like.
So I'm going to say something like YMD for year month day.
So notice I'm just calling a function called date,
passing it another function called print F. Notice here I
don't need to use the format strings, because I'm just kind
of printing some static string here.
I could use percent signs, but notice in PHP more commonly used
than print F is just a function called print.
So I'm going to get into that habit just to be consistent
with what the world uses.
Reload. And, dammit, server is not configured correctly.
How to fix this problem?
Quickly. Let's not do -- let's do this: I can cheat.
Let's print out the current time in seconds since January 1st,
1970, because that will change every second of this demo.
Dynamic website finally.
All right.
So I'm printing the clock on the server
by reloading every second.
All right.
So overwhelming.
Let's actually do something that's more compelling
than just printing stupid exercises like this.
So let's literally go into code quite
like what I did several years ago for frosh IM.
So, again, the silly back story was
that years ago there was no freshman intra-mirror website.
And so if you wanted to sign up for a sport, you would go
to the proctor's dorm and wiggle's worth, slide a piece
of paper under the door and, wallah, you were registered.
And maybe they'd email you back.
So now we introduced in 1990 or whatever a website.
Right? And it looked a little something like this.
And this is just using some simple HTML,
which we'll look at in a moment.
But what's compelling about this website versus Monday's is
that I just have hyperlinks and images in a web page.
I now have form controls.
And the funny thing is we humans have done amazing amount
of interesting work using so few user input mechanisms.
Even though the websites today kind of make some
of these things look a little sexier, a little more colorful
and pretty, for the most part the worldwide web supports only
these forms of user input.
Text fields like the name field up here,
sometimes it can be multiple lines
which is called the text area as opposed to a text field.
Website support check boxes, that's something like this.
Something like radio buttons which are similar
to check boxes, but these are mutually exclusive.
If your check one, you can't check the other and vice versa
and these things called select menus or drop-down menus.
And, again, on various websites you see somewhat
different interfaces.
And that's because people are using a language called
Java-script and CSS all the more to simulate
in sexier form these basic user input controls.
But recall that when I visited Facebook,
I had to provide my user name and my password.
I clicked submit.
And in those key value pairs were submitted to the server.
Let's actually see what happens here.
So here is a form.
Imagine it's some random website you discovered as a freshman
when you want to register.
I'm pulling up Firebug and my net tab just so I can see what's
about to go across the wire.
And I'm going to go ahead and type David here.
I'll nominate myself as a captain, male,
Matthews, and now register.
And now let's see what happens.
All right.
It looks like the website says I'm registered, but not really.
This is just version one.
And so now let's look down here.
If I expand this link, notice what was sent
to the server was a bunch of key values pairs.
Captain was sent a value of on.
So it turns out when you check a box on the web,
the keyword on is sent to the server.
The word Matthews was sent as the value of dorm.
M was sent for gender.
David was sent for name.
What was really actually sent across the wire?
Well, again, as I predicted earlier, what's really sent
from browser to server is just a really big long string
with a bunch of ampersands and a bunch of equal signs.
Again, this is just a pretty printed version.
This is what my browser, because it knows how to speak HTTP,
sent from browser to server.
Name equals David.
Ampersand captain equals on.
Ampersand gender equals M and so forth.
Those are HTTP parameters.
So this begs the question if I now want to be a programmer
on the web, I need to be able
to access those values on the server side.
So let's actually take a look
at what frosh IM's one dot PHP looks like.
It turns out that even though I called this PHP, just to get me
into the habit of writing PHP code,
everything in here is static.
So I'm kind of cheating.
Technically this could have been an HTML file.
But if I scroll down, the takes aways
for today are a few new tags.
I've got a DIV tag up there.
And I'll make the font a little bit bigger.
I've got a DIV tag up there,
but that's just doing some structural stuff for me,
but H1 tag that says register for frosh IMs in big bold text,
and then this form tag.
And it's the form tag really
that the magic starts to happen with.
So I've got this form tag.
Recall we used this for the google example on Monday.
The action value here is register one dot PHP,
because I just decided based on my design of this program,
frosh IM's one dot PHP when the submit button is clicked,
is going to submit to, is going to post
to this file called register one dot PHP.
So that's where the interesting stuff must be happening
for frosh IM's registration.
What method am I going to use?
Well, I chose to use post.
Long story short, today there's two methods in the world
that are those commonly used get and post.
What's the difference anyone?
So get --
[ Inaudible audience comment ]
>> Exactly.
If you used method equals quote, unquote get,
all of these key value pairs get sent in the URL
where the user can see them.
But that has advantages, because it means that you can copy
and paste the URL into an email.
You can bookmark it.
But if you're submitting like a password,
you probably don't want that in your browser's history
in the URL bar.
So any time you want to submit information that's a little
sensitive, you should generally use post.
Or if you want to submit information like photographs
or just things that obviously can't fit
in a URL, you use post.
Now, I have what's called a table here.
This is kind of frowned upon by some people these days,
but the realty is it makes things really simple.
What I have here really on this page
if I change border colon zero to border colon one,
what's really going on here, it's kind of a nice way
of laying out this page.
Come on. Let me cheat temporarily.
So what I really have is the table in the middle of this page
that looks a little something like this.
And if I really change what this looks like --
and, again, we won't focus so much on the HTML aspect today.
What's really going
on underneath the hood here -- sorry.
Oh, dammit.
All right.
I can't show you the border.
Oh, wait. Yes, I can, if I actually save the right answer.
Okay. So this is what I have done to lay out this page.
And it's a common approach that we use
in P set seven for simplicity.
But I wanted everything to be a little anal
to line up nicely here.
So really I have a table underneath the hood with rows
and columns, but just lining all this up, but this looks,
frankly, very amatuer.
I didn't want people to see these ugly lines in the rows
that compose the grid.
So I essentially changed border equal to zero.
As an aside, there's more sophisticated ways
of laying stuff out, but at least
for P set seven we'll probably take this relatively
simple approach.
So this then begs the question, how does this data get
from frosh IMs one dot PHP to register one dot PHP?
Well, just a couple new tags.
There's this tag here.
Input name equals name.
Type equals text.
Input name equals captain.
Type equals check box.
And we saw some of these things on Monday
when we simulated the google form.
And the interesting one at the bottom, if I scroll down,
is gender, because it's a radio button.
So input name equals gender.
Type equals radio.
And I'm not just making these up entirely as I go on.
I found in a book or a cheat sheet
that type equals radio is a legit value,
but name I have full discretion over.
Just like you can choose your own variables names,
you can choose your own form field names.
And then down here I have what's called a select menu.
Because the select menu is a little meatier,
it's got more data in it,
you actually need multiple tags to implement it.
So I say select name equals dorm,
size equals one means how many things do you want
to show at once?
Just a drop down or do you want to see them all at once?
And then I have option value equals Applicor,
and then the word I want to appear in the drop down,
and then, again, the close tag or the end tag,
which is open bracket slash option
which says that's the end of the option.
And then, lastly, I have this thing, input type equals submit,
value equals register with an exclamation point.
But none of this really pertains to what happens next.
What happens next is all of the information
in this web page gets submitted to register one dot PHP.
And register one dot PHP looks like this, not much at all.
So at the very bottom we see the spoiler for what we already saw.
You are registered?
Well, not really.
Well, what did I mean by that?
Well, at the top of this file is a bunch of PHP codes,
because it turns out, this is actually going on here.
If I start over with this form and I say, you don't need
to know my name, you don't need to know my gender.
All right.
Fine. I'm in welt, I'll tell you that much and click register,
it turns out that this page actually doesn't say
I'm registered.
It's not very user friendly, but an error has happened.
If I try to mess around and just not give the proctor all the
information I want, notice it's actually not letting me submit.
And that's because atop register one dot PHP --
let me shrink the font so it fits a little more.
Okay. So let me shrink the fonts here.
Atop register one dot PHP is this notice.
Open bracket question mark.
Question mark, close bracket.
So everything at the top of this file is PHP code.
Now, this mess here is just comments.
PHP supports inline comments with slash slash
and then also slash star, star slash comments like C.
So the PHP code is this.
And this is what's really neat about PHP is that it's
so relatively easy to get started.
It turns out that any time you submit a form from one page
to another, if the second one is PHP,
all of those key value pairs,
that so-called hashtable I eluded to before,
are handed to you in a special variable called dollar sign
underscore P-O-S-T.
If by contrast you use that method called get
where the values are still sent, but in the URL,
dollar sign underscore G-E-T in all capitals.
The underscore is just so that they figure you're never going
to choose a variable name that starts with an underscore.
So we will.
This is a special super global variable that just always exists
that you get for free.
And we're leveraging that.
What's inside of this variable is essentially a hashtable,
more generally known as an associate of array.
In C we really were limited.
The only thing you could put between square brackets
with respect to a ray was what?
Like a number, zero, one, two,
three or a variable containing a number.
What's really cool about PHP and languages like it is
that arrays are not always numeric.
They are associative whereby you can use anything
as the index into an array.
You can use a word.
You can use a number.
You can use a floating point value.
You can use anything you want.
Associated arrays in PHP is a generalization --
is an incarnation of this idea of a hashtable.
A hashtable, even though you might be implementing this
for P set six and really trying to wrap your mind around how
to implement it, at the end of the day it's one
of the most useful data structures in computer science,
because it's just a big container that takes
in keys, outputs values.
And in theory it runs in constant time or at least
in the best case it's constant sign.
So it's sort of the Swiss Army knife of data structures,
because it's just so useful as a container for stuff.
So that's what's inside post.
So what I'm saying with my if condition here in PHP,
if the name key inside of this hashtable equals equals
what's this?
Just nothing.
The empty string.
So quote, unquote.
Or so vertical bars the gender field
in that super global called post equals equals nothing
or dorm equals equals nothing, what do I do?
Well, this is kind of a long line, because it's a long URL.
I'm going to respond with not HTML, but I'm going
to call a function called header.
And that header function says,
location colon space HTTP colon slash slash.
So what this is doing is the web PHP is telling the browser,
go there to this location.
Well, what's there?
If you look at that URL,
it's the same location I just came from.
And so this is why I just ended up back where I was.
And nothing actually happened, because I then called exit.
And so I never hit the bottom of this file.
So it's important to realize again PHP's interpreted
in that it was read top to bottom, left to right.
And so if you call exit, you're just not going
to proceed any further.
Now, this is not a very user friendly version.
Let's pull up version two of frosh IM's here.
It looks the same, but now let me go ahead and just say,
you don't need to know any of this.
I'm David, and that's all.
Register. So now we finally have a more familiar user
interface mechanism.
You must provide your name, gender and dorm.
Go back. Well, how did I implement this?
Well, let's take a look.
In register two dot PHP notice I did this.
And this is what's cool, too, about PHP.
In that last example I put all my PHP code at the very top
of the file, but it turns
out that I can use these open bracket question marks really
any time I want.
I can alternate between HTML mode, which is just going
to get spit out raw to the browser.
And then if I need to make a decision here, wait a minute,
I either want to print out X or I want to print out Y,
I can make that decision in line with PHP
as follows: Here's my HTML tag.
Let me zoom in.
Here's my HTML tag.
Here's my head tag, my title tag.
Close head.
Open body.
And now I'm at the body part of the page.
I'm not sure what I want to do yet.
So I'm going to check a condition.
I enter PHP mode, open bracket, question mark.
If the name key inside the post hashtable equals equals nothing
or gender is nothing or dorm is nothing, what do I do?
Well, notice at the end of this condition slightly new syntax
versus C, notice I have a colon, but then I have close --
then I have question mark close bracket.
So that means if any one of those expressions is true,
go ahead, PHP, and just start spitting
out the following content.
What's the following content?
You must provide your name,
gender and dorm, exclamation point.
Else, notice I'm back in PHP mode, because I have
to ask a question again of the computer.
Else, go ahead and echo this instead you are registered.
Well, not really.
So I'm dropping in and out of PHP mode
to make these decisions.
Well, I can do slight enhancements of this still
if I pull up this time frosh IMs three.
Let me go ahead and do this, frosh IMs three
and open up register three.
And notice here if I'm at three and I click register here,
David, one, two, three, register.
What's going on here?
What I've done in register three is this:
If the name is not blank -- so notice I'm using bang equals.
If it's not blank, and gender is not blank
and over here dorm is not blank, notice this,
I'm going to declare a few variables.
So if you haven't caught on already, variables in PHP
by convention always start with dollar signs.
A two variable is going to be Malan at two CS50.net.
A subject variable is going to be registration.
A body variable is going to be this line here.
In PHP you can use dot as the concatenation operator,
which means take this string and concatenate it with this string
and this one and this one.
So this multiline thing here just says make a really long
string, but I'm concatenating it line by line for style,
but the magic is in this last line.
There's thankfully finally in C you have
to do everything low level.
But in PHP, male two, this subject, this body
and these headers, well, what just happened, well,
let me go back to my browser, mail dot CS50.net, which happens
to be hosted by Gmail.
Let me go ahead -- and thankfully it's GPS.
So you're not getting into this one.
Enter. And Joseph wants to be friends.
Thank you.
And wait. I got to click submit.
Wait a minute.
Come on, David.
Applicor. Register.
This better work.
Registration.
I have now implemented what I did years ago --
it took me like weeks years ago --
the idea of an email system that just informed the Proctor or me
in this case who registered for frosh IMs.
So now we have an online registration system.
More on this on Monday [applause].