YouTube2Text

CS75 (Summer 2012) Lecture 0 HTTP Harvard Web Development David Malan — Transcript

by archn · 19,987 words · 2,167 segments · language en · Watch on YouTube

Full transcript

  1. 0:09All right
  2. 0:10Apologies for the delay
  3. 0:12Welcome to computer science S-75 - Building dynamic websites
  4. 0:15My name is David. I'll be your instructor this summer
  5. 0:18uh... and it said pretty brief summer so we're gonna dive right in tonight into some
  6. 0:22material then wall take of breath
  7. 0:24a look at the structure of the course, expectations thereof and then conclude with
  8. 0:28some additional material
  9. 0:30Along the way, please interject with any questions that you might have but first
  10. 0:33some questions from me
  11. 0:35you go ahead on the internet on your laptop or desktop you pull up your
  12. 0:38favorite browser you type in www.google.com and hit enter
  13. 0:43What happens? Let's tell this story and we can be as high level or low level
  14. 0:47as we want, and I'll steer us in both directions. So you've hit enter.
  15. 0:50What happens?
  16. 0:52Anything you got?
  17. 1:03Oh. Good. So that's the whole story. That's very good.
  18. 1:05Let's tease it apart a little bit now and I'll repeat some of the answers
  19. 1:08sometimes into the microphone so that our folks who are taking the course
  20. 1:11from afar can hear everything
  21. 1:13so your computer makes a request through your modem goes to your
  22. 1:17ISP, reaches google.com servers and they've replied
  23. 1:20with the response, so good.
  24. 1:22now let's dive in deeper there, and let's focus on the act of hitting enter
  25. 1:26Does someone want to propose, just give me one step
  26. 1:29in more technical detail what happens next and then we'll get to that same
  27. 1:32endpoint eventually
  28. 1:38Perfect. So we first need to translate the name of the site in this case the
  29. 1:41www.google.com
  30. 1:43into an IP address and, someone else, what is an IP address?
  31. 1:53Good, so an IP address identifies a server or computer on the internet
  32. 1:58and an IP address is simply a number of this form. Let me go ahead and pull up a
  33. 2:02little scratch pad for notes here
  34. 2:07so an IP address as you've probably seen as something in the form of w.x.y.z
  35. 2:13and little internet trivia:
  36. 2:14each of these placeholders can be a digit from what to what?
  37. 2:18...or number from what to what?
  38. 2:23Perfect. 0-255, and there's some restrictions on what numbers can
  39. 2:26be where, but essentially you have number dot number dot number dot number. And each
  40. 2:29of those numbers can be again 0-255.
  41. 2:32If we've really wanna start pressing deeper here, how many bits is used to
  42. 2:36represent an entire IP address under this schema,
  43. 2:41for those familiar with bits.
  44. 2:4432. So why is that? Well, for though less familiar/unfamiliar, if you
  45. 2:49want to represent the number 0 - 255 which is a total
  46. 2:52of 256 numbers
  47. 2:54you need 8 bits because 2^8=256, But we won't go into
  48. 2:57too much detail on along those lines
  49. 3:00but if you've seen that IP addresses are just 32 bits
  50. 3:03it is because each of these numbers is 8 bits itself so actually let's
  51. 3:08go here. There will be much math in this course after at the following sentence
  52. 3:11really
  53. 3:11but if you have 32 bits: how many possible IP addresses are there
  54. 3:16for the world's computers?
  55. 3:23so it's to 2^32 which is roughly.. those who are good with math in their heads..?
  56. 3:28So it's roughly 4 billion. So that's a lot. But these days most of you have
  57. 3:33laptops. Most of you have desktops
  58. 3:35Most of you have telephones in your pockets or Ipads or
  59. 3:40the like. So there's more to places these days that are consuming
  60. 3:43IP adresses
  61. 3:43so if you follow the popular media
  62. 3:45of late you'll find that people have been freaking out that were about to run
  63. 3:49out of IP addresses but that's because we've been using version 4
  64. 3:51for far too long.
  65. 3:53Thankfully version 6 (u.v.w.x.y.z) has begun to get rolled out
  66. 3:55and version 6 (u.v.w.x.y.z) will have 128 bit IP address
  67. 3:58..which is great, because that's 2^128
  68. 4:01which is huge! Barely pronounceable.
  69. 4:04But it will also become a little more complex to break these
  70. 4:07things down so we can squeeze a few more years of discussion out of these
  71. 4:10addresses but realize the world is
  72. 4:12transitioning
  73. 4:13now just for the sake of the experience for those at home let me actually pause here
  74. 4:17just so we can plug in this recording device so we can capture to another
  75. 4:20format so let's leave that is that cliffhanger for just a minute or two and I'll be right back.
  76. 4:26Where did we leave off? You've just hit enter. We had proposed that your computer
  77. 4:30had translated or needed to translate the hostname www.google.com
  78. 4:35into an IP address and then we talked for a moment about various forms
  79. 4:39of IP addresses
  80. 4:40so let's now push a little harder on how this translation happens
  81. 4:43so Google has a numeric address of this form (w.x.y.z)
  82. 4:46and as an aside Google actually probably has a whole bunch of IP addresses
  83. 4:49of that form. All of which lead to
  84. 4:51the same experience but perhaps different servers
  85. 4:54so how does your little Mac or PC or Linux computer know
  86. 4:58what the IP address of www.google.com actually is?
  87. 5:06OK, good. So, it has to do a domain name look up using a DNS server.
  88. 5:10For those unfamiliar, DNS is domain name system
  89. 5:12and this is an infrastructure on the internet that pretty much does exactly
  90. 5:15that. It converts domain names and host names
  91. 5:18to IP addresses
  92. 5:20and vice versa and will see tonight that it does a few other things in terms of
  93. 5:23helping with the routing of email
  94. 5:26with validation of ownership of domains and the like
  95. 5:29so there are these servers out there now your computer or your home probably
  96. 5:32doesn't have its own DNS server
  97. 5:34but probably Harvard does if you're on campus or Comcast does or Verizon
  98. 5:39or your company does.
  99. 5:40Now if you're at a small college for instance and you're not visiting google.com
  100. 5:44but your visiting some random website.com It's very possible that you were
  101. 5:48the first person on a campus to visit that website ever
  102. 5:51or at least in a long time
  103. 5:52so what if your small little campus's DNS server has no idea what
  104. 5:57this IP addresses is?
  105. 5:59Are you sort of out of luck because you went to that school, and not one where
  106. 6:02there's more people using that websites
  107. 6:05or equivalently, it's kind of the chicken and the egg problem (which came first?) if you're the first person to
  108. 6:08ever need to visit that website and therefore your campus's DNS server
  109. 6:11has no idea what that mapping is
  110. 6:13how do you solve this problem?
  111. 6:22Exactly. So there's a hierarchy, thankfully to the DNS system whereby
  112. 6:26even though you might have your own DNS server on campus or company
  113. 6:30but that doesn't necessarily store all possible domain names and IP addresses in
  114. 6:34the world. In fact, that would be quite a large database otherwise and it's just
  115. 6:37not efficient to keep all of them around if they're not being accessed at all
  116. 6:40or very frequently
  117. 6:41but your ISP
  118. 6:43knows some bigger fish and maybe that bigger fish knows an even bigger fish that
  119. 6:47has its own DNS servers that might know, but in the worst case
  120. 6:50if no one along this hierarchy knows, there also exists in the world what are
  121. 6:54called root servers
  122. 6:55which are spread out geographically across the several continents
  123. 6:58and it's those root servers that essentially know
  124. 7:01who does know, what the IP addresses of some random website.com
  125. 7:06in other words those root servers know
  126. 7:08who the authority is for instance for all of the .com's in the world, for all
  127. 7:12of the .net's or the like
  128. 7:14so that you can have this initial request from little old your computer
  129. 7:18bubble up to these very high-level servers and then bubble back down to
  130. 7:22some authority
  131. 7:23who does actually know
  132. 7:25and the reason why that works
  133. 7:28is because when you go and buy your own domain name which is a
  134. 7:31process will discuss in just a bit
  135. 7:33you have to tell the world what the IP address is of
  136. 7:37you DNS server, so someone has to be informed proactively once really
  137. 7:42and only once when you buy the domain so for now let's come back to our story
  138. 7:45We've hit enter
  139. 7:46Google.com was in my browsers window. My computer has somehow figured out that
  140. 7:50it is 1.2.3.4 or something like that
  141. 7:53so now my computer puts together a message to send it across the internet
  142. 7:57to Google.com. What does that message look like?
  143. 7:59Well in it's simplest form - it's a message that pretty much looks like this. It is
  144. 8:03literally the word GET in all caps a space a forward slash ( / ) if you're just
  145. 8:07requesting
  146. 8:08the root of the web server marked typically with /
  147. 8:12and then HTTP /
  148. 8:13version number
  149. 8:14Now in reality, there is a few more headers, so to speak, HTTP headers that get
  150. 8:18sent
  151. 8:19from browser to server, and we'll see those in action in just a bit,
  152. 8:22but this message captures
  153. 8:25really the most important aspect of the request
  154. 8:27so your little computer creates a virtual envelope more technically called
  155. 8:31a packet of some sort inside of that packet
  156. 8:33is a message like this
  157. 8:35Put on the front of that virtual envelope is a "To" address namely 1.2.3.4
  158. 8:39or whatever Google's IP addresses is.
  159. 8:42In the return field of this virtual envelope you know just like you were
  160. 8:45mailing something to a human there's the return address who which should be who's
  161. 8:49IP address probably?
  162. 8:51Your own IP addressing, and your computer does know that if you have an
  163. 8:55internet connection
  164. 8:56and then your computer sends it out on the internet. Now we can dive deeper and
  165. 9:00deeper and deeper but for now assume that your ISP
  166. 9:03has what's called the default-gateway
  167. 9:05also known as a router
  168. 9:07and routers are the computers on the internet that know how to get data from
  169. 9:10point "A" to point "B", or if they don't
  170. 9:12know precisely how to go for "A" to "B"
  171. 9:14they know whom to pass it off to
  172. 9:17who can then get it one step closer to point "B"
  173. 9:20so in reality a packet, this virtual envelope,
  174. 9:23might go from router to router to router to router sometimes as many as thirty
  175. 9:26different routers across the globe
  176. 9:28until finally it gets to its actual destination Google.com.
  177. 9:32Google receives this virtual envelope,
  178. 9:34sees that it's for its IP address, opens the envelope up, sees this message
  179. 9:38Google.com server happens to be running a web server and so that
  180. 9:41webserver looks for the file called "/"
  181. 9:44now "/" is typically a synonym for an actual file name like index.html
  182. 9:49or index.php or any number of other
  183. 9:51default standard file names
  184. 9:53so Google grabs that file from its hard drives and then puts it it's an own
  185. 9:57virtual envelope
  186. 9:58flips the two IP addresses the from and the sender
  187. 10:01sends it back to the internet via these routers
  188. 10:04it arrives on my computer. My computer, unbeknownst to me, opens this envelope
  189. 10:08sees a whole bunch of a language called HTML
  190. 10:11renders that HTML top to bottom and I see
  191. 10:14the search page for Google's main site
  192. 10:22What is the function of the slash?
  193. 10:24so whenever you type in a URL
  194. 10:27There are several different components to it. HTTP typically
  195. 10:31followed by :// followed by something like this (www.google.com/)
  196. 10:35and so this is let's say a representative URL, but we can
  197. 10:37actually to tease this apart into a few components.
  198. 10:40This is the protocol or schema at the beginning,
  199. 10:43even though in a browser we almost always used HTTP://
  200. 10:47Have folks seen others?
  201. 10:50HTTPS, similar, but different, in that it uses cryptography - a topic we'll come back to.
  202. 10:56FTP:// SFTP://
  203. 11:00WEBCOW:// Some of these are more standardized than
  204. 11:05others
  205. 11:05but the schema is typically an indicator to some piece of software
  206. 11:09how it should view the contents at that address
  207. 11:12so what comes after the :// It typically has something called
  208. 11:15a hostname
  209. 11:17or sub domain name
  210. 11:18followed by the domain name, which in this case is google.com
  211. 11:21or followed more precisely by a domain name witha TLD - top-level domain
  212. 11:26a .com .edu .gov .uk
  213. 11:31would be the TLD and then you have what we call a path
  214. 11:34and a path specifies exactly what file or folder you wanna access
  215. 11:39A single slash means get me the root of my hard drive
  216. 11:42and if you come from the windows world this is essentially equivalent to C:\
  217. 11:46Or on a mac it's equivalent to that, or on a Linux computer it's
  218. 11:50equivalent to that.
  219. 11:51So that is truly the root of your hard drive,
  220. 11:54the folder in which everything else on your hard drive lives
  221. 11:58now it turns out in a browser these days you don't have the type
  222. 12:01most of that. you can omit the HTTP:// You can typically omit the www. You can
  223. 12:06omit the slash, and things just work
  224. 12:08Why is that? both for the most part it's because browsers have just gotten a lot
  225. 12:12more user friendly
  226. 12:13right there what was the time a few years ago where advertisements
  227. 12:17in print and on TV would actually have HTTP://
  228. 12:21but then the world kind of realized that you know anytime you see www.
  229. 12:24something
  230. 12:25probably a website so we started omitting HTTP://
  231. 12:29Now the world has gotten acclimated to any mention of .com or .gov so
  232. 12:33we don't even really need the www anymore and so whether or not www
  233. 12:38works or doesn't work
  234. 12:40is actually completely configurable by the system administrators of the website
  235. 12:44and in fact
  236. 12:46i don't have a
  237. 12:47sort of a soapbox to hop on right now but invariably during a semester, I'll
  238. 12:51come across some website
  239. 12:52for which foo.com or whatever the domain is .com
  240. 12:56just doesn't work you have to type in www.something.com
  241. 13:01and that's just a foolish technical design decision on their part. We'll talk
  242. 13:04today about how you can configure things to just work, and it involves a bit of
  243. 13:08DNS
  244. 13:09a bit of web server configuration
  245. 13:11but typically you don't see that dead end
  246. 13:14because browsers these days if you type in foo.com and hit enter and
  247. 13:18there is no foo.com IP address out there
  248. 13:20the browser will presumptuously or helpfully
  249. 13:24prepned "www." to the start of the address
  250. 13:27and then retry that one
  251. 13:29some browsers if you just type foo will automatically try foo.com, foo.net, foo.gov
  252. 13:33some of the most popular ones so in short
  253. 13:35a lot of the technical processes that are happening are being sort of hidden
  254. 13:39now by browser user friendliness
  255. 13:41for better or for worse
  256. 13:44So, the story began with hitting enter the story ended with you're seeing the
  257. 13:47home page of Google.
  258. 13:49Any questions on the various steps in between,
  259. 13:51whether high level or lower level?
  260. 13:56Allright, so that's the story told from the perspective of a user.
  261. 13:59Why don't we tell the story from the perspective now of someone who owns a
  262. 14:04website or wants to operate a website so suppose one of your goals in this class
  263. 14:08or some other
  264. 14:09is to actually have your own presence on the web
  265. 14:12to actually buy your own domain name and have your own business or
  266. 14:15personal home page or whatever the case may be.
  267. 14:18How do you go about doing that? You need more than just a laptop and a browser now
  268. 14:22you need a server
  269. 14:23on the internet because even though every computer on the internet,
  270. 14:26your laptop included
  271. 14:27has an IP address
  272. 14:29it's not necessarily publicly accessible because even that statement's a bit of an
  273. 14:32oversimplification.
  274. 14:34You do not necessarily have a public IP address. In fact if you go
  275. 14:38home
  276. 14:39and you have internet access at home, especially wireless
  277. 14:41you probably have a home router like an Apple Airport Extreme, or you have a Linksys
  278. 14:45router or some device with antennas that gives you wireless internet
  279. 14:49access but Comcast or Verizon or whoever you're paying each month to give you
  280. 14:53internet access into the house via your cable modem or DSL modem
  281. 14:57which in turn is probably connected to that router
  282. 15:00if it's not one in the same device which some of the ISPs provide these
  283. 15:03all-in-one devices these days
  284. 15:05Odds are you have one IP address and if you have 3 brothers and sisters
  285. 15:10or parents or grandkids in the house
  286. 15:13all of you are sharing
  287. 15:15that one IP address
  288. 15:16and yet the individual computers in the home still need an IP address.
  289. 15:20so what actually is the case is that when you're in a home network you have
  290. 15:25what's called generally a private IP address something of a form..
  291. 15:29Anyone know what up popular internal IP addresses is?
  292. 15:36Exactly. Anything, in fact, starting with 192.168.x.y
  293. 15:41is a private IP address, so the folks who invented the internet
  294. 15:45along the way decided "You know what? We should probably have some IP addresses
  295. 15:48that should never be given out."
  296. 15:50So that within the company or home or a little test network
  297. 15:53you can have IP addresses that are guaranteed not to exist on the public
  298. 15:56internet
  299. 15:57so what home routers typically use iss 192.168.0 or 192.168.1
  300. 16:02and then the last digit, it can be again between 0-255, but some
  301. 16:06exceptions. It really it can't be 0 or 255,
  302. 16:08so there are some constraints, but it gives you
  303. 16:11roughly 250 or so possible IP addresses
  304. 16:15If you don't like that, there's: 172.16.x.y
  305. 16:19There's a few more constraints on this one, but then if you really need
  306. 16:23a lot of internal IP addresses
  307. 16:25you can have what's called a "class a" private network
  308. 16:2810.x.y.z is a private address and this actually gives you millions of
  309. 16:33IP addresses for your home or your business
  310. 16:35or your data center, but in short
  311. 16:37any IP addresses beginning with these few other prefixes are considered
  312. 16:41private
  313. 16:42but the problem then is that even if after this class you know HTML and CSS
  314. 16:46all the better. You know PHP, and SQL, and Javascript
  315. 16:49and you creates a website and you've run it on your laptop using software
  316. 16:53we'll introduce you to. A web server called Apache
  317. 16:56no one in the world
  318. 16:57is going to be able to visit your website because
  319. 17:00your address probably starts with one of these prefixes
  320. 17:04and your home router or cable modem or DSL modems is not going to
  321. 17:09let outside random people into your home network
  322. 17:12to access this IP address
  323. 17:14because
  324. 17:15frankly there's tens of thousands of people who probably have that exact
  325. 17:17same private IP address, so it's just uniquely identifiable
  326. 17:21and because your home router
  327. 17:23and your cable modem is sometimes a firewall into itself this traffic not
  328. 17:26gonna get into your home
  329. 17:27so in short that won't work..
  330. 17:29but you have at least two options, two alternatives, how can you get your website
  331. 17:34out on the internet?
  332. 17:43You can. Port forwarding. So let's go there. For those unfamiliar when you use
  333. 17:47a protocol like HTTP:// you're actually using other protocols behind the
  334. 17:53scenes and in fact you probably at least heard the
  335. 17:56the buzzword TCP/IP transmission control protocol internet protocol
  336. 18:01It's actually two protocols, two different standards or languages so to speak
  337. 18:05that govern how data can be transmitted
  338. 18:07on the internet and this is a bit of an oversimplification but for today's
  339. 18:10purposes assume
  340. 18:11that IP, the internet protocol,
  341. 18:13is just a set of conventions that humans came up with years ago
  342. 18:17that govern how you associate numeric addresses with computers
  343. 18:21so IP address derives from this protocol so IP is just the standard for
  344. 18:25assigning computers addresses however just signing someone an address
  345. 18:30doesn't mean you can get data to that address for that you need another
  346. 18:34standard another protocol
  347. 18:36and that's typically TCP transmission control protocol
  348. 18:39So TCP
  349. 18:40is the standard
  350. 18:41that web browsers and web servers speak
  351. 18:44in order to actually physically move data or electronically move data
  352. 18:48from point "A" to point "B"
  353. 18:50using the higher level notion of an IP address to actually uniquely
  354. 18:54identify points "A" and point "B"
  355. 18:57so for those
  356. 18:59who might want to go further in computer science and in networking in particular
  357. 19:02there's typically what's called the TCP/IP stack
  358. 19:05and so there's topics like there's the transport layer down here there's the
  359. 19:09others the IP or addressing layer here
  360. 19:12there's the application layer in short much of the internet is the result of
  361. 19:16smart people having design things and then design things on top of things on
  362. 19:19top of things
  363. 19:20and so we just typically over simplify and say TCP/IP.
  364. 19:24So what's the point there?
  365. 19:25TCP/IP allows not just the web to work but all sorts of applications
  366. 19:30There's the web. There's email.
  367. 19:32There's instant messaging.
  368. 19:34There's things like Spotify. There's dedicated
  369. 19:38applications they're using the internet
  370. 19:40but aren't necessarily inside of a browser
  371. 19:42so
  372. 19:43a server can actually do multiple things. It can receive email like Gmail can.
  373. 19:48It can be a website and get HTTP:// traffic
  374. 19:50so a server because it can do multiple thing somehow needs to be able to
  375. 19:54uniquely identify
  376. 19:56the various things that it can do
  377. 19:58and so the world introduced this notion of port numbers
  378. 20:01and typically for a web server
  379. 20:04Rather, for HTTP:// it uses this protocol TCP and the world decided some
  380. 20:09years ago
  381. 20:10the number 80 will arbitrarily but consistently identified this service
  382. 20:15so if you have a server and you have a website, and a website uses, as you
  383. 20:20probably know, HTTP:// but will look at what that means in a bit
  384. 20:23it is running so to speak on port 80 it is listening so to speak on port 80
  385. 20:28and the motivation for that
  386. 20:30is because you might also have
  387. 20:32an email server on the same physical box , right? Gmail, kind of an
  388. 20:36oversimplification, but they are both a website and an email service, and if you
  389. 20:40want to be able to send email to Gmail you can also used TCP but you have to
  390. 20:45use port 25
  391. 20:46in other words if you've go to http://www.gmail.com
  392. 20:49a with a browser you obviously want to web page back
  393. 20:52so even though you, the human,haven't typed 80, it's automatically
  394. 20:55inserted for you by your browser, behind the scenes
  395. 20:58but if you send an email from Eudora or apple mail or Outlook or whatever
  396. 21:02you're using
  397. 21:03you again probably don't have to care about this detail but that program
  398. 21:06is going to send data still to gmail.com
  399. 21:09but specifically to port 25.
  400. 21:11So, when a computer's on the internet, a server, and it's listening for traffic all
  401. 21:16of that traffic comes in on a specific port
  402. 21:19a specific like pathway into the server
  403. 21:21so that it knows if it's a webpage or an email, right? Because especially email; emails can
  404. 21:25contain HTML now
  405. 21:27so you need some way of distinguishing the two fundamentally
  406. 21:30so when you propose port forwarding, what does this mean?
  407. 21:33Well, if your home network
  408. 21:34has a public IP address, and you usually, again, get 1 from your ISP
  409. 21:39and that is some address of the form w.x.y.z
  410. 21:43and your individual laptop on which you've created your final project that
  411. 21:47you wanna make publicly available
  412. 21:49is that one of these IP addresses, doesn't really matter what it is,
  413. 21:52what you can do is configure your home router AKA firewall AKA cable
  414. 21:56modem, it depends on what make and model you have,
  415. 21:58but that device,
  416. 22:00you can configure it to say
  417. 22:01any internet traffic that comes from the internet to my home
  418. 22:05on my public IP address
  419. 22:07destined for port 80
  420. 22:09should be "port forwarded"
  421. 22:10to IP address 192.168.x.y
  422. 22:15port 80
  423. 22:16in other words you can tell this machine to take incoming data on that port
  424. 22:20and then route it very specifically to this computer, your's,
  425. 22:23so that it just works.
  426. 22:26Now, there is one gotcha here.
  427. 22:28Especially if you have siblings, for instance or other technically minded family members
  428. 22:31or roommates
  429. 22:32if you're doing port forwarding in this way
  430. 22:35only one of you can operate a webserver
  431. 22:38behind your cable modem because you only have one IP address to uniquely
  432. 22:43identify your website and if you've already claimed 80 as your own and
  433. 22:46that's the default for the world browsers to use pretty much only your
  434. 22:49webserver can be accessed
  435. 22:52now there is a work around here if your roommates really ticked off at you, you can
  436. 22:55say "Fine, fine, fine, I will give you port 81."
  437. 22:58but what does that mean? That means the entire world has to type out a URL like
  438. 23:04let's say your address was indeed w.x.y.z
  439. 23:08this would be your IP address
  440. 23:10your URL
  441. 23:11your roommates, unfortunately, would be this crazy looking thing (http://w.x.y.z:81/),
  442. 23:14right, or any number really.
  443. 23:17Now, there are some restrictions on the numbers. Probably can't use 81,
  444. 23:20but the point is the same.
  445. 23:22This is not standard, and you probably don't want your users having to remember such an
  446. 23:26esoteric detail as an arbitrary number.
  447. 23:28However if on the internet
  448. 23:31you visit any website with :80,
  449. 23:34odds are you will get to the website with which you're familiar it's just the
  450. 23:38browser is again for user convenience inserting the port number
  451. 23:41automatically for you.
  452. 23:44and little trivia for HTTPS, the secure version of HTTP, what port number does that use?
  453. 23:50443, and you sometimes do see that in the URL and you also see some other
  454. 23:53ports commonly like :8080
  455. 23:55:8080 is just kind of arbitrary popular port that some companies used to
  456. 23:59run certain services but in short using anything non-standard these days
  457. 24:03especially for commercial production web sites where you're trying to make money
  458. 24:06or trying to stay online up one hundred percent of the time
  459. 24:10using non standard ports is bad, because there are certain companies, there are certain
  460. 24:13campuses that will pretty much block any ports besides 80 and 443,
  461. 24:18but thankfully there's a work around, even if you wanna run some random server
  462. 24:21like a bit torrent server, or something like that
  463. 24:23all you have to do is change the port number to be 80 or 443
  464. 24:27so the reality is that with firewalling and will have this conversation toward the end the
  465. 24:31semester, when we talk about security more generally,
  466. 24:33in a lot of security mechanisms are kind of a joke because all you need is a
  467. 24:36modicum of savy or you know,
  468. 24:38having listened to the past 30 seconds of words that I just said
  469. 24:41you can circumvent these kinds of
  470. 24:43restrictions. Hotels do this a lot, Starbucks does this a lot
  471. 24:46the port numbers are really just this very basic
  472. 24:49mechanism, and the world and adopted some standards, alright,
  473. 24:53so, perfect! We have a solution. All you have to do is somehow figure out
  474. 24:57how to download the manual for your Linksys router or Apple Airport
  475. 25:02and you can configure all this port forwarding stuff and run a website
  476. 25:05from your own,
  477. 25:06so not quite. Because if you actually have a popular website, Verizon and Comcast
  478. 25:10might very well notice and just shut you off entirely,
  479. 25:13because that huge disclosure agreement you probably clicked through and never read when
  480. 25:17you signed up for internet service probably said you may not run
  481. 25:19a website on your home computer
  482. 25:22so plus that this was a pain in the neck to do anyway, plus I might
  483. 25:25unplug my laptop sometimes and so my websites gonna go down anytime i go to
  484. 25:29go out
  485. 25:30so not the best solution even if you have a desktop so let's at least try to
  486. 25:33push a little harder and assume that we need to outsource this problem, or we
  487. 25:36at least need to put your computer
  488. 25:38on the internet itself, in a data center, on the campus, where it can stay plugged in
  489. 25:42perpetually, under your desk at work if the system admins allows it,
  490. 25:46and moreover i don't want my website to live at w.x.y.z,
  491. 25:51or any number for that matter,
  492. 25:53I want it to live it david.com or some URL
  493. 25:56that is sort of distinctly my brand or my name,
  494. 25:59so that begs the question how do you go about
  495. 26:02getting your own
  496. 26:04domain name?
  497. 26:05Has anyone done this before? Yeah, how do you do it?
  498. 26:11Okay, where do you purchase them?
  499. 26:14Okay, so namecheap.com is a very popular place, fairly inexpensive
  500. 26:18Go Daddy is another very popular place
  501. 26:21This one (Go Daddy) is kind of riddled with
  502. 26:24up-sell attempts, trying to get you to buy everything in the kitchen sink,
  503. 26:28but you don't need to do that. There's all there's all sorts of
  504. 26:30domain name registrars out there these days. A bunch of years ago
  505. 26:34network solutions was the only one,
  506. 26:36but then the market was created and so there's a lot of places to buy domain
  507. 26:40names.
  508. 26:40For the most part, it doesn't matter where you buy your domain name from, but
  509. 26:44you do sometimes get different features
  510. 26:46in particular you get DNS features sometimes, more control over your DNS
  511. 26:50servers.
  512. 26:50They might throw in free email accounts, free hosting,
  513. 26:53but for the most part, it doesn't matter a huge amount in particular, you don't need to go
  514. 26:57to someone like network solutions and pay thirty dollars a year, when you could
  515. 27:00go to someone like Go Daddy and pay $9.99 a year or namecheap and
  516. 27:04pay $4.99 a year
  517. 27:06so in short paying more for domain name
  518. 27:08isn't necessarily giving you anything more
  519. 27:11uh... in the way of
  520. 27:13uh... functionality. It depends on what maybe the add-ons are.
  521. 27:17So, how do we go about doing this? Well, let's go to something like Go Daddy.
  522. 27:21Go Daddy's kind of a... Well, let's actually try namecheap.
  523. 27:23Let's go to namecheap, see what they look like,
  524. 27:27much of my friends have indeed used this website.
  525. 27:30right so let's see domain name to search and the search for david.com
  526. 27:35probably take. Oh,l that is a good price. Already doing better than Go Daddy
  527. 27:39All right. So as I expected it is taken as are almost all forms of david.
  528. 27:45*Ha* They've suggested I name myself "David John", "David Smith", "David Johnson", "King
  529. 27:49David", "David Photography.us"
  530. 27:51So one of the hardest things, frankly, of starting a business these days is
  531. 27:54finding an available domain name, let alone your own personal vanity domain names
  532. 27:57for people's names
  533. 27:58but if we found something we like.. Maybe I do want DavidTV... Well, that's atrocious.
  534. 28:05$6,000 for this domain but it's not yet taken.
  535. 28:09It's probably one of the cheaper ones up above so let's assume we found something
  536. 28:12we're happy with
  537. 28:14so we add it to our cart and we check out
  538. 28:16I now own some domain name, David something.com.
  539. 28:20So what now do I do with it?
  540. 28:22How do I associate it with my web server?
  541. 28:24and for that matter, how do I get a web server? Let's assume I have a web server, and we'll
  542. 28:27cross that bridge in a moment,
  543. 28:29but I have a domain name.
  544. 28:31What do I need to do with it to start using it? Well I need to tell the world what
  545. 28:35my IP address is.
  546. 28:36So I need to, somehow, tell the world that my server.. I don't know who's going to be
  547. 28:41hosting it, but i know it will have a IP address, by nature of how the web works.
  548. 28:45so let's assume I know the IP address is going to be
  549. 28:48w.x.y.z.
  550. 28:49I somehow have to inform the whole world
  551. 28:52that david.com's IP address is w.x.y.z.
  552. 28:55So one of the things I'll have to do at namecheap.com or Go Daddy or
  553. 28:59networksolutions.com
  554. 29:00is I tell the registrar
  555. 29:03not what my own computers IP address will be
  556. 29:06but rather what the IP address
  557. 29:08of my domain names
  558. 29:10DNS server's will be
  559. 29:13and the convention is typically that every domain name in the world should have
  560. 29:162 DNS servers: primary and secondary
  561. 29:18so a main one and a backup one.
  562. 29:20They can be one in the same, but the world really pushes people having at
  563. 29:23least two for the sake of up time and redundancy
  564. 29:26so I need to know not my own IP address, per se,
  565. 29:29but I need to know the IP address of one and then a second DNS server
  566. 29:33Now I don't have my own DNS servers and I want to configure two more
  567. 29:36computers in addition to my web server
  568. 29:38so this is where web hosting companies come in.
  569. 29:41So in addition to buying the domain name I also wanna host my website somewhere
  570. 29:45and it could very well be the same exact company. Could be Go Daddy, it could be
  571. 29:49Name Cheap
  572. 29:50depending on the service that they provide, but
  573. 29:53we need to have
  574. 29:55a web hosting
  575. 29:56option. So what's the web host going to give us? A web host is going to give us
  576. 30:00hard drive to put my files on, you know, maybe not hard drive, per se, but some
  577. 30:04illusion of storage space
  578. 30:05they are going to have their own connections to the internet
  579. 30:08this web hosting company
  580. 30:10there hopefully gonna have a pool of IP addresses so that I can have at least
  581. 30:12one of them.
  582. 30:14They're also going to have some RAM. they're also going to have technical
  583. 30:17support staff. In short, they're gonna have a server, and all of the things
  584. 30:20necessary to keep a server alive on the internet,
  585. 30:22and hopefully they're also going to have at least 2 of what..?
  586. 30:27DNS servers.
  587. 30:28So if I decide to host my website, let's say dreamhost.com. This is a very
  588. 30:33popular sort of "El Cheapo" (basic)
  589. 30:34kind of web hosting company
  590. 30:38that I've used myself in the past like $6.95 or $8.95 a month.
  591. 30:42So that's pretty good but again you get what you pay for.
  592. 30:45I wouldn't necessarily build a big business on it
  593. 30:47So for $8.95 a month
  594. 30:49I have the ability to upload my HTML and CSS files and soon PHP and Javascript
  595. 30:53files to their server.
  596. 30:56Their server has nearby 2 DNS servers, each of which, have their own
  597. 31:00IP addresses. So once I know what Dream Host's IP addresses are for its
  598. 31:05nameservers, I'd tell Name Cheap
  599. 31:07or Go Daddy, or wherever I bought my domain name
  600. 31:09and that's it
  601. 31:10the only time I have to talk to my registrar again, most likely, is in a
  602. 31:13year when they charge me another $5.99 or $99 for my
  603. 31:17domain name. Unfortunately, "buying,"
  604. 31:19you're really renting your domain name from these registrars.
  605. 31:23Now there's a whole bunch more involved in setting up of the web server
  606. 31:27and getting my files there
  607. 31:28but at least now I've told the world
  608. 31:31that if you want to know where david.com is
  609. 31:33Ask these people. These two IP addresses of the name server. Either one
  610. 31:37and those IP, those DNS servers should hopefully know. Why?
  611. 31:42Because so long as I keep paying dreamhost or someone else $8.95
  612. 31:45per month
  613. 31:46they will ensure that both of those DNS servers
  614. 31:48know what my own website's IP address is, and how will they know?
  615. 31:52Because of what I'm paying for is some storage space and some internet
  616. 31:56connectivity on one of their servers, one of their servers has an IP address
  617. 32:00so they just tell their DNS servers that david.com's IP address,
  618. 32:03is whatever the IP addresses is of the server
  619. 32:05they've told me to put my content on.
  620. 32:08and will actually look in little more detail
  621. 32:10what's involved in that.
  622. 32:13..but any questions?
  623. 32:16so in answer to the somewhat
  624. 32:20frequent problem where a website does work at www.something.com but not at
  625. 32:25something.com
  626. 32:27How do you fix something like that? There's usually two pieces to the
  627. 32:30solution
  628. 32:311. You have to make sure that there's a DNS record for something.com
  629. 32:36that is, there's an IP address associated with it. In addition to one being
  630. 32:39associated with www.something.com
  631. 32:43and you need to configure the webserver to accept requests for either something.com
  632. 32:47or
  633. 32:48www.something.com
  634. 32:51but really let's focus on just this DNS piece for now.
  635. 32:56so DNS... turns out the DNS is relatively straightforward and once you
  636. 33:00start operating a whole bunch of services on your own website. Maybe you
  637. 33:03have an email server,
  638. 33:05maybe you want to use hosted services like Google calendar
  639. 33:08Google docs. You can do things like
  640. 33:12actually for CS75, for this course,
  641. 33:14the TFs (teaching fellows) and I
  642. 33:15use Gmail essentially to host CS75.net's email
  643. 33:20so that's the website as I'll soon reveal
  644. 33:23if you haven't pulled up the website,
  645. 33:25and we want to be able to have an email list so that each of us can email
  646. 33:28everyone else very easily. So we want email addresses of the form [email protected]
  647. 33:34Now how do we do this? Well, we could set up a mail server, we could pay
  648. 33:37someone to do this, but an amazing service out there is Google apps, some of you
  649. 33:41might be familiar and for small fish like us where we only have a few people
  650. 33:45on staff
  651. 33:46you can actually have hosted Gmail, hosted Google calendar, hosted
  652. 33:50Google documents
  653. 33:51for I think 20 or fewer people for free
  654. 33:54and what you do is you configure your own DNS servers
  655. 33:57to map
  656. 33:59something like mail.cs75.net
  657. 34:02to essentially gmail.com so that whenever we send an email to
  658. 34:06something of the form mail.cs75.net, it figures out
  659. 34:10via DNS to actually go to Google. We could have calendar.cs75.net
  660. 34:13and you hit enter,
  661. 34:15you actually end up at Google Calendar, but our copy of
  662. 34:17Google calendar, and this is all thanks to DNS and there's only a few
  663. 34:21settings with which need to be familiar and we already talked about this one
  664. 34:24an NS record
  665. 34:26is
  666. 34:27a record in a DNS server
  667. 34:30that tells the world what the IP address is for that domain.
  668. 34:35So, what's inside a DNS server?
  669. 34:37Frankly it's a database, and you can think of it as like a database with
  670. 34:40excel files so spreadsheets that just have rows and columns
  671. 34:44and those columns essentially represents.. In each row, rather, you would
  672. 34:49have for instance a domain name and an IP address. Domain name : IP address. Domain name : IP address.
  673. 34:53That's really all that's underneath the hood in a DNS
  674. 34:56server at least so far as we're concerned.
  675. 34:58But there are different types of rows. So one of those rows can be an official
  676. 35:02record
  677. 35:04that says the name server, NS, for this domain is whatever IP address Dreamhost gave me.
  678. 35:09For instance
  679. 35:11Now, what else can I have?
  680. 35:12Well there's an "A" record. So an "A" record, a row of type "A" in that this
  681. 35:17spreadsheet of sorts
  682. 35:19is literally
  683. 35:20Domain name : IP address it's as simple as that, so if I had something.com
  684. 35:23In it's like the address should be xd w dot x dot y dot c
  685. 35:26that's what's called in a record
  686. 35:28and i can also have mail docs are something dot com or calendar dot
  687. 35:33something dot com
  688. 35:34and i can associate with an i_q_ dress
  689. 35:35and how do i do this they totally depends on your registrar or on your
  690. 35:39d_m_s_ provider whether extreme poster go daddy like
  691. 35:42but these days it's usually a web interface back in the day
  692. 35:44it was a command line you added a text file on the server but these days it's
  693. 35:48been made to be more user-friendly but it's essentially
  694. 35:50a spreadsheet
  695. 35:52thirst to his slightly fancier features
  696. 35:55a c name
  697. 35:56or canonical name
  698. 35:57isn't alias so it turns out with a lot of these webservices like school blacks
  699. 36:03where google's providing the service
  700. 36:06you don't necessarily want to have to know what google's i_p_ addresses
  701. 36:10writers one deep right on the only one who works there and so you can't really
  702. 36:13ask them out frankly could run a command in figured out
  703. 36:16but if you hard code into your work in a server
  704. 36:19the i_p_o_ dress of google dot com implication is that if they ever need to
  705. 36:22change their i_q_ address which happens not everyday pretty however few months
  706. 36:26few years for whatever technical reasons
  707. 36:29now your website goes down
  708. 36:30it's common kinda be better
  709. 36:32at least like a conceptually if
  710. 36:35calendar dot something dot com
  711. 36:36didn't resolve to google's likey address but rather what if pounder dot google
  712. 36:41dot com could instead resolve more generically too
  713. 36:44calendar dot google dot com
  714. 36:46so don't have your domain map to a nike address
  715. 36:49had your domain name map to someone else's domain
  716. 36:53and then let baird cnf server tell the world
  717. 36:57what the ac current i_q_ addresses of
  718. 36:59calendar dot google dot com
  719. 37:00so in other words if you want this layer of obstruction where you don't care what
  720. 37:04the i_p_o_ dresses you just care that your domain india synonym for someone
  721. 37:08else's domain name
  722. 37:09then you use a c name record and what the two columns look like our domain
  723. 37:12name domain
  724. 37:14instead of the main aim aki address
  725. 37:16so it's a wonderful useful feature
  726. 37:18especially these days if you look into hosted solutions not just like to
  727. 37:21collapse
  728. 37:22but companies that have services like
  729. 37:25uh... you know i customerservice forums
  730. 37:27if you go to a website know often have an address like support dot dell dot com
  731. 37:31or the like
  732. 37:32well there's a lot of companies days that to provide
  733. 37:35our customer service web sites
  734. 37:37at but it would look kind of lame if i go to del dot com and i get redirected
  735. 37:40to customerservice dot com
  736. 37:42del would provide read rather re brand someone else's service
  737. 37:46to look like dell even though someone else implemented and is hosting it so
  738. 37:50why us by a c name someone like dell could say support dot dell dot com
  739. 37:55should actually result to customerservice dot com but the user
  740. 37:58should never know that because the oral stage support dot dell dot com so that's
  741. 38:02just one of the things you can do
  742. 38:04with these things called seanangs
  743. 38:05and lastly in annex record as a male exchange record
  744. 38:09and mail change record simply states
  745. 38:11what is the i_p_o_ dress
  746. 38:13of the server or servers that should handle inbound mail
  747. 38:17for this domain
  748. 38:19and this is great
  749. 38:20because when you use your door over gmail or outlook
  750. 38:22and you type in the year uh... david mail-in at harvard dot e_d_u_
  751. 38:27and hit enter
  752. 38:28similarly there you have no idea what harvard's i_q_ dresses
  753. 38:31but your computer does but it's not the i_q_ dress of harvard that you do you
  754. 38:34per se that your email client needs
  755. 38:37it's the acted as a partridge mailserver
  756. 38:39so thanks today that's your mac or pc
  757. 38:42can ask your icici is deanna server org dot doc dot this whole hierarchy we
  758. 38:46discussed earlier
  759. 38:47in state what is the annex record for harvard idea
  760. 38:50and harvard dot e_d_u_ still means name servers should be able to say send all
  761. 38:55mail to the psyche address
  762. 38:56and what's nice about annex records as you can have multiple wants with
  763. 38:59priorities
  764. 39:00so websites orf rather
  765. 39:02uh... domains that had very old large numbers of users were you really don't
  766. 39:07want their mail servers going down
  767. 39:08you could have two or three or ten different mail servers
  768. 39:11and the d_n_a_ system all say try this one than this one than this one than
  769. 39:15this one
  770. 39:15just in case any of those go offline
  771. 39:18it's all thanks to d_n_ s and while research take all this for granted
  772. 39:22once you start developing your own websites maybe creating your own
  773. 39:25companies or confirming back your own school having these abilities is
  774. 39:29wonderfully powerful and it really boils down to
  775. 39:33basics
  776. 39:37any questions
  777. 39:41all right so that was kind of a lot want to take out three or so minute break
  778. 39:44characters restrooms in the hallway there soda machines i think around the
  779. 39:47whole corner
  780. 39:48on the move rejoin in about three mins
  781. 39:52alright we are back so
  782. 39:54why don't we take a look at the course itself and what you are in four and with
  783. 39:58the courses expectations are so in terms of prerequisites the official
  784. 40:02prerequisites are these so much more years of programming experience as well
  785. 40:05as comfort
  786. 40:05with html c_s_i_s_
  787. 40:07so what does this mean in real terms so summer school is very short since about
  788. 40:11six weeks and of course has three na lunch for billy sized projects
  789. 40:16and the gold really is to make sure that at the end of this short semester
  790. 40:19you feel quite comfortable going off and doing much more on your own in the way
  791. 40:23of website development not just html once yes s
  792. 40:27informed static websites but really dynamic websites that are driven by
  793. 40:30a language like p_h_p_ and javascript back in the database like mysql
  794. 40:36so it's a fairly intense course uh...
  795. 40:38if you believe takin
  796. 40:40something like computer science asks one of the introductory computer science
  797. 40:44class
  798. 40:45we're just one or two courses i will say from past experience
  799. 40:48you'll probably find the core
  800. 40:51challenging to say the least and typically willy estimate about thirty
  801. 40:55hours per project so there's three projects universally nine days for each
  802. 40:59of them
  803. 41:00on that's about thirty hours each but that was beyond average so students for
  804. 41:03whom programming is a little less familiar or it's been a bunch of your
  805. 41:07since you program to read only taken one or two introductory courses but don't
  806. 41:11really think of yourself as a programmer
  807. 41:13on the course is definitely more challenging so do beware uh... diving in
  808. 41:17i will say if you're on that fence and not sure if your comfort level in
  809. 41:21background is there
  810. 41:23but you can go to c_s_ seventy-five dot tv which is the opencourseware site for
  811. 41:27the course
  812. 41:28where we have several previous semesters worth of lecture videos handouts of
  813. 41:32projects some of which will be are similar to this summer's
  814. 41:36so by looking for the past you can perhaps in for as to what this summer
  815. 41:40will be like and get a sense then
  816. 41:41if the p_b_s_ of pastors projects completely overwhelm you
  817. 41:45or completely excites you
  818. 41:46so i would try to use that as an additional input tonight
  819. 41:49uh... before deciding whether this is the course for you
  820. 41:52um... in terms of expectations
  821. 41:54and there are these three projects in attending or watching if distant or
  822. 41:58unable to make it all in-person the lectures
  823. 42:01on the lectures will be structured as follows two tonight our focus is on
  824. 42:04h_t_t_p_ and for the mechanics the underlying fundamentals of the internet
  825. 42:08that for years you prolly taken for granted
  826. 42:10but once you really start building your own website and having to negotiate
  827. 42:13things like configurations of servers and coding databases tonight will start
  828. 42:17looking at some of those more technical details
  829. 42:20on wednesday and han next week will look at p_h_p_
  830. 42:23itself so one of p_h_d_'s on most compelling features these days is one
  831. 42:29it's in tactically very familiar are very similar to mine which is with which
  832. 42:33many of the folks in this room in at home or familiar syntactic lee it's
  833. 42:36similar to ciency plus plus
  834. 42:39on and other a procedural languages
  835. 42:41on this very much in vogue very popular it's pretty only present these days in
  836. 42:45terms of the web hosting companies that they're out there and its super easy get
  837. 42:48setup even mac o_s_ comes with p_h_p_ an apache the webserver pre-installed
  838. 42:53and their packages for windows in the nixon other computers that make it super
  839. 42:56simple to get setup on in terms of related languages rop iphone in ruby
  840. 43:02you're probably the to close this contenders in terms of popularity with
  841. 43:05p_h_p_
  842. 43:06and none of these is necessarily better than the others who could very quickly
  843. 43:09devolve into a religious debate
  844. 43:11but one of the nice things about p_h_p_ is again the omnipresence of support for
  845. 43:14a doubt there
  846. 43:15and also i think pedagogical e the documentation for p_h_p_ is outstanding
  847. 43:19and as you'll see
  848. 43:20the p_h_p_ dotnet online reference manual for functions and whatnot is rich
  849. 43:25with examples intelligent discussions and so we've just found
  850. 43:29that it's a very nice way of diving in deeper to web programming in front of
  851. 43:33course like this you should be able to continue on
  852. 43:35if you haven't come from that direction are ready to the likes of pipeline
  853. 43:38of ruby andrea speed for the job of world they espy's for the windows world
  854. 43:44there's a lot of commonalities among them
  855. 43:46will transition lecture three
  856. 43:48to looking in exile alyssa when it comes time to actually store data whether
  857. 43:51statically or dynamically
  858. 43:53you don't need a full-fledged database you don't need my sick we don't need
  859. 43:55oracle you don't need anything along those lines you could just use text
  860. 43:58files
  861. 43:58but he'd be nice if it's easy to read and write those text file select some
  862. 44:02now
  863. 44:03is a very popular language of sorts of metal language with which to right now
  864. 44:07textual files and to representative more generally of the topic will come back to
  865. 44:11when our javascript lectures
  866. 44:12on the document object models so they'll be some commonalities there
  867. 44:16uh... as sql are structured query language is what's used by a many
  868. 44:21relational databases these days among them my sequel
  869. 44:24oracle postgresql theirs
  870. 44:26also in vogue these days or are no sequel servers document uh... storage
  871. 44:31engines which will look at later in the semester as well
  872. 44:33but will primarily used for the courses projects my sequel
  873. 44:36will look at lecture six and seven eighths javascript and at this chat more
  874. 44:39general technique of ajax the ability to you
  875. 44:42whose javascript
  876. 44:43to query a server even after pages loaded
  877. 44:46to get back more data for instance google maps does this to get more
  878. 44:49reptile squares of mapping information when you click and drag
  879. 44:53a face book does this to push of live updates from your news feed in the light
  880. 44:57i will look toward the end of the semester then
  881. 45:00at some higher level concepts like
  882. 45:01security which wool interlaced throughout the semester but will really
  883. 45:05focus on it
  884. 45:06in lecture eight looking at common attacks on web servers on websites on
  885. 45:10databases
  886. 45:11so as to not necessarily acquaint you with everything they can go wrong
  887. 45:15but to at least plant the seeds in your mind of things you should be thinking
  888. 45:18about indeed there's so much code out there
  889. 45:21that is just one ruble because the people don't think do things like
  890. 45:24sanitize user input that is they don't check it for dangerous characters
  891. 45:27so we'll talk about things like sequel injection attacks will talk about
  892. 45:31uh... prostate scripting attacks in any number of other ways
  893. 45:34that are so darn easy to avoid
  894. 45:37yet many people just
  895. 45:38don't realize it or don't know how inferno typically
  896. 45:41simple little function calls conflicts
  897. 45:43and in the last lecture will look at scale build so would be of great problem
  898. 45:47to have if you've got so much traffic
  899. 45:49that all of the lessons you learn from lecture zero two eight
  900. 45:53uh... starts at your website search crumbling under the load and so will
  901. 45:57conclude the semester by looking at
  902. 45:59okay now you have to build now for a few dozen people two hundred people your
  903. 46:02school
  904. 46:03but several thousand or maybe even several thousand people per second how
  905. 46:06you actually scale
  906. 46:07from one little webserver to a bigger one
  907. 46:10but then once you have the biggest and most expensive available webserver what
  908. 46:13do you do
  909. 46:14we start to scale as they say poor is awfully so you get multiple servers
  910. 46:18maybe even cheaper slower web servers
  911. 46:20but you somehow figure out how to balance lowdown so to speak traffic
  912. 46:23across them
  913. 46:24how do you do that we databases how do you do that geographically
  914. 46:28uh... how do you do that with cloud computing a buzzword that's all the rage
  915. 46:31these days but has a very interesting technologies inter-lining
  916. 46:34will wrap up this master looking at those bigger picture
  917. 46:37issues
  918. 46:38in addition to second lectures
  919. 46:40we will have most weeks on sections in office hours for the course has
  920. 46:45uh... for teaching fellows folks who have either taught or take in the course
  921. 46:48before
  922. 46:48who'll be with us in the form of sections and office are sections will be
  923. 46:52a more slightly more intimate opportunities so on wednesdays in
  924. 46:55monday's typically right after lecture if you'd like to stick around to dive a
  925. 46:58little deeper into that weeks project
  926. 47:00so in addition to the pbf specification you'll get of a project
  927. 47:03one of its yes will walk you through the week uh... the week's project to give
  928. 47:07point now
  929. 47:08offer some design tips awesome helpful direction answer any confusion
  930. 47:12why did something quite poorly in lecture we can revisit those kinds of
  931. 47:15luck topics in sections that you get another perspective altogether
  932. 47:18and then office hours which is meant to simply follow
  933. 47:21section so one section officially wraps after an hour
  934. 47:23uh... office hours will be an opportunity for one-on-one human a with
  935. 47:27one or two fifty s
  936. 47:28uh... and this will be an opportunity in particular
  937. 47:30for questions with the projects if you're having trouble understanding
  938. 47:33something trouble chasing down some bug in addition to reaching out to us on
  939. 47:37line with a bs in person opportunities for those of you who are local for those
  940. 47:40of you were dissent
  941. 47:41more on the online opportunities in just a moment
  942. 47:45in addition to
  943. 47:46um... the courses classes there are projects three of them and they will
  944. 47:50outflow
  945. 47:51roughly in the order of the topics on the syllabus portal start in terms of
  946. 47:55p_h_p_ which would be new to song or most people in the room
  947. 47:58then will introduce mid semester databases in my sequel being will
  948. 48:02introduce javascript and ajax
  949. 48:04and so that all sense would be the tripartite approach
  950. 48:07of the courses projects in terms of the topics
  951. 48:10um... in terms of grades on projects are graded fairly holistic lead because
  952. 48:14you'll be encouraged to make a lot of design decisions on your own
  953. 48:18you won't necessarily have to implement per slice lee
  954. 48:21what we tell you to rather you'll have to meet certain feature and technical
  955. 48:24requirements
  956. 48:25so will to evaluate the three projects on these axes cisco will be in axis that
  957. 48:30and it'll be a numeric sport that captures how much of the project you
  958. 48:33actually attempted
  959. 48:35uh... correctness will capture how much of your code works in accordance with us
  960. 48:39back
  961. 48:39if it's very body that would not be considered very correct
  962. 48:42design is more subjective design is pain might work might work perfectly
  963. 48:46but does it look like a mass underneath the hood you had like ten nested four
  964. 48:50that's that is not good designed for instance
  965. 48:52and so designed to be an opportunity for pf particularly qualitative feedback
  966. 48:55from the teaching fellows on your code
  967. 48:57and style
  968. 48:59is the more of the aesthetics or your variables reasonably named are is your
  969. 49:03code well commented is it nicely indented
  970. 49:05the sordid easy things that are good habits to getting to meet if you're not
  971. 49:09yet enough
  972. 49:10that's what we define a style
  973. 49:11and then just for reference things are weighted in roughly the order the amount
  974. 49:15of time that's required to get things right
  975. 49:17so for instance this is the formidable used a computer total score for each of
  976. 49:21the project
  977. 49:22were correctness for instance is weighted more heavily
  978. 49:25then style and uh... batch of capture the fact that
  979. 49:28inventing a code polish and take you all that long but she seemed on bob's
  980. 49:32concert retake
  981. 49:33quite a bit of time
  982. 49:34so the format was meant to capture
  983. 49:37um... the courses website which help open just a moment has everything that
  984. 49:41you will need for the course including videos of lectures if you can't make it
  985. 49:44some evening work it's tricky because a full time work
  986. 49:46totally fine to watch the courses lectures online all the handout
  987. 49:49similarly will be available there
  988. 49:51what will be rolling out over email this week is access to a tool that actually
  989. 49:55uh... we've used in another class of mine concious fifty but it's a
  990. 49:58discussion tool that will allow you to interact with classmates with myself
  991. 50:02with the courses t_s_ online
  992. 50:04sab online discussion forms of sorts but using some of the same technologies that
  993. 50:08will talk about
  994. 50:09in the class including a jackson similar
  995. 50:11on so you will soon receive emails from us with invitations of sorts to create
  996. 50:15accounts within the uh... website
  997. 50:18so that we can you can start directing questions to classmates poor privately
  998. 50:21to the staff
  999. 50:22biopsy is fifty discuss
  1000. 50:24so any questions on the structure expectations of
  1001. 50:27but here in the right place
  1002. 50:30must of course itself
  1003. 50:34in terms of
  1004. 50:39attendance is uh... expected and encourage bucks not factored
  1005. 50:44so see it in a sense of protracted
  1006. 50:47uh...
  1007. 50:48then in terms of lecture typically we reese were slated for three fifteen to
  1008. 50:51six fifteen i think will rarely go lol three hours typically the same course
  1009. 50:55during the year on these two hours of classical typically have a little bit of
  1010. 50:58wiggle room and let me not commit to just two hours per night
  1011. 51:02on but we will typically not go i think as many as three hours for the frankly a
  1012. 51:05lot to take and com twice a week no less
  1013. 51:08uh... so uh...
  1014. 51:11where we end up its act
  1015. 51:13any other questions
  1016. 51:15olin over there are two sections
  1017. 51:17the implication of that detail
  1018. 51:19is that sections will not start necessarily eta preordained time what
  1019. 51:22will try to do is the test will come a bit early
  1020. 51:24so if we do end up wrapping up a lecture we'll take a short break the band i've
  1021. 51:27been right outright immediately to section
  1022. 51:30an office hours so that you don't sit here awkwardly just waiting for an
  1023. 51:34arbitrary time to come around
  1024. 51:38for the distance students sections will be filmed as well and we will be making
  1025. 51:42ample use of online interactions for students who are primarily distance on
  1026. 51:46and we've also experiment in the past with things like skype in video
  1027. 51:50conferencing or
  1028. 51:51online chats com were quite flexible for whatever works uh... pedagogical for
  1029. 51:55folks
  1030. 52:00good question and typically not for distance jeans with sections we do film
  1031. 52:03them but there is some leniency in when we post them we may experiment with
  1032. 52:07trying to straighten some things online but this room is not equipped for that
  1033. 52:10so i shouldn't makeup promises to that just yet
  1034. 52:13but either way things will be available in synchronously after the fact
  1035. 52:18the office hours will typically be right after sections on mondays and wednesdays
  1036. 52:22which are right after lectures
  1037. 52:25uh... the motivation being especially for folks who commutes
  1038. 52:27we figured we try to compact things from mondays and wednesdays you'll have to
  1039. 52:30come to campus yet again
  1040. 52:32and we're flexible too if for instance
  1041. 52:34you're really struggling in the class you have lots of questions or
  1042. 52:37your schedule you have a nighttime class right after work
  1043. 52:39'em were happy to do things by appointment as well
  1044. 52:42soldier will will meet you half way as best we can
  1045. 52:47somewhat hosting companies we talked earlier about d_n_a_ aspin sort of
  1046. 52:50getting traffic to some destination b
  1047. 52:53but once they get their what's waiting for the use or where are your rates tim
  1048. 52:56allen's yes essence in p_h_p_ files actually store
  1049. 52:59so this is a little screenshot from this one company dreamhost and i don't
  1050. 53:02necessarily recommend them over any others
  1051. 53:04but they're popular among our own and super cheap and just to give you a sense
  1052. 53:07of what you get
  1053. 53:09and what you don't really get
  1054. 53:10here's a screenshot of what you get for parity for eight ninety five per month
  1055. 53:14so you'd have to get unlimited tera bites
  1056. 53:17of disc storage space
  1057. 53:19uh... you get unlimited tera bites of monthly bandwidth you get an unlimited
  1058. 53:23number of domains hosted and you get an unlimited number of user counts email
  1059. 53:27account bicycle databases
  1060. 53:29and at the turn of the distribution of the next fall back
  1061. 53:32took ourselves to good to be true
  1062. 53:34so what is the capture
  1063. 53:36but that's an amazing deal for eight ninety five
  1064. 53:39unlimited everything
  1065. 53:41so what are some of the taxes are what are they doing here technologically to
  1066. 53:44make this possible
  1067. 53:51exactly so a lot of these web hosting companies are shared services whereby
  1068. 53:56you might get this
  1069. 53:57but they're also promising the exact same thing to ten other people to one
  1070. 54:00hundred other people
  1071. 54:02now turns out that its g_d_p_ the protocol we discussed earlier
  1072. 54:06there is a future for these days for what's called virtual hosting
  1073. 54:09so back in the day for the web every website needed unique i_p_ address
  1074. 54:13essentially so that when you type in something dot com
  1075. 54:16you went to one web sites and that website madonna server that server had a
  1076. 54:19nike address and if you want to the second website
  1077. 54:22you better get a second server or these give that computer a second i_p_ address
  1078. 54:26however in more recent versions of h_t_t_p_
  1079. 54:29will see through some experimentation with actual browsers
  1080. 54:31browsers send and other issue to be hatter they don't just send gets
  1081. 54:36they also send a reminder to the web server as to what the user typed into
  1082. 54:39the u r l
  1083. 54:40so that you can now have these days multiple websites foo dot com bardot
  1084. 54:45combats dot com all living on the same physical server
  1085. 54:48at the exact same like he address
  1086. 54:51and because the browser's remind the server what the user typed in
  1087. 54:55from dot com or bar dot com or about dot com
  1088. 54:58the server
  1089. 54:59even though it's receiving traffic for three different websites
  1090. 55:01can figure out from those so-called headers what was requested
  1091. 55:05and then return the appropriate
  1092. 55:07domains
  1093. 55:07homepage
  1094. 55:08so in this case
  1095. 55:11that's great 'cause it makes this possible we only have four billion i_p_
  1096. 55:15addresses in the world in the are legitimately running out and so this is
  1097. 55:18great that we can multiplex servers in this way and put multiple people
  1098. 55:23multiple websites on the same mikey address
  1099. 55:25but there's a couple dot that's what's the implication of yes
  1100. 55:29the fact that multiple customers on the same machine
  1101. 55:38goods of the mission crashes now all of you are affected rather than just the
  1102. 55:41one
  1103. 55:44contention for resources right so you're kind of in bad luck a bad place it for
  1104. 55:49instance when the other customers on the website server is face book dot com or
  1105. 55:53something then take xiv unexpected popularity on all of a sudden
  1106. 55:56or maybe it's a web site that's really
  1107. 55:58text someone off
  1108. 56:00and is getting some kind of internet-based attacked like a denial of
  1109. 56:03service attack
  1110. 56:04because people going after that website and just because your server your web
  1111. 56:08site on the same server
  1112. 56:09now you are down or otherwise offline as well
  1113. 56:12moreover at one of the res one of the ways in which these
  1114. 56:16uh... companies offer such discounted prices this 'cause it's not just you and
  1115. 56:20to other websites as prime not ten
  1116. 56:21it could be a hundred could be a thousand other customers on the same
  1117. 56:25server
  1118. 56:26and so there must be some fine print hopefully there's some fine print
  1119. 56:29somewhere
  1120. 56:30that does say this is subject to something right they don't have infinite
  1121. 56:33tera bites on their web service infinite bandwidth there's gotta be some catch
  1122. 56:37here
  1123. 56:38otherwise the world monopoly thousands of dollars a month to host a real
  1124. 56:41large-scale websites
  1125. 56:43so you again sort of get what you pay for
  1126. 56:46and this is actually expense of years ago i signed up for some fly-by-night
  1127. 56:48operation for like two ninety five by year
  1128. 56:52um... to host my website and it was a website that i did not care much for and
  1129. 56:56that was good because it went down quite a bit um... so what they're not
  1130. 56:59guaranteeing here's unlimited uptime
  1131. 57:01for instance so there some
  1132. 57:03some doctors
  1133. 57:04but frankly if you're just starting small you just one experiment you need
  1134. 57:07it
  1135. 57:07place for testing website or
  1136. 57:09you don't you're eight ninety five is more compelling than several hundreds of
  1137. 57:13dollars or even more
  1138. 57:14um... this is certainly fights compelling
  1139. 57:18but as an aside things like emailing calendar and what not there's another
  1140. 57:21alternatives you don't need to get those thirty-year west coast when places like
  1141. 57:25google exist
  1142. 57:26but suppose you are
  1143. 57:28not so comfortable with that approach and you suppose to
  1144. 57:31that you're not comfortable also with the fact that
  1145. 57:34we used to not have any control over a dreamhost like server
  1146. 57:38because it's being shared by other people in it because it's being managed
  1147. 57:40by other people
  1148. 57:41which is to say if they are running p_h_p_ five point two which is a few
  1149. 57:45years old
  1150. 57:46so rio like you're running p_h_d_ five point even if you want to take the
  1151. 57:50advantage of new language features they were introduced in p_h_p_ five three
  1152. 57:53and more recently p_h_p_ five four
  1153. 57:55you're outta luck like you're gonna have to other funny web poster just deal with
  1154. 57:58it you can't just install it yourself typically
  1155. 58:01so similar they can you not upgrade different versions of software you can
  1156. 58:04assist early reconfigured the webserver at will
  1157. 58:07now they might give you some form of control but you'll reach a point perhaps
  1158. 58:11we're just too frustrating not to have administrative access to the server
  1159. 58:14so you can still achieve that so virtual private servers d_p_s_ is or an
  1160. 58:19alternative to shared web hosting model
  1161. 58:22and the d_p_s_ world
  1162. 58:23you get a dedicated server to yourself
  1163. 58:27lasorda
  1164. 58:28you get the allusion of the dedicated server to yourself so thanks to a
  1165. 58:31technology generically known as virtualization
  1166. 58:34these days you can park by our server with like a bunch of six user a bunch of
  1167. 58:39course lots of ram lost of disk space
  1168. 58:42and then you can run virtualization software on it uh... something known
  1169. 58:45janet generally is a hyper by sir
  1170. 58:47like vmware or parallels or virtualbox there's a whole bunch of these products
  1171. 58:52free in commercial like out there
  1172. 58:54that once you run them
  1173. 58:56and install them on the server
  1174. 58:58on top of that software you can then install multiple instances of windows
  1175. 59:02multiple instances of lyrics multiple instances if they allowed it of mac o_s_
  1176. 59:07so you can create the illusion of multiple distinct computers
  1177. 59:10each of which has its own usernames and passwords its own administrative or
  1178. 59:14so-called route account
  1179. 59:15and even though they're sharing the physical hardware
  1180. 59:18they are not sharing the same software
  1181. 59:21so what you would get as the customer is the root login or the administrator
  1182. 59:25login to your machine
  1183. 59:26now there's still the risk of resource contention
  1184. 59:29because these players to go to the quick over provision freshly if your pet
  1185. 59:32spending
  1186. 59:33in nineteen ninety five a month and not a hundred and fifty-nine ninety four
  1187. 59:36ninety five months
  1188. 59:38you're prolly gonna be on the server with fewer resources or with more
  1189. 59:41customers
  1190. 59:41but at least here you gain something
  1191. 59:44and if you've been following along
  1192. 59:46what is it fundamental you're gaining
  1193. 59:47from a d_p_s_ that you didn't get from a web host
  1194. 59:54exactly
  1195. 59:55control you can to keep things up to date you can install whatever you want
  1196. 59:59and also
  1197. 1:00:00it's all morning altar servers compromised
  1198. 1:00:03all it's our your words
  1199. 1:00:04might not p
  1200. 1:00:05whereas if the web hosting server is compromised everything on that server
  1201. 1:00:10is potentially for durable
  1202. 1:00:12so still not perfect because the reality is too
  1203. 1:00:15even though you are the only one now with through ordnance traded access
  1204. 1:00:18because it's a dedicated albeit virtual server for you
  1205. 1:00:22that she was kind of a white lie who else has access
  1206. 1:00:26the people there
  1207. 1:00:27even if they don't know your password they have physical access the machines
  1208. 1:00:32easier physical access to any machine in the world pretty much
  1209. 1:00:35you can't compromise that you can do analytics computer for instance can be
  1210. 1:00:38glued in what's called single user mode
  1211. 1:00:40by pretty much any letter x when its booting up
  1212. 1:00:43and that sort of bands any request for password at which point you can even
  1213. 1:00:46change it
  1214. 1:00:47um... even on p_c_s in computers you can usually reset certain passwords by
  1215. 1:00:50opening the case up
  1216. 1:00:52putting a little metal connector onto pins in a short circuits out the
  1217. 1:00:55password and clears it out
  1218. 1:00:57so in short physical access bat for security so you're not gaining more
  1219. 1:01:00security off fundamentally
  1220. 1:01:03you're just making it less likely that someone else's compromise will affect
  1221. 1:01:08you
  1222. 1:01:08and in some of these systems some software
  1223. 1:01:11that system administrators we'll have the password or at least access to the
  1224. 1:01:16root account on your server
  1225. 1:01:17so in short we should just assumed that this is for you
  1226. 1:01:21but probably at least one other person could physically access
  1227. 1:01:24your conscience
  1228. 1:01:26so what do you get uh... for the money
  1229. 1:01:28well here and frankly these numbers are a little more compelling 'cause it's not
  1230. 1:01:31on limited so what you're kind of inclined to believe a bit more about the
  1231. 1:01:35quality of service for getting here
  1232. 1:01:36but twenty gigabytes of storage no that's fine for typical website unless
  1233. 1:01:40your website
  1234. 1:01:41has a ridiculous amount of traffic in database traffic and logs which could
  1235. 1:01:44build up and start taking mags are bigger bites of space
  1236. 1:01:47uh... or if you're allow users to upload files are photos then you might need a
  1237. 1:01:51lot of space
  1238. 1:01:52but many websites even if they are dynamic this is probably planning
  1239. 1:01:56transfers an interesting one twenty two hundred gigabytes per month
  1240. 1:02:00for most websites that's probably fine and less your website is a photo website
  1241. 1:02:04or worse a video website
  1242. 1:02:07then you have to start to do the math and figure out exactly how much traffic
  1243. 1:02:10data will be coming in and out of your server
  1244. 1:02:12based on users patterns and moreover there's also corner cases this will
  1245. 1:02:15discuss toward the end of semester you gotta worry about the bad guys out there
  1246. 1:02:19if someone just unlike you words board or download some free piece of software
  1247. 1:02:23that bangsar bangs the heck out of your computer
  1248. 1:02:26they could just you've got your monthly allotment of bandwidth
  1249. 1:02:29just by sending bogus traffic or downloading the same video again and
  1250. 1:02:32again and again
  1251. 1:02:33so there's very interesting adversarial tax
  1252. 1:02:36when you have
  1253. 1:02:37finances somehow tied to usage so you need to be where that especially with
  1254. 1:02:42cloud computing
  1255. 1:02:43uh... and let's see you get some amount of ran five hundred twelve megabytes
  1256. 1:02:46here
  1257. 1:02:47and so forth one of the things will look at the ring the semesters we start
  1258. 1:02:49playing with apache
  1259. 1:02:51is all give you a sense of uh... how you can assess how much ran your computers
  1260. 1:02:54using image disk space it's using
  1261. 1:02:56i dare say when the most common platforms for web hosting these days
  1262. 1:03:00whether it's a vp s
  1263. 1:03:01or it's is a
  1264. 1:03:03uh... sir by post
  1265. 1:03:05izla nixon some form whether it's debbie in or for the world war ubuntu war red
  1266. 1:03:09hatter sent offer any number of versions of the next
  1267. 1:03:12will happen to use the door of the class but it's representative of many a
  1268. 1:03:16similar
  1269. 1:03:17operating systems
  1270. 1:03:18you can use mac o_s_ but it's not really use commercially to host websites just
  1271. 1:03:22'cause that's not really xoxo
  1272. 1:03:24geared toward that
  1273. 1:03:25you can use windows on but you really there's no good reason
  1274. 1:03:28there's no
  1275. 1:03:29come technically compelling reason to use a windows machine to host things
  1276. 1:03:32like p_h_p_ your python ruby
  1277. 1:03:34'cause you're paying money for windows license to run free software so it's not
  1278. 1:03:37necessarily compelling unless you are a powerful licenses and have the machines
  1279. 1:03:41uh... generally going with
  1280. 1:03:43these open-source tools is uh... quick comment compelling because none of the
  1281. 1:03:47software reviews in the course
  1282. 1:03:49uh... cost any money whatsoever and that's nonetheless quite popular and
  1283. 1:03:53robust
  1284. 1:03:55so
  1285. 1:03:56went out
  1286. 1:03:58declines so we will introduce it tonight but we will in the form of the first
  1287. 1:04:01project so that you have an experience
  1288. 1:04:03in the class that is as realistic as possible what will actually have each of
  1289. 1:04:07you do
  1290. 1:04:08is run your own webserver and run your own database server and actually run
  1291. 1:04:12your own copy of lennox itself
  1292. 1:04:14for this will use another tool that i use another possible i'm told this is
  1293. 1:04:16that the appliance and this will be a downloadable file
  1294. 1:04:20that inside of which he is in installation of land expat or lennox
  1295. 1:04:23pacific lee
  1296. 1:04:24but also installed for you in advance will be apache which is web server
  1297. 1:04:27software my sequel which is database software
  1298. 1:04:30p_h_p_ as well as support for a bunches of other languages in standard tools and
  1299. 1:04:35the like
  1300. 1:04:35and the up side of this is that rather than have you connect for instance to
  1301. 1:04:38some random harbored servers on which you only have
  1302. 1:04:41temporary access
  1303. 1:04:42this is a virtual machine that you'll have a new computer for as long as you
  1304. 1:04:45want to keep it around and it's very representative of the configuration
  1305. 1:04:48you would find added d_p_s_
  1306. 1:04:50or at a commercial web host and because you'll have a real access on its
  1307. 1:04:54and because it will be live on your machine only you'll have perfectly
  1308. 1:04:57secure access to it
  1309. 1:04:59ominous your laptop or desktop is compromised
  1310. 1:05:01and you'll be able to configure apache and p_h_p_ and really tinker with things
  1311. 1:05:05and best yet best yet
  1312. 1:05:07if you showed up
  1313. 1:05:08that's fine used on the new and you're back to sort of beginning comes along as
  1314. 1:05:12you've saved your code somewhere which will
  1315. 1:05:14encourage you a how and where to do
  1316. 1:05:16so more on that in a week or so
  1317. 1:05:19and how would you connect to this kind of thing uh...
  1318. 1:05:21so as the states
  1319. 1:05:22zen one u
  1320. 1:05:23news
  1321. 1:05:24so why not use this as a ship
  1322. 1:05:27status
  1323. 1:05:29so if you have any specific stands for secure shell
  1324. 1:05:32and this is a way sort of all school way but now much more secure
  1325. 1:05:36of connecting to a remote server and executing commands on it so this is just
  1326. 1:05:40uh... free program that comes with mac o_s_ terminal
  1327. 1:05:43and there's analogues for the windows world party has a free program for
  1328. 1:05:47windows that a lot of people like to use
  1329. 1:05:49and it allows you to open up essentially a black and white window or white and
  1330. 1:05:52black window
  1331. 1:05:53and see
  1332. 1:05:54type in a username and password
  1333. 1:05:56connect to some remote server and execute commands on it and those
  1334. 1:05:59commands can be to create files removed files configure the webserver turn the
  1335. 1:06:03database on or off for the like
  1336. 1:06:06so what they'll find once we start using the c_s_ fifty appliance a virtual
  1337. 1:06:09machine albeit running on your own computer not some server
  1338. 1:06:12is you will be able to connect to that appliance
  1339. 1:06:15as though it's a remote server looks so that you'd never even need to see the
  1340. 1:06:19appliance itself literally once you turn it on you can minimize it and pretend
  1341. 1:06:23that it's a server somewhere else on the internet
  1342. 1:06:25because once you install it the appliance
  1343. 1:06:27into a virtual machine
  1344. 1:06:28is gonna have its own i_p_ address
  1345. 1:06:30but it's going to be what type of i_p_ address
  1346. 1:06:34so it'll be private to your own laptop so no one else can you can access it but
  1347. 1:06:38you'll be able to go through precisely the same motions that you would if you
  1348. 1:06:41are actually paying some third party to host your website or you own some server
  1349. 1:06:45outs where on the internet services dates will be one of the techniques that
  1350. 1:06:48we use
  1351. 1:06:49s f three p for those unfamiliar this is a screen shot of a popular of windows
  1352. 1:06:53client for transferring files called secure effects but others exist free
  1353. 1:06:57ones in particular
  1354. 1:06:58just listed writing drop files from your computer to a server
  1355. 1:07:02but in this case the server
  1356. 1:07:03is going to be a virtual machine running on your own computer that may be
  1357. 1:07:07maybe or maybe not is minimize but again
  1358. 1:07:09experience of the precisely the same
  1359. 1:07:13sold where does that still be bouts so
  1360. 1:07:16turns out when you are writing
  1361. 1:07:19html
  1362. 1:07:20uh... you
  1363. 1:07:21at fairly static content but you do have these mechanisms and i'm guessing most
  1364. 1:07:26people in the room have some were a lot of experience with
  1365. 1:07:28it's you know and basic web sites on the life
  1366. 1:07:31but these ultimately already
  1367. 1:07:33basic input mechanisms by which we can start
  1368. 1:07:36making dynamic websites in other words
  1369. 1:07:39we have text field password fields hidden fields checkboxes radio buttons
  1370. 1:07:42drop-down menus
  1371. 1:07:43so these are the mechanisms by which we can start to get input from users
  1372. 1:07:48so that when they interact with our website they don't necessarily see the
  1373. 1:07:51same thing
  1374. 1:07:51rather they might see different things every time we visit that website so
  1375. 1:07:55let's do a little
  1376. 1:07:56example here
  1377. 1:07:58i'm gonna go ahead and
  1378. 1:07:59don't download this on your own just yet because we will be posting a newer
  1379. 1:08:03version soon but i'm gonna go ahead and open up
  1380. 1:08:07a program coldfusion
  1381. 1:08:10vmware fusion this is what's called generally again a hyper visor
  1382. 1:08:14virtualization software
  1383. 1:08:16and what i've just done is essentially run lynn x on my own that
  1384. 1:08:20and you too can do this i'm gonna actually use the lyrics desktop discuss
  1385. 1:08:23its here but i could similarly minimize it as i will just few minutes and will
  1386. 1:08:27connect to his well so now i'm running lyrics on my syndicator and notice i
  1387. 1:08:31currently have no idea dress that they should change in a few seconds once
  1388. 1:08:34identity there we go
  1389. 1:08:36so my lyrics computer virtual machine has just asks for the network give me i
  1390. 1:08:41p address and it came
  1391. 1:08:42uh... the protocol
  1392. 1:08:43the computers use to get idea dresses dynamically does anyone know
  1393. 1:08:48dac p are dynamic host configuration protocol that's what did that
  1394. 1:08:52it's also how your own personal computer works at home and gets a nike address
  1395. 1:08:55from your links this router or airport extreme so i'm gonna go ahead and to do
  1396. 1:09:01with this first let me go to mike back to my mac
  1397. 1:09:04i'm gonna open up the simplest the program's text edit which is what we
  1398. 1:09:07used earlier
  1399. 1:09:08animated just make a very simple web page on first thing i do doctype
  1400. 1:09:13html so in the course will use html five which is the sort of the latest and
  1401. 1:09:18greatest
  1402. 1:09:19version of html
  1403. 1:09:23and so i'm gonna say hello
  1404. 1:09:25now let's do this
  1405. 1:09:26let's call this
  1406. 1:09:30and then body
  1407. 1:09:33and close body
  1408. 1:09:35and then on to say cool
  1409. 1:09:38on ok gonna save this ominous go ahead and save it on my desktop as google dot
  1410. 1:09:43html
  1411. 1:09:45i'm gonna say yes uses two million of the text file
  1412. 1:09:48and now i'm going to go ahead and pull up
  1413. 1:09:49google dot html
  1414. 1:09:52so i'm not exactly google just yet i can do a little better so let's make this a
  1415. 1:09:56little different slowly going here
  1416. 1:09:59did style text align center
  1417. 1:10:04so into any of this looks completely critical new these are the kinds of
  1418. 1:10:07things that we will take for granted and of course that the stuff looks familiar
  1419. 1:10:10so let me say the relocate now looks a little more like a low but it certainly
  1420. 1:10:14lacking in some key features among them
  1421. 1:10:18i searched far right so let's go there so let me start to make a simple web
  1422. 1:10:22page that i get on thirty many of you could have done are ready cuz you know
  1423. 1:10:25html and forms and what not so
  1424. 1:10:27let's go ahead and do this it down here on an essay form
  1425. 1:10:31close by for a minute ago and fear
  1426. 1:10:34and i needed inputs
  1427. 1:10:36tight equals taxed
  1428. 1:10:38and i prolly need a summit by hand so let me did
  1429. 1:10:43input by you poor summits if this about you starts with
  1430. 1:10:48victory it as best we can saved
  1431. 1:10:50reload okay so now it's getting there
  1432. 1:10:53this isn't the prettiest things so let me go ahead and do style wear flats sade
  1433. 1:11:00two hundred pixels
  1434. 1:11:02school back here and say it it still looks a little small three hundred
  1435. 1:11:05pixels
  1436. 1:11:06uh... looks more global alike
  1437. 1:11:07and we really want to be an all here
  1438. 1:11:10we could do this
  1439. 1:11:14line lucky
  1440. 1:11:16so now we've got roughly google but in black and white
  1441. 1:11:18so unfortunately takes away more work to implement the back end of this website
  1442. 1:11:23writes a front-end pretty easy were pretty much done other than some colors
  1443. 1:11:26and some other features these days
  1444. 1:11:27but what about the back end so if i actually wanted a patch into google
  1445. 1:11:31let's see if we can now revisit that conversation we started earlier when i
  1446. 1:11:34tried to dublin dub dot google dot com is the answer
  1447. 1:11:36what really is happening let's take a look underneath the hood let's look at
  1448. 1:11:39the age to be traffic and think about what it is we're gonna start building
  1449. 1:11:42next week in terms of the actual back and so let's
  1450. 1:11:46suspend this mental thread
  1451. 1:11:48pull up the actual global dot com
  1452. 1:11:51and take a look at what's is here
  1453. 1:11:53i'm gonna go ahead first so that this is
  1454. 1:11:57new lightning think it is
  1455. 1:12:02we have the disabled this annoying instant search feature
  1456. 1:12:06select this
  1457. 1:12:08here i come
  1458. 1:12:11search settings
  1459. 1:12:14google instance disabling
  1460. 1:12:19never showed instant results so the reason i wanna do this is ready to talk
  1461. 1:12:22about javascript and ajax the technologies that nobody's on
  1462. 1:12:26annoying or beneficial instant search feature we wanted to sort of all swollen
  1463. 1:12:29she d p
  1464. 1:12:30searches right now
  1465. 1:12:31sub disabled that's so now hopefully i can save
  1466. 1:12:36okay now i'm gonna go back to build a dot com is what it is like five years
  1467. 1:12:39ago when you want a search for something on the internet
  1468. 1:12:41so now i'm going to go ahead and take for instance harper
  1469. 1:12:44so it's still doing auto complete but it's not immediately showing me the
  1470. 1:12:47search results
  1471. 1:12:48so now notice before here's the or l on that
  1472. 1:12:51dub dub dub dot google dot com
  1473. 1:12:53and now after early hit enter
  1474. 1:12:55now known as the oracle
  1475. 1:12:57so they're this is now hinting
  1476. 1:12:59at the fundamental functionality of h_t_t_p_ we had just issued one of those
  1477. 1:13:04debt requests we had two of them in fact the first one came up when i visited the
  1478. 1:13:08home page then i hit enter in it appears that another get request has been sent
  1479. 1:13:12wide because when you are all changed so generally anytime the
  1480. 1:13:16keyword get is involved
  1481. 1:13:17it's because the orals changed
  1482. 1:13:19or equivalent leave the aural changes you just to get
  1483. 1:13:21most likely
  1484. 1:13:22so there's a whole lot of distracting stuff up there but what is relevant in
  1485. 1:13:26uh... what looks familiar up there
  1486. 1:13:29in the u r ellen gray
  1487. 1:13:33i have no idea what h_l_ is
  1488. 1:13:35site so i don't know source i don't know but what looks familiar
  1489. 1:13:39okay harbor
  1490. 1:13:40so let me delete manually all the stuff that i had no idea about what it means
  1491. 1:13:44at least not yet so mummy i don't know what this is
  1492. 1:13:47q equals harvard that i did
  1493. 1:13:49okay legals harvard apple q i don't know i'm just gonna
  1494. 1:13:53presumptuous the whittle it down to that analysis answer
  1495. 1:13:56so interestingly still works
  1496. 1:13:58and what's nice is that there's much less distraction we can have the same
  1497. 1:14:01story boat with fewer distractions in detail so it looks like
  1498. 1:14:06when hitting enter on the previous page if i throw away the distractions
  1499. 1:14:10i have now been fitted snot slash but slash search
  1500. 1:14:14question mark
  1501. 1:14:15q equals harbor so what is q she was generally known as the h_t_t_p_
  1502. 1:14:19parameter so it isn't input to a web server
  1503. 1:14:22that's generally comes from a four but as we'll see a few weeks ago also
  1504. 1:14:25confirm javascript doesn't have to come from a form per se
  1505. 1:14:28harvard is obviously what i typed in so what is slash search
  1506. 1:14:31well it's not obvious here what programming language google uses before
  1507. 1:14:35on face book we would probably see search dot p_h_p_ his face book is known
  1508. 1:14:38for using p_h_p_ there also known for not hiding their file tensions which is
  1509. 1:14:42very easy to do but they just don't for some reason
  1510. 1:14:45gold does hide their file tension but a lot of google's code at least run-in has
  1511. 1:14:49written a currently in python
  1512. 1:14:51or in some other languages so
  1513. 1:14:52it's not clear what language is on the server but slash search
  1514. 1:14:56is referring to some files or some folder on the server
  1515. 1:15:00what is the question mark the no
  1516. 1:15:06the start of the parameters so anytime you have a question mark in your old
  1517. 1:15:10that the marks the path
  1518. 1:15:12and the preceding part of you are all
  1519. 1:15:13from all of the parameters and parameters are key value pairs something
  1520. 1:15:17equal something and if you have multiple parameters what separates them even
  1521. 1:15:21though i already deleted the others
  1522. 1:15:26ends the ampersand say assemble so if i had it deleted all of that
  1523. 1:15:30recall that we saw something like this just a moment though and
  1524. 1:15:34boat hwy quills harvard and i don't know what took you is but
  1525. 1:15:37that's how you would separate parameters with m percent
  1526. 1:15:40so this means we have submitted
  1527. 1:15:43uh... ke of q anna value of harvard to the server
  1528. 1:15:46so now let's use a fairly common tool built into chrome it's also built into
  1529. 1:15:50safari
  1530. 1:15:51firefox or something similar when we recommend something called fire bug on
  1531. 1:15:54the courses website
  1532. 1:15:56with which to do the same kind of thing but i'm in a good of you
  1533. 1:15:59developer
  1534. 1:16:01and developer tools and i will say these days certainly when using lamp clinics
  1535. 1:16:05apache mysql and p_h_p_ which is this courses focused
  1536. 1:16:09uh... many people are increasingly using chrome one because it's popular too
  1537. 1:16:13because it's faster because it comes with some developer tools
  1538. 1:16:16i would say firefox is also wonderfully convenient for doing development the
  1539. 1:16:20mifsud certainly task on multiple browsers as well
  1540. 1:16:23uh... require in one of the prep in the first project spec
  1541. 1:16:26on you can get windows of rather intern explores getting better about having
  1542. 1:16:29some integrated development tools from the course of perspective
  1543. 1:16:32we don't care what browser you use because you'll be using again the
  1544. 1:16:34appliance as a server
  1545. 1:16:36you can use whatever browser whatever operations from on your own computer
  1546. 1:16:39that you're most comfortable with but
  1547. 1:16:42you are coming to this with some
  1548. 1:16:45i'd say uh...
  1549. 1:16:46less familiarity uh... with various tools
  1550. 1:16:50chrome is pretty popular in firefox tend to be packing better for development
  1551. 1:16:53purposes in indonesia task on all of them
  1552. 1:16:55so one of my senior i'd just opened the developer tabs
  1553. 1:16:59and now i have elements resources network scripts timeline profiles audits
  1554. 1:17:03and consul we're not gonna use all of these but if you would never quite
  1555. 1:17:05helpful one
  1556. 1:17:07the elements have shows you the page's html
  1557. 1:17:09but it pretty princess for u and it makes of hierarchical so that with those
  1558. 1:17:12little triangles
  1559. 1:17:13you can dive in deeper n c
  1560. 1:17:15even though if we look at you source for the page
  1561. 1:17:18it is an automatically of the page afaik uh...
  1562. 1:17:23over here
  1563. 1:17:25and view page source
  1564. 1:17:26this is what came back from the server
  1565. 1:17:28and i would argue this is not very readable
  1566. 1:17:33unanimity actually still al
  1567. 1:17:35even the html not that readable color coded maybe still not useful
  1568. 1:17:39so what is this still
  1569. 1:17:40x the developer toward actually parses it for you see can start to navigate and
  1570. 1:17:45this is actually wonderfully compelling whether it's your site or someone else's
  1571. 1:17:47if it's someone else's
  1572. 1:17:49it's a wonderful way of learning how they did something or how they stylized
  1573. 1:17:52something if it's your own site so wonderful way of chasing down bugs
  1574. 1:17:55and also as you'll see changing on the fly some of the aesthetics
  1575. 1:17:59without having to change actual files and then relo
  1576. 1:18:02notary upload so we don't care so much about elements right now
  1577. 1:18:06we do care about network so let me go to the networks have and what this tableau
  1578. 1:18:10do first is
  1579. 1:18:12uh...
  1580. 1:18:13smith
  1581. 1:18:14all of the network traffic between my browser and the server
  1582. 1:18:17and will show each peacekeeping request one per line at the bomb
  1583. 1:18:20some gonna leave this window open and click reload
  1584. 1:18:23and again this is my u r l
  1585. 1:18:28that's a lot i'd only hit reload once but why in the world that so many rose
  1586. 1:18:32appear down here
  1587. 1:18:38by clicking wants
  1588. 1:18:39but look how much stuff just happened
  1589. 1:18:42each of those again represents an eighty d p requests or virtual on bola from
  1590. 1:18:46browser to server and back yet
  1591. 1:18:50what does that mean behind the scenes
  1592. 1:19:02okay good civil winnie support other things to me and concrete example of
  1593. 1:19:05something as the polar
  1594. 1:19:08so inside of the
  1595. 1:19:10htmldiff initially downloaded there could be an image tag outsource tackling
  1596. 1:19:14two tak two si es esta javascript images could be flash files
  1597. 1:19:18could be a whole bunch of other assets so to speak
  1598. 1:19:20and to get those the browser is predefined
  1599. 1:19:23to sort of a personal ego get those assets so if it sees a source tagore
  1600. 1:19:26image tag
  1601. 1:19:27it will send another virtual envelope requesting that file specifically it
  1602. 1:19:31might do it over the same network connection the same t_c_ p socket so to
  1603. 1:19:34speak
  1604. 1:19:35but each of these rose represents a different file that was downloaded
  1605. 1:19:38ironically it seems that's harvard's not behaving well win the terms of the auto
  1606. 1:19:43previews but that's good another day we can look at why
  1607. 1:19:46uh... but let's look at the first one because that's the one that will be the
  1608. 1:19:48most enlightening for now
  1609. 1:19:50and when i click on this
  1610. 1:19:52there's a few details so one
  1611. 1:19:53the preview is just what was returned
  1612. 1:19:55and here's another big mess of results from the web server but we don't care so
  1613. 1:19:59much about that
  1614. 1:20:00i care about the headers
  1615. 1:20:01so many zoom in on this
  1616. 1:20:04and rather than look at this fairly pretty printed version of it i want to
  1617. 1:20:07look at the brawl source over diving in deep sort of uh... intellectually here
  1618. 1:20:11so let me look at the source
  1619. 1:20:13now this
  1620. 1:20:14is what was literally sent
  1621. 1:20:16in that virtual envelope
  1622. 1:20:18that we started tonight's discussion with
  1623. 1:20:20so there's the top-line debt slash search question mark you week was
  1624. 1:20:24harvard stay safety p slash version number so that was in the envelope
  1625. 1:20:28and we did promise to some other stuff in there
  1626. 1:20:30second line
  1627. 1:20:31is a reminder to the server
  1628. 1:20:33as to what the user type and so what is the hostname
  1629. 1:20:36now frankly but was not sharing their servers with other companies most likely
  1630. 1:20:39so this doesn't really matter there but for shared web hosting companies the
  1631. 1:20:43fact that i'm being reminded what do u r l was means i can serve up food dot com
  1632. 1:20:48or bar dot com about us dot com so thankfully
  1633. 1:20:50it's d_p_ does that
  1634. 1:20:51there some arcane information here
  1635. 1:20:54related to passing and connections inefficiency
  1636. 1:20:57only wait my hand it back
  1637. 1:20:58for now user-agent is interesting
  1638. 1:21:00you might notice are ready but if you don't every web page of adverb visited
  1639. 1:21:05is every website you've ever visited
  1640. 1:21:07knows what computer you have and what opportune system you're running and what
  1641. 1:21:11browser you were using
  1642. 1:21:12why is that what browsers by default
  1643. 1:21:15reveal precisely that information i'd have just told global
  1644. 1:21:18behind the scenes that i have a mac
  1645. 1:21:20running mac os x are ten point seven point four and if i scrolled down
  1646. 1:21:24further or they will be able to infer that i was using chrome versions
  1647. 1:21:27something or other
  1648. 1:21:29so why in the world is that useful
  1649. 1:21:43good so hard to believe this is use full from the bugging purposes useful for
  1650. 1:21:46demographic purpose is to know who your users are
  1651. 1:21:56goods
  1652. 1:21:57so there's some features that could be dictated by what type of o_s_ or browser
  1653. 1:22:02someone's using for instance if you go to a website that lets you download
  1654. 1:22:04software
  1655. 1:22:05it's not necessary that you detect with users opportune system browser are it's
  1656. 1:22:09kind of a nicer user experience if the server only shows you the mac software
  1657. 1:22:14because you clearly have a mac as opposed to me having to figure out which
  1658. 1:22:17of the links to click for lenexa
  1659. 1:22:18windows or mac o_s_
  1660. 1:22:20uh... another argument frankly is that this is completely unnecessary and we
  1661. 1:22:23should never gotten to this habit in the first place because it for uh... it's
  1662. 1:22:26not necessarily used all that much
  1663. 1:22:29and indeed
  1664. 1:22:30writing websites that of require knowing what the user's browser is is actually
  1665. 1:22:35generally bad practice because there will be certain privacy tools
  1666. 1:22:38that users can install on the computer glitches hide this information
  1667. 1:22:41altogether
  1668. 1:22:42for better or for worse and if you're relying on certain headers to be sent
  1669. 1:22:45your own website could misbehave
  1670. 1:22:47so they work turns out there's other tricks for doing detection
  1671. 1:22:50and typically is will see in javascript it's better generally to detect
  1672. 1:22:54whether a browser has a certain feature
  1673. 1:22:56rather than is that a specific operating system for specific version of a browser
  1674. 1:23:01however databases for the billboards this
  1675. 1:23:03that allow you to figure out based on the so-called user agents strings
  1676. 1:23:08what version
  1677. 1:23:10of browser inopportune system some answers because frankly this is a little
  1678. 1:23:13hard to read so softer exist that simplifies this
  1679. 1:23:16so you can just check a boolean variable is mac ortiz pc
  1680. 1:23:19our butts below
  1681. 1:23:20so more pain details that always my hand that
  1682. 1:23:23cookies will come back to in a week or two when we have to start using them to
  1683. 1:23:26our advantage but will also talk about the security implications of them
  1684. 1:23:29but in a nutshell
  1685. 1:23:30all of these headers just text is what was inside of
  1686. 1:23:34that virtual on book and the most important one arguably was the very
  1687. 1:23:37first one 'cause that tells people what to return
  1688. 1:23:39but now we see that it's not just last
  1689. 1:23:41it's a full path
  1690. 1:23:43so google has hopefully parks that string
  1691. 1:23:46so-to-speak slash search question mark cubicles harbor
  1692. 1:23:49and then you
  1693. 1:23:50lustig you equals harvard as import
  1694. 1:23:52to its database or what not
  1695. 1:23:53to return customized results to me
  1696. 1:23:56now if you scroll down let's see how google reply
  1697. 1:23:59so this is just a chrome thing
  1698. 1:24:01it is just kind of dumb down display of the query string printers justice useful
  1699. 1:24:05specially for developer you can see it more easily this way
  1700. 1:24:08but let me go ahead and use source now for response headers
  1701. 1:24:11this is what the server responded with
  1702. 1:24:13so turns out
  1703. 1:24:15many of you have seen numbers return by servers who has ever seen message four
  1704. 1:24:19oh four comeback
  1705. 1:24:21it was for foreman
  1706. 1:24:24file not found right so it's a nation's bee status code it's an arbiter number
  1707. 1:24:28the world decided on years ago that means files not found what are some
  1708. 1:24:31others you might have seen
  1709. 1:24:33sizes
  1710. 1:24:36five oh one so internal server error of some sort
  1711. 1:24:39five oh three audience another internal error
  1712. 1:24:42or resource are forbidden
  1713. 1:24:44there's four oh three rather which is forbidden
  1714. 1:24:47uh...
  1715. 1:24:51three oh one and three oh two are redirects which are actually quite
  1716. 1:24:54useful will start using those in the next lecturer to such aren't there some
  1717. 1:24:57codes that you've probably seen for four th may be the most popular
  1718. 1:25:00two hundred you might not have ever seen because the best one of all
  1719. 1:25:03two hundred is literally ok in these everything worked out well see just
  1720. 1:25:07don't see it
  1721. 1:25:08because it indicates success as those little green icon that we
  1722. 1:25:11uh... saw a moment ago before i expanded this so this is the servers response two
  1723. 1:25:16hundred means found what you're looking for here it is
  1724. 1:25:18now what else comes down
  1725. 1:25:20we have the date from the server which might be useful
  1726. 1:25:23uh... expires in past controls so directives to the browser saying do or
  1727. 1:25:27don't pass this even though these are not necessarily reliable talk about this
  1728. 1:25:31when we get the p_h_p_
  1729. 1:25:32uh... this is interesting set cookie
  1730. 1:25:34set cookie is amazingly powerful if not a little unsettling especially northern
  1731. 1:25:38advertising in tracking but we'll talk about that in the context of p_h_p_
  1732. 1:25:42notice that the servers telling us that it supports jeez it which is like uh...
  1733. 1:25:46compression utility
  1734. 1:25:47which is a compression utility in this just means a you can compress your date
  1735. 1:25:51of june from me
  1736. 1:25:52uh...
  1737. 1:25:53the name of the server g_w_ s probably good google web services
  1738. 1:25:57and then some headers that they use for some the security things will talk about
  1739. 1:26:01later in the semester so that's what school was returned
  1740. 1:26:03in addition to
  1741. 1:26:05the content that has come back from the server
  1742. 1:26:07so let's see this outside the scope of a browser on the boat open
  1743. 1:26:11uh... a program called terminal
  1744. 1:26:13the switches comes with mac o_s_ for those of you with windows padi as
  1745. 1:26:16another option will look at that
  1746. 1:26:18uh... or encourage that info my music supply
  1747. 1:26:22uh... bull book at that
  1748. 1:26:24or recommend that for future projects an interim program call telnet telnet is
  1749. 1:26:28like associates put uninfected now that's a bit of an oversimplification
  1750. 1:26:31i'm gonna go ahead and tell that to google dot com
  1751. 1:26:34and nothing actually happens but he did figure out the was likely address so
  1752. 1:26:38that's interesting
  1753. 1:26:39but tell that by the fall uses port twenty uh...
  1754. 1:26:43has been so long
  1755. 1:26:45twenty-one
  1756. 1:26:46tom is a sport twenty want to see people are twenty-one bikes there's no tone
  1757. 1:26:50that server their tone it used to be to send messages and connected email
  1758. 1:26:53servers in the like
  1759. 1:26:54but what if i instead say eighty
  1760. 1:26:56so there's no colin in this program there is in a browser
  1761. 1:26:59but this is going to connect from my laptop to google dot com on ccp port
  1762. 1:27:02eighty
  1763. 1:27:04so this is interesting
  1764. 1:27:05now i've connected to their server
  1765. 1:27:07wine are how do i know that
  1766. 1:27:09stony connected to tell doubly dot dot dot l dot google dot com
  1767. 1:27:13where did this all come from
  1768. 1:27:14the days of the n_ s_ trickery tally for load balancing purposes they had
  1769. 1:27:17multiple server so they're fraud gotten one of them specifically
  1770. 1:27:20but i'm gonna pretend to be a browser unless they get me slash
  1771. 1:27:24using issue d_p_ version one point one
  1772. 1:27:26and the answer
  1773. 1:27:27and then if that's the last of my headers i have to hit entered twice
  1774. 1:27:31and wala
  1775. 1:27:32what do i see
  1776. 1:27:33well the fonts kind of big in the html javascript kind of mina five but that's
  1777. 1:27:37exactly what my browser got back but if i keep going up and open up and up
  1778. 1:27:41notice i can say
  1779. 1:27:43exactly what the servers response was
  1780. 1:27:45so i see my age to be headers they came back from the server
  1781. 1:27:48uh... set cookie and all those same lines exactly what i saw on the browser
  1782. 1:27:52so i just pretended really
  1783. 1:27:53to be a browser and we can do this with any websites
  1784. 1:27:56and it's more than just a curiosity can actually help with the bugging great
  1785. 1:28:00actually seeing what's coming back from a server
  1786. 1:28:02i can do dot dot dot dot harvard dot e_d_u_ eighty
  1787. 1:28:06death slap
  1788. 1:28:07slashes vp one point uh... one
  1789. 1:28:10answer answer
  1790. 1:28:11so interesting bad request
  1791. 1:28:14now why is that said we see some html is this the webserver assumes that a
  1792. 1:28:18browser will typically be doing this
  1793. 1:28:20why might this be a bad requests
  1794. 1:28:26i'm actually in a guest here let's try this gets slash is tepee one point one
  1795. 1:28:31post
  1796. 1:28:32prioritize u
  1797. 1:28:34so it didn't like the fact that i did not say
  1798. 1:28:37the host hatter
  1799. 1:28:38which means harvard's web servers probably using something called virtual
  1800. 1:28:42hosting which is that feature i alluded to earlier when a website
  1801. 1:28:46can support molt when webserver can support local websites
  1802. 1:28:50bought for that to work browsers have to cooperate and the fact that i did not
  1803. 1:28:54send that had her meant that the server didn't know who's hoping to return
  1804. 1:28:57so we gave me that
  1805. 1:28:58four hundred response of i don't know what to do
  1806. 1:29:01now let's try one other thing on the cancelled s
  1807. 1:29:04and let me do
  1808. 1:29:05telnet sue not dubbed the dubbed a harbored idea let's try this one to see
  1809. 1:29:09what happens
  1810. 1:29:10so get slash h_d_t_v_ one point one answer answer
  1811. 1:29:14they didn't like that so let's fix this again
  1812. 1:29:16so gets slash uh... issue the p one point one
  1813. 1:29:21post harbor dot you do you answer answer
  1814. 1:29:25interested
  1815. 1:29:25this is not the home page where i get this time
  1816. 1:29:30some message about
  1817. 1:29:31it's moved
  1818. 1:29:32harbor but you do has moved permanently you know that's and if i scroll up
  1819. 1:29:36more esoteric lian headers is one of different status code three oh one which
  1820. 1:29:40you mentioned earlier three oh one these permanent redirect
  1821. 1:29:43if a browser receives a three oh one
  1822. 1:29:46it should never asked that question again
  1823. 1:29:48it should just remember harbor dot e_d_u_ moved
  1824. 1:29:50any move to wear
  1825. 1:29:52to the value of the location field which should also be included in the response
  1826. 1:29:55centers
  1827. 1:29:56how did that happen
  1828. 1:29:58well some system administrator gene at harvard just decided arbitrarily
  1829. 1:30:01that's but reasonably
  1830. 1:30:03that we don't want to standardize on harbor dot e_d_u_ ann arbor authors in
  1831. 1:30:06people's browsers we want them automatically to be redirected to dub
  1832. 1:30:09dub dub dot harvard dot the id a dot harvard dot e_d_u_ white
  1833. 1:30:13one printing minutes one
  1834. 1:30:16it's perfectly reasonable
  1835. 1:30:17to more technologically it can be better for
  1836. 1:30:20securities a bit of an overstatement but for technical reasons having the w_w_w_
  1837. 1:30:24means your cookies can be isolated to w_w_w_ dot harvard dot e_d_u_
  1838. 1:30:29whereas if your cookies were instead sent to harvard that you do you that
  1839. 1:30:33means your cookies could be read really bite any websites so including c asp dot
  1840. 1:30:37harvard dot e_d_u_ or xd summer dot harvard dot you do you so they sing
  1841. 1:30:41doubly david w
  1842. 1:30:42you're also forcing uh... released by default cookies to be more precisely
  1843. 1:30:46define so there's some technical reasons as well
  1844. 1:30:48only a year or two ago was this problem fixed on the recent a few years back
  1845. 1:30:52someone on a new came to harbor tour on the news office and one of her first
  1846. 1:30:55things
  1847. 1:30:56i one of her first acts was to fix
  1848. 1:30:58eucharistic omission for years recovered that you do you did not exist
  1849. 1:31:02devito v_w_ dot harvard dot e_d_u_ existed and they weren't even
  1850. 1:31:05redirecting south that is a bug that's now been
  1851. 1:31:09uh...
  1852. 1:31:11and questions then
  1853. 1:31:12uh... what just happened
  1854. 1:31:14and one of the terminal window open the meat offer up some other troubleshooting
  1855. 1:31:17tips
  1856. 1:31:17anissa lookup nameserver lookup is a wonderful way
  1857. 1:31:21of doing those d_m_s_ lookups we talked about before what i've just done is
  1858. 1:31:25asked the nearest city in a server which happens to be this
  1859. 1:31:28because that's how harvard's configured the campus that's the deanna server
  1860. 1:31:31and i've asked what's the idea dress of harvard i do u and it's given me the
  1861. 1:31:35psyche address
  1862. 1:31:36so far we get curious that we do that's uh... they should be peak on five slash
  1863. 1:31:41i can address
  1864. 1:31:42interesting
  1865. 1:31:44whatever why this is not working will again be hosting like the website is not
  1866. 1:31:47configured to understand mikey addresses by default
  1867. 1:31:50however let's try another one and it's lookup cnn.com
  1868. 1:31:54what c_n_n_ dot com
  1869. 1:31:57interesting
  1870. 1:31:58so it turns out we denounce you can also do what's called round robin you can
  1871. 1:32:01return multiple mikey addresses
  1872. 1:32:03for web server and those can rotate literally in the order in which their
  1873. 1:32:06return
  1874. 1:32:07to do but balance
  1875. 1:32:08and we'll discuss that topping again for the end of the semester and scale
  1876. 1:32:11ability but let me just one of these
  1877. 1:32:12and c_n_n_ either pretty day on guessing they don't really share with some other
  1878. 1:32:16websites so let's just go to their i_p_ address
  1879. 1:32:19and indeed
  1880. 1:32:20there's works
  1881. 1:32:21now notice my you are all hasn't changed
  1882. 1:32:23so now if i really want to get sort of phone
  1883. 1:32:26uh...
  1884. 1:32:28i really want to get sort of
  1885. 1:32:31uh... creative i'm gonna do this on my mac and you can do this on a windows
  1886. 1:32:35machine is well there's typically file on macs in my next computers is called
  1887. 1:32:39at sea coasts which is a text file bitmaps that hard cuts
  1888. 1:32:43ita dresses
  1889. 1:32:44four
  1890. 1:32:45domain names
  1891. 1:32:46this is useful generally for internal corporate used for development purposes
  1892. 1:32:50so will be able to do this with projects as well
  1893. 1:32:53uh... i'm gonna go ahead and uh... sent the case here
  1894. 1:32:57just a text file and noticed this is some basic ones that come with the
  1895. 1:33:01system this is my t_v_ six version six address written in a
  1896. 1:33:04uh... crazy form
  1897. 1:33:05i'm gonna go ahead and paste in not that u r l
  1898. 1:33:08but the i_q_ dress of c_n_n_ and i'm gonna say this is
  1899. 1:33:13david news dot com
  1900. 1:33:15so this is like manually overriding
  1901. 1:33:17the mapping bataya ki address to something else here only for my own
  1902. 1:33:21computer i'm not running again a server
  1903. 1:33:23it's just that my
  1904. 1:33:24opportune system ako s in windows is supposed to look at a file like this
  1905. 1:33:27before asking india nasser
  1906. 1:33:30so now let's see
  1907. 1:33:31if this works doesn't work with all websites but let me go to
  1908. 1:33:35h_t_t_p_ colon slash slash
  1909. 1:33:37david news dot com
  1910. 1:33:45kamon
  1911. 1:33:47areas
  1912. 1:33:48i'd just made my own
  1913. 1:33:49or new site
  1914. 1:33:51frankly this is kind of stupid of them um...
  1915. 1:33:53they go i was just joking with some friends the other day that you could
  1916. 1:33:55kind of have fun with this and make
  1917. 1:33:57fairly offensive domain names of the only to c_n_n_ somehow uh... and why is
  1918. 1:34:01this
  1919. 1:34:01so this is trivial defects frankly in a web server i a web server could be
  1920. 1:34:05configured as you will be able to do with features of the past you before
  1921. 1:34:08long
  1922. 1:34:09of checking
  1923. 1:34:10upon receipt of one of those virtual envelopes what was in the to field
  1924. 1:34:14if the to field does not match something that were happy with
  1925. 1:34:17redirect the user how you respond with what sascha
  1926. 1:34:22three oh one
  1927. 1:34:23somebody's actually trivial to fix this kind of things that could still be they
  1928. 1:34:27can't stop david news dot com from needing to c_n_n_ dot com
  1929. 1:34:30but they can stop the browser from staying there or the spy encouraging it
  1930. 1:34:34without three oh one to redirect elsewhere
  1931. 1:34:36and this redirection is super com and not just for harbor dot you do you
  1932. 1:34:39but even the courses own website if i go to issue p
  1933. 1:34:43colon slash slash two seventy five dotnet and hit enter
  1934. 1:34:47notice what the oral changes too
  1935. 1:34:51a few things happen there
  1936. 1:34:52so this is the courses website what are some of the things that got answered in
  1937. 1:34:55automatically it seems
  1938. 1:35:01deaf indeed so idea then just go to the dub dub dub version i also went to the
  1939. 1:35:06secure person why
  1940. 1:35:07we've just gone into the habit and i personally guns out of using us as offer
  1941. 1:35:10everything it's relatively cheap to do it's relatively trivial to turn on
  1942. 1:35:14and it's only getting cheaper it's accuser getting faster and
  1943. 1:35:17some of you might be familiar with about a year-and-a-half ago uh... toolkit
  1944. 1:35:21caught fire shape was released
  1945. 1:35:23which was a wonderfully free proof of concept of something called the a
  1946. 1:35:26session hijacking attack something we'll talk about in a few weeks time in the
  1947. 1:35:29context of security
  1948. 1:35:31long story short if you are visiting the website that uses h_t_t_p_ colon slash
  1949. 1:35:35slash
  1950. 1:35:36it is fairly trivial
  1951. 1:35:38for someone in your nearby wireless vicinity whether in this room at
  1952. 1:35:41starbucks even in your own home if you have adversarial for gaza blends are
  1953. 1:35:46roomates
  1954. 1:35:47to can't login to your facebook account or your google account or i cannot go
  1955. 1:35:51facebook account twitter account or any websites that's not using h_t_t_p_ ass
  1956. 1:35:56and that is because
  1957. 1:35:57if you're not using a g_p_s_
  1958. 1:35:59nothing's infected known
  1959. 1:36:00probably knew that but among the things that are infected or things called
  1960. 1:36:03cookies so if you are just broadcasting cookies
  1961. 1:36:07and cookies it turns out is hosting a weaker to hard the mechanism by which
  1962. 1:36:10users are remembered as being logged into websites if you're just sending
  1963. 1:36:15that cookie tool website again and again to remind unlike n on login on login
  1964. 1:36:20that sign creek did anyone in starbucks can sniff that cookie
  1965. 1:36:23and with the right technical savvy as you will soon have senate has their own
  1966. 1:36:27another log into whatever you work
  1967. 1:36:29doesn't mean they know your password
  1968. 1:36:31but it doesn't mean they can hijack your current sessions so to speak
  1969. 1:36:35so a protracted google because global about a year or two ago thanks to some
  1970. 1:36:39of the issues in china they had with crack hacking and whatnot
  1971. 1:36:42they transition all their services to a steep yes at least if you opt into at
  1972. 1:36:45face book also find the offers this
  1973. 1:36:47but again we come back to this uh... you a few more weeks of insecurity in your
  1974. 1:36:50lives if you don't mind
  1975. 1:36:52but will come back to this and talk about how you can have certain defenses
  1976. 1:36:55up
  1977. 1:36:55and i tragically
  1978. 1:36:57even websites that redirect
  1979. 1:37:00strong law
  1980. 1:37:01the uninfected version to the infected version might still be vulnerable
  1981. 1:37:05because many of those websites will first do a redirect
  1982. 1:37:08that sends your cooking in the clear and then it realizes all of this to be
  1983. 1:37:12secure
  1984. 1:37:13by then it's too late so even though banking websites almost always uses
  1985. 1:37:16there have been certain banks to be known
  1986. 1:37:18to be not to technically
  1987. 1:37:19uh... savvy
  1988. 1:37:21who are still leaking cookies
  1989. 1:37:22on four uh... reasons that will soon reveal so i said the duh duh duh based
  1990. 1:37:27ups and then this stupid main page which is a media with the thing which is the
  1991. 1:37:30tool we use for the courses website it's free with the software
  1992. 1:37:33and that's not really intellectually interesting just their own software
  1993. 1:37:38contact any questions on a cd p
  1994. 1:37:41will delete david news dot com
  1995. 1:37:44and again that wouldn't work with all websites in fact harvard's probably
  1996. 1:37:46would not work for us
  1997. 1:37:50so which is the party's hdv headers still become in invaluable resource when
  1998. 1:37:54it comes time to chase down blogs are features in your own code
  1999. 1:37:57let me take another quick look at something within krone's
  2000. 1:38:00uh... developer toolbar in more than one last thing with regard to google and see
  2001. 1:38:05if we can implement a little more of our own version of the world
  2002. 1:38:08so let me go to
  2003. 1:38:09the elements tab
  2004. 1:38:11and just as a proof of concept here goes what's adds a little complex underneath
  2005. 1:38:15the hood
  2006. 1:38:16but let me go ahead and right-click on harvard university and they choose
  2007. 1:38:19inspect elements
  2008. 1:38:22and inspect element is nice because it's going to jump me right too
  2009. 1:38:25the part of the html
  2010. 1:38:27that relates to that portion of the page which is wonderful useful for diving in
  2011. 1:38:31deeper to specific place
  2012. 1:38:32so that is the a_h_ wrath that got me at harvard university link
  2013. 1:38:36now suppose i'm actually google's designer
  2014. 1:38:39and we're not quite happy with the shade of blue where the font size or font face
  2015. 1:38:42it so i want to take over the website
  2016. 1:38:44but frankly i don't have to log into the server and change font size and save the
  2017. 1:38:47file dinh reload the browser
  2018. 1:38:49and go thro the suit
  2019. 1:38:51kinda like to do it
  2020. 1:38:52uh...
  2021. 1:38:53in line in the browser albeit at without saving any changes
  2022. 1:38:56so notice you're on the right if you've not used from before
  2023. 1:39:00that gordon developer tool bar
  2024. 1:39:02notice on the right you have a summary
  2025. 1:39:04of all of the styles that relate to that specific elements in the web page
  2026. 1:39:09so from top to bottom here's the cv uh... there's the ciency assessed
  2027. 1:39:14cascading top-to-bottom
  2028. 1:39:15here all of the rules that apply to that all so
  2029. 1:39:19there's apparently somewhere and google cssc apparently the file called search
  2030. 1:39:23online sex
  2031. 1:39:25and a link uh... dot w class mention in all of this where they're specifying the
  2032. 1:39:29color of the link in the cursor that should be used over it
  2033. 1:39:32so let me just right for text legally here
  2034. 1:39:35let me just change this to
  2035. 1:39:37let's say something we the
  2036. 1:39:40random like or just
  2037. 1:39:41so that is what i've done a their change who was elected or of course non
  2038. 1:39:45permanently and only for the links in the page for which that csrs rule
  2039. 1:39:48applies but the point here is that this is just a wonderfully quick and dirty
  2040. 1:39:51way of experimenting especially if you're quite evil
  2041. 1:39:54and you want to get let the pics alignment perfect in something
  2042. 1:39:57being able to just tweaked it ever so slightly here and then figure out the
  2043. 1:40:01values are and then write down in the actual file on the server
  2044. 1:40:05just wonderfully useful
  2045. 1:40:06also too if you're trying to figure out what font website uses
  2046. 1:40:10i mean fighting the computed stop as this can be a little overwhelming like
  2047. 1:40:13my god there's so many rules that apply to this element because of the cascading
  2048. 1:40:16nature of c_s_ s
  2049. 1:40:18let me just look at the computed styles which is a summary of the end result of
  2050. 1:40:22all of these styles that have been applied
  2051. 1:40:24enough i look for font-family
  2052. 1:40:27indeed this is
  2053. 1:40:29uh... appliances aerial followed by sensor so i know what font now google
  2054. 1:40:35said just the debugging trick if you've not used it
  2055. 1:40:37this and the networks have one abusing
  2056. 1:40:39quite a bit
  2057. 1:40:40most likely
  2058. 1:40:41so now back to our own version of google unfortunately if i typed and harbored
  2059. 1:40:46at google search
  2060. 1:40:48doesn't go anywhere sort of the kind of did where did it end up
  2061. 1:40:52urals almost the same it's a crazy looking you are opposite is obviously a
  2062. 1:40:56file on my hard drive not on the internet but what the change in the oro
  2063. 1:40:59yeah
  2064. 1:41:02good so the question mark unattended
  2065. 1:41:04but nope rameters got sent
  2066. 1:41:07so let me go ahead and take a look at my file o
  2067. 1:41:11well no predators were sent to them and give any of the main so let me go back
  2068. 1:41:14and fix this restrict the fought so we can see more once
  2069. 1:41:17and the need to input name equal skew here
  2070. 1:41:21and let me go back over here and reload the page
  2071. 1:41:25and now we go ahead and take harbor and now clickable search
  2072. 1:41:29so now we have some progress
  2073. 1:41:30so this is interesting
  2074. 1:41:32now unfortunately google dot html is not a website
  2075. 1:41:35nor is that dynamic it's literally just a static files you can send any
  2076. 1:41:38parameters you want
  2077. 1:41:39it's just you know inorg everytime
  2078. 1:41:41but what is byproducts each year
  2079. 1:41:43i'm kind of in a hurry to implement my own search engine uh... you know i read
  2080. 1:41:46uh... knocked off my own new sites
  2081. 1:41:49now would you mind search engine
  2082. 1:41:50well i can actually do this form
  2083. 1:41:53action should actually go to let's say dot dot dot dot google dot com slash
  2084. 1:41:58search
  2085. 1:41:59and i'm gonna say math the equals and get in all our case here
  2086. 1:42:04slight inconsistency
  2087. 1:42:06with what we've seen before
  2088. 1:42:07now let me go back to this page
  2089. 1:42:11reload
  2090. 1:42:12and now mimetype harbored and watch the oral as i could answer
  2091. 1:42:16uh... now i have implemented my own version of gul but how
  2092. 1:42:20right all i did was i constructed a form
  2093. 1:42:22on a specified a method of deaths inaction that happens to be a point b
  2094. 1:42:26elsewhere
  2095. 1:42:27but because of its dpm because a browser knows how to handle foreign it compiled
  2096. 1:42:31all of the
  2097. 1:42:32key value pairs in this case just want you equal something put it in the oral
  2098. 1:42:36consented
  2099. 1:42:37to that action
  2100. 1:42:38attribute sent it to that particular u r l
  2101. 1:42:40so now we have implemented
  2102. 1:42:43our own version approval now of course
  2103. 1:42:45denies that they were our search results and they were completely cutting corners
  2104. 1:42:48here
  2105. 1:42:49but that's where we'll need something like p_h_p_ to do things
  2106. 1:42:52server-side
  2107. 1:42:54let me pause for just a moment peter do want to say hello to class peters one of
  2108. 1:42:57our for teaching fellows the others are at work right now
  2109. 1:43:00do on a lot too
  2110. 1:43:01actual hole up i have to come near you with a microphone value what you want to
  2111. 1:43:05come this way so the cameras
  2112. 1:43:06little more really available
  2113. 1:43:08uh... although i a look forward to working with all of you and i will see
  2114. 1:43:12you on wednesday
  2115. 1:43:14much
  2116. 1:43:15any questions that about the wolf
  2117. 1:43:17faqs
  2118. 1:43:18pgp
  2119. 1:43:26precaution that's it
  2120. 1:43:27had it not been named kit would this be broken so let me go back into here and
  2121. 1:43:31let's just call a query thinking that's a reasonable name to give a parameter to
  2122. 1:43:35mini reload mates gml me take that harvard answer
  2123. 1:43:39and interesting they support we're so
  2124. 1:43:42let me misspellings
  2125. 1:43:44and that's probably not supported but maybe let's say
  2126. 1:43:48family reload type harvard center
  2127. 1:43:51okay that doesn't work
  2128. 1:43:52so there's a bar cleary r_k_o_ for whatever backwards compatibility agrees
  2129. 1:43:57other questions
  2130. 1:44:08yes and on the entirety apartments campus your sessions can be hijacked
  2131. 1:44:13so if you have malicious roommates or are you aria this thurs four technical
  2132. 1:44:18people around you you are vulnerable to this issue hijacking can happen anywhere
  2133. 1:44:22worker can is not use whether between you and the access points
  2134. 1:44:25the wireless access point we're between you and the endpoints uh... webserver
  2135. 1:44:29and i should say especially those of you are from out of town realize that harbor
  2136. 1:44:32does that fine print in rules about not doing this to other people otherwise
  2137. 1:44:35they'd
  2138. 1:44:36that you can solve this problem by expelling people that's one way if you
  2139. 1:44:39can't do technologically
  2140. 1:44:41so this is one of these things were returned educators how it can be done
  2141. 1:44:44but don't go trying this in the dorms on campus
  2142. 1:44:46which he go home on your own home network
  2143. 1:44:49other questions
  2144. 1:44:52so where does this leave so we started by talking about global and we keep
  2145. 1:44:55talking about who will be discussed so popular but it above the story applies
  2146. 1:44:58to really any website out there
  2147. 1:45:00so
  2148. 1:45:01we talked about the in az and the process of not only booking up a web
  2149. 1:45:05page is your rayl rather mikey address but also getting your own ita dress and
  2150. 1:45:09getting your own web server in your own domain name
  2151. 1:45:12we talked a little bit about html forms which would which you might be tonight
  2152. 1:45:16are ready to the tools with which you can get a little more comfortable with
  2153. 1:45:20diagnosing things in debugging things and we've written so that you know
  2154. 1:45:23that's a that's a form
  2155. 1:45:24all that we haven't done yet is actually implement the dynamic website for that
  2156. 1:45:28we've completely outsourced to c_n_n_ and global today
  2157. 1:45:31one of the first things we will do this coming wednesday is diving deeper to
  2158. 1:45:34p_h_p_ and things like depts imposed concessions and shopping carts
  2159. 1:45:38awesome the security implications around them will dive in cbc is fifty appliance
  2160. 1:45:42in this virtual machine environment with which you get to
  2161. 1:45:45uh... play you in terms of apache in p_h_p_ and mysql
  2162. 1:45:48so tonight will turn abid early all stick around with peter for anyone with
  2163. 1:45:52questions you might happen otherwise we will see you again on wednesday and
  2164. 1:45:56after wednesday's lecture will flow
  2165. 1:45:58right intersection office hours if you have questions about
  2166. 1:46:01contents even though the first project will be released for a week or so
  2167. 1:46:04sienna couple days

About this transcript

This page contains the full transcript of CS75 (Summer 2012) Lecture 0 HTTP Harvard Web Development David Malan by archn, generated from the public captions YouTube serves with the video. The transcript has 19,987 words across 2,167 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to choose a caption track available on the video.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, caption language selection, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.