Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web 200: Anatomy of a Request

Web 200: Anatomy of a Request

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

Efc09baeb94ed440b185710062c8956d?s=128

John Britton

December 09, 2012
Tweet

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