CS50 2014 - Week 7

Key Takeaways

[Music] all right this is cs50 and this is the start of week seven so today perhaps thankfully We Begin our transition from the lower level World of C programming to the higher level World of web programming and with that we'll take a look at exactly how the internet works what these machines and these internets that you've been using for years now actually do underneath the hood toward a better understanding of how it all works and how you can make it work for you toward that end why don't we take a look first at a clip from a TV show called numbers that will get us started as to exactly how the internet works it's a 32-bit ip4 address IP as an internet private Network it's a meus private Network she's so amazing Charlie it's a mirror IP address she's letting us watch what she's doing in real time so there is a whole lot of wrong with that TV show so let's tease apart exactly one of the first such things and see if we can't wrap our minds around it so the last frame of that movie is of that show is this one here which seems to suggest that this is what some hacker is using to get into some system but no if you zoom in on this source code which is a language called Objective C in which iPhone apps iPad apps and Mac OS apps are written you'll see that this is for some sort of drawing program that has a crayon as a variable so Additionally you might have noticed this address here now this isn't as wrong and this is probably deliberately chosen to be an invalid address so that it doesn't actually lead somewhere if a TV viewer actually visits it but this number here something do something do something. something is what's generally known as an IP address and it's actually a good segue to this topic more generally known as IP Internet Protocol so you've probably at least heard this phrase before but what is IP or Internet Protocol as you understand it today odds are if we asked for a show of hands most of you have probably said the words IP address before so what did you mean what's that comp once more address of computer the address of the computer so that's exactly right it turns out that every computer on the internet and these days every phone in your pocket and tablet in your backpack has an IP address Internet Protocol address which is a unique address that identifies it throughout the entire internet now that's a bit of a white lie because the world's actually running out of IP addresses so we've started using private IP addresses but more on that in a moment but you can think of an IP address as like your postal service street address we've used the example of Maxwell dwar in the Cs building before 33 Oxford Street Cambridge Mass 02138 USA that is its unique address in the world similarly do computers have unique addresses they just happen to look a little different a number do a number do a number. a number and does anyone actually know what the valid range of numbers is for each of those hashes yeah exactly 0 to 255 and even if you didn't know that now draw a conclusion how many bits are used represent each of these numbers then eight apparently because if the highest you can count is 255 that's an 8bit value so in total an IP addresses 32 bits so fast forwarding to the mathematical conclusion how many possible IP addresses are there in the world then so that's 8 plus 8 plus 8 plus 8 so that's 32 bits and we've always said that 2 to the 32 is roughly okay I'll feel this one four billion right and we talked about that in week zero when we talked about phone books with crazy numbers of pages but the short of it is that there's a finite number of IP addresses and even though 4 billion might seem like a lot we humans have been consuming quite a few of them for all of our servers and devices and so forth so this is actually becoming a problem now there tends to be a scheme behind who has what IP for instance many of the computers at Harvard have unique addresses that start with one of these two values MIT similarly has a prefix and a lot of companies and universities have their own unique prefix and then most of us for our home internet connections and the like we we share some prefix that Comcast or someone like that happens to own and this is only to say that if you looked at most computers on campus they'd probably have an IP address that looks like this now you might also occasionally see an IP address that starts like this in fact if any of you grew up with internet access at home and you were ever sufficiently technically curious to poke around your own computer settings you probably instead saw an address that looked more like this that started with 10 or 17216 or 1 192.168 or some Varian thereof and that just means that the world has set aside a whole bunch of numbers to be private which means you can use them in your home you can even use them on your campus and within your company but you can't use them on the internet at large and so these private IPS have been a solution toward making sure that at least so far as the whole world is concerned we're not using that many IP addresses but at least we can on in our own campus have pretty much as many IPS as we want but who cares what's the relevance of all of this to an actual usage of the internet well let's take a look at perhaps a simple picture here let me throw both of these up on the screen and forgive my handwriting here but if we think of ourselves as being this little laptop here somewhere on campus these days it has Wi-Fi but you know in yester year and if you find the right adapter it can have an ethernet cable which would similarly let you connect to some kind of device and you can call this any number of things but I'm going to go ahead and call this for now how about an access point so this is my laptop this is my AP or access point and this is some wireless device not unlike the ones that Harvard has all over the ceilings and walls in around campus that have blinking lights and that are what your laptops use to talk wirelessly to the rest of the network so somehow this laptop is talking to that thing on the wall in the dining hall or elsewhere now meanwhile that access point is connected to something else on campus and it's probably something known as a switch and they look a lot more interesting than just these box diagrams but somehow that thing's connected to a switch and in turn somehow that switch is connected to a device that's probably a bit bigger called a router and then meanwhile Harvard is connected to the entire internet which will draw as this Cloud here via some number of wires or Wireless technology so there's a lot of steps between me and the rest of the world and indeed even within this picture here there are some other servers or Services involved and I'm just going to draw these somewhat abstractly just so that we have the acronyms before us one is called DHCP and another another one a little more interestingly for today is called DNS so these are servers that are somehow accessible to my computer as well so now let's tease apart a bit of jargon so the access point is just this wireless device often with antennas that actually lets you talk to at wirelessly at home you might call this a home router it might be made by Linkus or apple or dlink or any number of companies that in turn is connected to a switch of some sort or back home what is your Wi-Fi device probably connected to instead because you probably don't own all of this equipment yeah a cable modem or a DSL modem back home that you got from Verizon or comcast or one of those carriers so think of all of this complexity as supporting a university or really a business like Comcast and really the stuff that's in your home is probably on this side of the fence plus maybe one of these uh Home Route One of these uh cable modems or DSL modems they might provide so a switch is just a device with a whole bunch of data Jacks in it in fact if you recall that news report we played on the big screen a couple of weeks ago where we were talking about shell shock and how bad this bug was and there were all of these photographs of cables and Jacks and things that look technical those were just dumb switches that just Internet connect computers by plugging uh cables into them so that's all of switches now these devices get a little more interesting DHCP if you've poked around your computer at home or even on campus you might have seen this acronym does anyone know what a DHCP server is dynamic host configuration protocol not the kind of thing really need to write down DHCP anyone at all all right so let's rewind the story if the story here at hand is predicated on my having a unique address in the world an IP address where does that come from you know in yester year when you got to campus you actually had to ask someone at Harvard what should my IP address be and you would manually type it into your computer but more recently Technologies exist that allow you to dynamically DHCP get an IP address simply when you plug into campus wirelessly or with a wire so DHCP server is just a server that gives your computer a unique IP address somewhat randomly or via some algorithm but if you think back a few weeks or a few years when you first registered your computer on campus you were telling Harvard authorize me to give me an IP address now DNS starts to get a little more interesting domain name system does anyone want to take a stab at what this thing is here it's one or more servers that perform a fairly simple task that's kind of important yeah translates URLs yeah it translates URLs to IP addresses and vice versa consider after all that when you go on a website you type in something like facebook.com or google.com or harvard.edu you certainly have never typed most likely a numeric IP address and you can think of the reason why back in the days and even now to some extent when you make a a telephone call to a company they really try hard to buy themselves an 800 number that actually has words in it like 800 collect or something that's memorable like that so that people don't have to remember what c o l l eect actually expands to so we've seen this heuristic in the past and indeed that's what IP addresses and what we'll call host names or fully qualified domain names do for us it allows us to address servers by words instead of numbers so how do we actually see this conversion I'm going to go ahead and open up a program uh I'm just going to go ahead and open a terminal window and I'm going to go ahead and show you what a DNS server does for instance if I wanted to see what the IP address is of Facebook I can type at a terminal prompt like this and you can do this even inside of your Appliance nslookup facebook.com and I see a bunch of things this first response is Harvard's DNS server that picture that I've drawn there that's telling me that Facebook's IP address is apparently this so let me go ahead and copy that 17325 2.1 12016 and let me open up Chrome on my Mac and let me go to http colon SL SL and paste that IP address in and hit enter and indeed I find myself at Facebook so somehow that conversion indeed happened and if I do this again let's do nslookup w.google.com I get back a whole bunch of responses and indeed there's different ways that companies implement this sometimes they tell the world they have one IP address but that one IP address gets resolved or mapped to multiple servers or in the case of Google they tell the world we have a whole bunch of IP addresses your laptop is welcome to talk contact any one of these servers so all of that's been going on underneath the hood when you type in dubdub w.google.com enter into your browser your browser and in turn your operating system Mac OS or Windows or uh Ubuntu Linux ask the nearby DNS server what is the actual address of This Server because the last device in this picture a router is the one whose purpose in life is to Route information route packets so to speak envelopes of digital information containing zeros and ones from sender to destination from origin to receiver and so a router routes stuff so why is this all particularly relevant well let's take a look at how this might be used suppose that I have here a picture of Rob Bowden all right so suppose that I want to send this picture of Rob Bowden to Dan in the back of the lecture hall so I am a computer like my laptop and Dan is some other computer on the internet and I want to send a packet of information from me to him that begs the question how do I actually route this packet to him well in human terms I would say hey can you pass this to Dan and then a bunch of you would probably pass it back and forth back and forth until it eventually makes its way over to Dan but that's a little imprecise computers probably need to be a little more methodical so probably Dan has an IP address so what really I should do is I should take for instance an blank envelope like this and I don't know what Dan's IP address is so I'm just going to generalize it as Dan's IP and I'm going to put this in the two field of my envelope and meanwhile I have an IP address it doesn't matter today what it is so I'm just going to say my IP in the back corner there and then I'm going to go ahead and put this picture inside of this envelope and then each of you presumably as routers on the internet have been preconfigured by humans generally or sometimes by automated algorithms to know that if Dan's IP address starts with with a one it should go that way if Dan's IP address starts with a two it should go that way maybe a three goes that way maybe a four goes that way and that's a little overly simplistic but that's the general idea each of these routers and there might be as many as 30 between me and Dan have some kind of spreadsheet inside of their memory a database table that just says a IP address that looks like this goes this way an IP address that looks like this goes that way and that's how it makes fairly simplistic decisions but it turns out that these routers do something more than that potentially they allow computers to guarantee delivery at least with high probability so you might too have heard even if you've never quite cared or wondered what it is you've might have heard of something by this acronym let's go back over here for just a moment and pull up this TCP transmission control protocol another technical way of just describing another technology that's used on the internet so IP Internet Protocol is used for addressing it's some standard that the world came up with that said you put one IP address here for Dan and one IP address here for yourself and then you put some information in an envelope but TCP is another technology used in conjunction with IP and indeed if you've ever seen these acronyms before you've probably seen tcp/ip which just means people tend to use them together well TCP is kind of cool because it allows you to increase the probability that the data is actually going to get from me to Dan in fact the internet is a crazy place there's no guarantee that if I send data this way that it's going to go that way next time around it might go that way or that way the shortest distance between two points is not necessarily a straight or the same line moreover some of you guys might make mistakes or get overwhelmed with too many envelopes coming your way so you just kind of give up and literally drop some of these envelopes on the floor and in that same way can data be dropped on the Internet by routers so to decrease the odds of this I'm going to take my little safety scissors here and cut Rob into let's say four pieces four segments and now I'm going to go ahead head and put one more piece of information on this envelope I'm going to say something like one of four so now my final envelope at least the first looks like this I'm going to go ahead and put this one in here and for time's sake I'm going to label the others identically as two of four three of four four of four again with Dan's IP address in the front of it and with my IP address on the back left but I can't send them just yet cuz it turns out that on the internet servers can do multiple things in fact we all might use the web quite a bit the worldwide web HTTP col SL whatever but there's other services on the internet what are some other services sort of user consumer friendly services that spring to mind besides a web browser type program email okay good what's another another one so uh chat whether it's Skype or Gchat or something like that so some kind of storage service certainly something like Dropbox or box or the like so there's different services on the internet and it turns out that Dan if he is indeed a computer doesn't have to be dedicated to one thing in life he can actually do multiple things and indeed he can be an email server he can be a web server he can be a chat server but that seems to suggest that Dan needs to know in advance what are the contents of these messages is this a web page I'm sending him is it an email I'm sending him is an instant message I'm sending him so we need one more piece of information on these envelopes so that Dan when he receives this envelope knows what program to use to display it is it a browser is it Google is it Skype or is it uh Outlook or some other program all together and so with TCP comes just a human convention the world decided some years ago to associate unique integers with the most popular Services one called file transfer protocol FTP though it's a little dated now but it's Unique identifi is 21 uh SMTP for outbound email it's Unique identifier is 25 just because DNS the thing we talked about earlier uses the number 53 for its queries like what is the IP address of google.com and now the more familiar you might have somewhere at some point seen the number 80 and maybe 443 those are the unique identifiers for HTTP which is the language we'll soon see used for web traffic between browsers and servers and 443 is for the secure version thereof so the One Last Detail I'm going to put on my envelope is that I'm not going to send this just to Dan's IP I'm going to send it to say colon 80 if what I'm trying to send him is a web page a web page that contains Rob bowden's picture so I'm going to do the same thing on these other envelopes and then ultimately I'm going to drop these off with the nearest router recognizing that that router might not necessarily take the same path every time in fact I might have the first packet going this way second packet might go that way third packet start routing might go over here and in theory can't keep it in theory all four of these packets should eventually route their way however efficiently or inefficiently all the way to the back at which point Dan upon receipt can re can reassemble them based on the funny thing that we all know what the outcomes here is going to be Dan's going to get a picture of Rob but let's see how this works out well rather Dan's going to get part of a picture of Rob very good everyone's participating today all right so as Dan starts to receive these packets let's a let's ask one question what if one of you gets lazy overloaded malicious or just powered off and one or more of the packets doesn't make it to Dan how is Dan going to know he did not receive one of the segments of the four I sent him just intuitively what can we do yeah exactly because I've uniquely numbered them and I've specified how many segments there should be he can infer from that which if any of the segments he's actually missing and what TCP tells computers to do if computers like Mac OS and windows and Linux support and understand TCP which they do tcp's documentation essentially says that Dan should send me a message back saying hey David I'm missing packet number 104 or 304 whichever it is and then my job is to take another picture of Rob which we have extras of for later today if you'd like to take one with you um and then I can resend that segment of Rob all the way to the back so as simplistic as this mechanism is that is what's happening almost any time you do something on the Internet particularly for these most popular of services there are other protocols other Technologies besides TCP that work a little differently but so many the services we typically use actually rely on these protocols so Dan did you get the full picture back there yes we have reassemble drop in the back thank you so much to the routers suppose I actually wanted to see the routers between me and MIT much like you guys where the routers between me and Dan well rather than NS lookup for name server lookup I can instead type trace route which is actually going to do what it says and I'm going to do it in quiet mode with- one it's a command line argument that just says try this once and not multiple times and now I'm going to type www.mit.edu now the output is fairly quick and cryptic but what's neat about this is that each of these rows essentially represents a student in this audience if you were the path between me and MIT what you see up here first is the domain name that I typed in or the fully qualified domain name as it's properly called and this apparently is the IP address of www.mit.edu my computer figured that out for me this here is a a promise we're only going to try to reach MIT within 30 hops there better be no more than 30 students between me and Dan and now each of these rows represents literally a router between me and Dan literally one of you guys and so this one doesn't seem to have a name a domain name it just has an IP and it only took 0.662 milliseconds to get from me to that first router the next one wasn't that much farther away it only took one millisecond to get there and now thankfully things get a little more user friendly with names that are cryptic but a little more telling this apparently is a router in the core of Harvard's Network housed because only because people have told us this in the science center SC and GW is just uh shorthand notation for Gateway which is a synonym for router so this is some system administrators super cryptic way of naming one of the servers in the science center meanwhile that server is apparently connected by some kind of cable to another router that's nicknamed border Gateway 1- something whatever those numbers mean and then apparently Harvard has a connection ction that's another millisecond away to something called the northern Crossroads which is a common peering point between big places like Harvard where lots of cabling goes in and allows interconnections among different entities step six unfortunately doesn't have a valid name and step seven gets interesting I have no idea what most of these mean but NY does jump out at me and what does that probably signify it's not even technical just New York so indeed what common human convention not guaranteed but common convention is to name routers by nature of the city or the airport code that they're nearest to so with some probability this router number seven is probably indeed in New York and this seems to corroborate that assumption because it's 6 milliseconds instead of just one or so to something here on campus but now take that into account right on like Megabus or whatnot it might take four five six hours to get a human from here to New York to get a piece of data it takes just six milliseconds to get a packet for me to Dan if he were all the way in New York then finally this apparently is the actual domain name for www.mit.edu they've apparently outsourced their web servers to a company called aami which means some other company runs their servers and that's why we're seeing that weird thing there well let's do this once more let's go ahead and do a trace route to our friend Professor Nick parante at Stanford who has a server called Nifty stanford.edu enter and now we'll see probably a slightly longer path that goes through a few more cities so here are these nameless Harvard servers here we're in the core of Harvard the Border Gateway of Harvard the northern Crossroads wherever this is and now it's getting a little more interesting I'm guessing that router number eight is in what city Chicago probably based on this uh based on this thing here and now we have uh Salt Lake City maybe maybe Los Angeles here and then LAX Yep this probably is La by the bottom until finally it goes from Southern California all the way up to Northern California to where Stanford is in Palo Alto so pretty cool and let's take this one step further it apparently would take you 82 milliseconds to send a message to Dan if he were in California instead of New York let's do something like Trace routes one attempt to www. cnn.co JP for the Japanese version of CNN's website and now we're still in Boston it seems at the moment a couple servers six and eight aren't responding they're being a little private but eventually there seems to be something interesting going on between let's say steps seven and nine what is probably between seven and nine and certainly between seven and step 17 there's a huge jump in the amount of time it's taking for data to go from one of these hops one of these routers to another so odds are somewhere in here there's probably especially right here here there's probably a very large body of water that has some transpacific or Transatlantic cable that actually requires even more time for data to get from one point to another but again imagine the hours it would take to fly to Japan here in some 200 milliseconds boom your message is actually there so you can play around with this on the appliance or even in Windows or Mac OS with slightly different commands sometimes you will get these stars like in rows six and eight which just means the routers are configured not to give you an answer for privacy sake but generally this technique would in fact work so it turns out too there's other juicy information lurking in tools that you take for granted every day so for instance if you receive an email frankly as some of you may have recently of questionable Origins if you've never looked at Gmail's interface before whether it's for the college interface or your personal one you might see your inbox looking like this and in fact this is an email I sent maen harvard.edu to JH Harvard cs50.h harvard.edu this morning just so I could take a screenshot but it turns out all this time in Gmail there's that little triangle toward the top right there next to the harbard crest that if you click you can click show original and if you do that you'll actually see a bunch of very esoteric information like timestamps and IP addresses and domain names but you'll see in short the headers that all this time have been hidden in each and every email you send and receive and it's these headers that people can use computer scientists or otherwise to actually infer with some probability where and from whom an email actually came in fact we'll talk in later weeks about how email itself can be generated programmatically which is a very good thing for a website that wants to send emails to users but we'll see too just how trivial it is to forge emails from someone to someone else unless you actually know how to verify the headers and even that is a losing proposition these days so with that said let's go one layer up we started with IP which addresses packets for us gives them unique addresses TCP which in short guarantees delivery or at least increases the probability thereof by adding things like segments one of four two of four three of four and four of four and now let's layer on top of that another protocol all of these things are protocols human uh computer conventions that dictate how two computers talk to one another HTTP finally today is hypertext transfer protocol and this is the protocol that web browsers use when speaking to web servers so when you pull up a browser like Chrome IE or Firefox or Safari or whatever and you type in something like facebook.com and hit enter not only does your computer first translate facebook.com into what an IP address it then convert it then sends a message to that IP address saying give me today's homepage or give me the login screen of Facebook or if you're already logged in give me the default view of my timeline so that's what HTTP says and more colloquially if I just if I am a web server and you are what's your name again Margo Margot is a web uh server and I'm a web browser and I simply want to retrieve my timeline from Margo margo. comom I would say like hello I'm David hi I'm Margo and you would then respond with additional information to me so we have this stupid human convention for instance thank you of shaking each other's hands and computers have that same idea where a client like a browser asks a server to do something on his or her behalf and so here's a picture for instance on the left is a computer laptop desktop whatever or even a phone and on the right is a very dated view of a server they typically look smaller and sexier these days but the point is simply that there's some kind of communication between client and server and client in the sense of someone in a restaurant and the waiter or waitress same idea with computers clients and servers one asks for information one responds with information now how does that information come back well consider this get is sort of the default way and it's a super simple term that just dictates how a browser gets information from a server in other words rather than just goof extending my hand to Margot if I really were a browser I would stuff inside of an envelope as I did with Rob's photo before a textual message that literally says something like this get SL http/1.1 host dub w.google.com or margo. comom or whatever the server's name might happen to be and then dot dot dot some other stuff stuff but literally inside of an envelope would be a fairly simple textual message like that that upon receipt Margot would open up read the contents and respond accordingly now it's a little non-obvious with this example but get slash what is the slash probably referring to just based on your familiarity with browsing the web in daily life what's the slash es sequence an escape sequence not a bad idea but generally escape sequence goes go the other way that would be a backl FL usually but not a bad thought yeah a pointer also a good thought but even simpler than that the home directory the root of the hard drive so to speak most of us don't type this but technically if you wanted to be super proper these days you would go to something like HTTP www.f.com now I most of us wouldn't bother typing the Slash and frankly most browsers Chrome included don't even bother showing us the slash these days just because they like to be simp and succinct but the slash just means go to www.fb.com and get slash the root of the hard drive the default page in facebook.com using what protocol well using version 1.1 of this thing known as HTTP the server or Margo and by the way do you mind that I'm using Okay so we're good now so Margo responds Now with an envelope of her own inside of which is a similarly textual message the first line of which is yep I speak HTTP version 1.1 200 is a status code which just means all is okay I have the page you're looking for meanwhile content-type colon text HTML this is Margo's semi Arcane way of saying what you have requested is a web page and it's type so to speak almost like a variable sense but this is much higher level now its data type is text but specifically HTML the language we'll soon see and then there's some other stuff so other stuff is literally what Facebook is responding with so let's see this to let me go ahead and open up Chrome on my laptop which you can do on your own computer as well and I'm going to go ahead and open up uh www.fb.com enter and I get this familiar screen here but now I'm going to do something else I'm going to go ahead and go to view developer and go to developer tools which you should have within Chrome on your computer at least within your Appliance I'm going to scroll roll this thing up here and you're going to see a whole bunch of cryptic text here it turns out that what Margo put inside of that envelope in response to me is a language called HTML hypertext markup language it's not a programming language because you can't doesn't have loops and conditions and functions and things like that it's a markup language in that it has special syntax called Tags and attributes that tells a browser what to display on the screen and how to display it should it be centered should it be boldfaced red green blue it's a markup language and in that it tells a browser what to show on the screen so this is literally all of the HTML and more that Facebook server is spitting out and that Chrome and ie and Firefox have been designed by their respective authors to understand and in fact it's a little messier than that if you instead go to view developer view Source this is actually what Facebook is outputting sort of zero for five for style right if we infer that this probably isn't the best but frankly they can get away with it because if you're serving a billions of web pages per day you really don't want to waste time and bites and money ultimately in transmitting things like new line characters and spaces and tabs because you're just spending for bandwidth unnecessarily with your ISP so indeed this is meant to be minified in this way but what Chrome is doing for us is it's taking this HTML which completely looks like a mess and unintelligible to a human and it's just formatting it it's pretty printing it so that we can wrap our minds around it a little more readily but more interesting is this if I now click in Chrome not elements but Network I'm going to see a little logging screen that's going to show me all of the HTTP requests that are actually going back and forth between me and Facebook or me and Margot if I make more than r one request so I'm going to go ahead and click the reload icon up here in Chrome and now whole bunch of stuff flew past at the bottom I'm going to scroll back up to the very top and now notice this the very first first request my browser made was to www.fb.com it's using the get mechanism which just means it's speaking the textual language that we saw an example of a moment ago and moreover it turns out that the response that Facebook gave me is 200 okay which means I found the web page in question if I click on this row I can actually see those headers a little more clearly we these will make more sense before long but notice that my browser sent a whole lot of information like host and method and cookies we'll come back to those before long and you'll finally understand what a cookie actually is and how you soon will be sending them and you can see what Facebook is sending back including the content type of text HTML the current date time its privacy policy or lack thereof and then finally a number of cookies that are being set on your computer as well but we'll tease those apart before long but in short every time you visited a web page now for years you've been sending messages like the one I sent in an envelope to Margot and Dan and you've been getting back responses like this from Facebook but moreover guess what's being disclosed to Facebook and Google and everyone else every time you visit a web page what is on the outside of every envelope your computer has been sending your IP address right maybe not your name per se but your IP address and just let's connect the dots later if you're using services like the web or bit torrent and the like and you've registered a computer at a place like Harvard someone somewhere where knows that John Harvard's IP address is this do this do this do this and indeed logs can be kept both on a campus like this on a Comcast Network on Verizon or frankly at the NSA as we've recently learned that logs pretty much everything that you were doing on the internet and we'll come back to this in a future class on the implications of these design decisions and security but the truth is you really don't have all that much privacy every time you've been visiting anywhere on the web you've been showing your hand and revealing at least your IP address so scary note aside what can we do to embed things like cats in a web page so we have a bunch of responses that might come back from the server and we won't see all of these today but 200 is good and you've probably not seen all of these as a human before but you've probably seen at least one of these which one of these might look familiar so 404 file not found and indeed you're going to see this programmatically yourself 404 just means the file you requested slash or slash something simply doesn't exist and a web server typically responds with 404 as a result meanwhile we'll soon see that the contents of that message are this language known as HTML and this is a super simple snippet of HTML that does nothing other than display hello world on the screen indeed you see at the top of this something called a document type declaration which just says Hey world this file contains HTML and then the next bit of HTML that you're going to write it has an Open Bracket and then the word HTML then a Clos bracket and then open head and close bracket so in short let's actually do this more mechanically let me go into my Appliance but you can do this uh anywhere that you have a text editor too I'm going to go ahead and save a file called hello.html I'm going to put on my desktop to keep things super simple right now and I'm going to do exactly what I just saw so dock type HTML Open Bracket HTML and now notice I'm going to do the opposite preempt ly and by opposite I mean the same tag so to speak but it starts with a forward slash and then over here I'm going to say head because it turns out that every web page has a so-called head which is stuff that goes in the title bar and at the very top of the page indeed title is just going to be hello here and now I'm going to have a body to this web page so every web page has both a head up top and a body which is the guts of the page and here I'm just going to say something like hello world and I'm going to save this file if I now minimize gedit look there's a little file on my desktop called hello HTML now that's not on a server yet per se indeed it's just on my own personal desktop here but if I open up Chrome and hit CR o there's the C and question and I go to my desktop and I open up hello.html there in fact is my super simple web page the body of my page in this white window here is the body with hello world and the title in the head of the page is in the tab there and we're going to see soon that it's super simple to open up other Pages as well for instance I'm going to go into some of the distribution code code for this week Source 7 and I'm going to open up not the jpeg which this guy is here but I'm going to open up image. HTML which ultimately looks like this but let me now open this up in gedit and go into Dropbox Source 7 and image. HTML most of this is just comments as we'll soon see but if I want to put grumpycat inside of this web page it suffices to put another Open Bracket and then the keyword image or IMG for short and then alternative text for accessibility reasons if someone has a screen reader or something like that source which is what's the name of the file cat. JPEG and then because this Tag's a little special we put the forward slash as we'll see inside of the tag but the end result is a web page that looks like this so in short what we're going to be doing now over time is using the web and creating web pages to ultimately be containers not only for silly things like images and links and tables and bulleted lists and the like but also to give us ourselves a graphical user interface a guey not unlike what we did with breakout but within this environment we're going to start using languages like PHP and JavaScript a database language called SQL a client side scripting language called JavaScript to actually create all the more Dynamic interfaces but in a much much more familiar context but before then let's conclude today with a look as promised of what's really going on underneath the hood with the internet itself stipulate for today that the internet can be used to transfer things like web pages over HTTP much like I shook Margo's hand earlier but there's so many other services that use TCP and IP that we take for granted that work as we'll see here in this film that'll take us to the end today [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music] w [Music] [Applause] for the first time in history people and Machinery are working together realizing a dream a uniting force that knows no geographical boundaries without regard to race Creed or color a new era where communication truly brings people together this is the dawn of the net want to know how it works click here to begin your journey into the net now exactly what happened when you clicked on that link you started a flow of information this information travels down into your own personal mail room where Mr IP packages it labels it and sends it on its way each packet is limited in its size the mail room must decide how to divide the information and how to package it now the package needs a label containing important information such as sender's address receiver's address and the type of packet it is [Music] because this particular packet is going out onto the internet it also gets an address for the proxy server which has a special function as we'll see later the packet is now launched onto your local area network or Lan this network is used to connect all the local computers routers printers Etc for information exchange within the physical walls of the building the land is a pretty uncontrolled place and unfortunately accidents can [Music] happen the highway of the land is packed with all types of information these are IP packets novel packets Apple talk packets they're going against traffic as usual the local router reads the address and if necessary lifts the packet onto another Network ah the router a symbol of control in a seemingly disorganized world sorry about that put there he is systematic uncaring methodical conservative and sometimes not quite up to speed but at least he is exact for the most part as the packets leave the router they make their way into the corporate internet and head for the router switch a bit more efficient than the router the router switch plays fast and loose with IP packets definitely routing them along their way a digital Pinball Wizard if you will watch this Mom here goes on the back hey in there in there in there over the left over the right over the left over the right you got it here it comes right down he shoot Heat scores it's going hey wa watch out here comes oh here we go [Music] it's as packets arrive at their destination they're picked up by the network interface ready to be sent to the next level in this case the proxy the proxy is used by many companies as sort of a middleman in order to lessen the load on their internet connection and for security reasons as well as you can see the packets are all of various sizes depending upon their content [Music] the proxy opens the packet and looks for the web address or URL depending upon whether the address is acceptable the packet is sent on to the [Music] internet there are however some addresses which do not meet with the approval of the proxy that is to say corporate or management guidelines these are sarily dealt with we'll have none of that for those who make it it's on the road [Music] again next up the firewall the corporate firewall serves two purposes it prevents some rather nasty things from the internet from coming into the inonet and it can also prevent sensitive corporate information from being sent out onto the internet once through the firewall a router picks up the packet and places it onto a much narrower Road or bandwidth as we say Obviously the road is not broad enough to take them all now you might wonder what happens to all those packets which don't make it along the way well when Mr IP doesn't receive an acknowledgement that a packet has been received in due time he simply sends a replacement packet we are now ready to enter the world of the internet a spider web of interconnected networks which span our entire Globe here routers and switches establish links between networks now the net is an entirely different environment than you'll find within the protected walls of your land out here it's the wild west plenty of space plenty of opportunities plenty of things to explore and places to go thanks to very little control and regulation new ideas find fertile soil to push the envelope of their possibilities but because of this Freedom certain dangers also lurk you'll never know when you'll meet the dreaded ping of death a special version of a normal request ping which some idiot thought of to mess up unsuspecting hosts the path our packets take may be via satellite telephone lines Wireless or even transoceanic cable they don't always take the fastest or shortest routes possible but they will get there eventually maybe that's why it's sometimes called the worldwide weight but when everything is working smoothly you can circumvent the globe five times over at the drop of a hat literally and all for the cost of a local call or less near the end of our destination we'll find another firewall depending upon your perspective as a data packet the firewall could be a Bastion of security or a dreaded adversary it all depends on which side you're on and what your intentions are the firewall is designed to let in only those packets that meet its criteria this firewall is operating on ports 80 and 25 all attempts to enter through other ports are closed for business [Music] [Music] Port 25 is used for mail packets while Port 80 is the entrance for packets from the internet to the web server inside the firewall packets are screened more thoroughly some packets make it easily through customs While others look just a bit dubious the firewall officer is not easily fooled such as when this ping of death packet tries to disguise itself as a normal ping packet it's okay it's okay no problem have a nice day be out of here bye for those packets lucky enough to make it this far the journey is almost over it's just a lineup on the interface to be taken up into the web server nowadays a web server can run on many things from a Mainframe to a webcam to the computer on your desk or why not your refrigerator with a proper setup you can find out if you have the makings for chicken catori or if you have to go shopping remember this is the dawn of the net almost anything's [Music] possible one by one the packets are received opened and unpacked the information they contain that is your request for information is sent onto the web server [Music] application the packet itself is recycled ready to be used again and filled with your requested information addressed and sent out on its way back to you back past the firewall routers and on through to the internet back through your corporate firewall and onto your interface ready to supply your web browser with the information you requested that is this film pleased with their efforts and trusting in a better world our trusty data packets ride off blissfully into the sunset of another day knowing fully they have served their masters well now isn't that a happy ending that's it for cs15 we will see you next week [Music] oh let's ra you going to come to me here you are but you better choose I'm capable of anything of anything and everything make me a fory make me a r and only make me en you're en you're en so you want to play with magic boy you should know what you're falling for baby do you dare to do this cuz I'm coming at you like a dark hor are you ready for [Music] ready perfect Perfect's in in There's No Going Back [Music] my just never make you love me like a bird like a bird without a you just to walk away don't walk away it's in the palm of your head now baby yes or no no may just be before you give it up to me to me give it up to me so you want to play with magic boy you should know what you falling for baby do you dare to do this cuz I'm coming at you like a dark hor are you [Music] ready a perfect star perfect St CU what your mind what your mind there's no going [Music] n [Music] [Music]