Web 200: Anatomy of a Request

What happens when you press "Go" in your browser?

Transcript

1. Web 200:
   Anatomy of a Request @johndbritton
2. How does this...
3. [enter]
4. ...become this...
5. ...on the internet?
6. Internet, how does it work?
7. • Driving a car • Shipping containers It’s all about abstraction
8. Major players • HTTP • URI • Browser • Web server • DNS • Operating system • Interface • Network • Router ! ! • ... among others
9. OSI Model • 7 Layers • We won’t cover everything • Really boring • Required if you want some bogus certificates • Actually a useful concept
10. HTTP The language browsers speak
11. Client server model • Web page is a document • User inputs http://example.com • The client (browser) makes a GET request • The server sends a response • The browser renders the page
12. URI • http://github.com/johndbritton • http - protocol • github.com - domain • /johndbritton - resource
13. Request GET /johndbritton
14. Response <!DOCTYPE html> ...
15. More Requests GET /style.css GET /jquery.js GET /image.jpg GET /image2.jpg ...
16. More Responses (you get the idea)
17. Rendering • HTML - Structure • CSS - Style • Javascript - Behavior
18. Telnet, Inspector, JSFiddle Let’s try them out
19. Browser - ONLY HTTP Doesn’t care about anything else
20. HTTP: methods / verbs • GET • POST • PUT • DELETE • more: HEAD, PATCH, TRACE, OPTIONS, CONNECT
21. HTTP: responses • 1xx - informational • 2xx - success • 3xx - redirect • 4xx - error • 5xx - server error
22. The webserver It speaks HTTP too
23. Two types of webapp • Static • Receive a request • Find a file on disk • Respond with contents of the file • Dynamic • Receive a request • Run application logic • Return a dynamically generated response
24. DNS: name resolution Where do requests go?
25. github.com 207.97.227.239
26. Lookups are cached for improved performance
27. Possible cache hits • Local machine • Home router • ISP • Upstream provider
28. No cache - worst case • 13 Root nameservers • TLD nameserver • Authoritative nameserver • A record • IP address
29. dig github.com ; <<>> DiG 9.8.3-P1 <<>> github.com ... github.com. 2 IN A 207.97.227.239
30. Making a connection • Resolve name • Open a connection • Speak HTTP
31. Network collection of nodes that can communicate directly
32. Interface connection from node to communication medium
33. IP address 0.0.0.0 - 255.255.255.255
34. Why 255? • 0 - 255 • binary, 8 bits • 00000000 - 11111111 • 00000000.00000000.00000000.00000000 • 11111111.11111111.11111111.11111111
35. Network addresses • a.b.c.d/n (n = network mask / subnet) • Private (non routable) networks • 10.0.0.0/8 • 172.16.0.0/12 • 192.168.0.0/16
36. Special addresses • 192.268.1.0/24 - network with subnet • 192.168.1.0 - network address • 192.168.1.255 - broadcast address
37. Network settings • Auto-configured via DHCP • IP: 192.168.1.101 • Subnet Mask: 255.255.255.0 (/24) • Router: 192.168.1.1 • DNS Servers: 192.168.1.1
38. Network hardware • Hub - Dumb • Switch - Smarter • Router - Smartest
39. Network protocols • Transport - chunks of data • TCP • UDP • Routing - • RIP • OSPF
40. Transport • OS segments data, packages it up into packets • TCP • Reliable - resend on transmission failure • UDP • Unreliable - send once
41. Routing • Routers connect networks, handle packets and don’t care what’s inside • RIP • Distance vector (hop count) • OSPF • Open shortest path first (link weight)
42. whatismyipaddress.com 166.137.88.161 github.com 207.97.227.239
43. NAT Network address translation
44. ifconfig 192.168.1.101 whatismyipaddress.com 166.137.88.161 github.com 207.97.227.239
45. traceroute, nmap, wireshark if we have time