Web 200: Anatomy of a Request

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

Transcript

1. Web 200:
   Anatomy of a Request
   @johndbritton
   

   View Slide

2. How does this...
   

   View Slide

3. [enter]
   

   View Slide

4. ...become this...
   

   View Slide

5. ...on the internet?
   

   View Slide

6. Internet, how does it work?
   

   View Slide

7. • Driving a car
   
   • Shipping containers
   It’s all about abstraction
   

   View Slide

8. Major players
   • HTTP
   
   • URI
   
   • Browser
   
   • Web server
   
   • DNS
   
   • Operating system
   
   • Interface
   
   • Network
   
   • Router
   
   !
   !
   • ... among others
   

   View Slide

9. OSI Model
   • 7 Layers
   
   • We won’t cover
   everything
   
   • Really boring
   
   • Required if you want
   some bogus certificates
   
   • Actually a useful concept
   

   View Slide

10. HTTP
    The language browsers speak
    

    View Slide

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
    

    View Slide

12. URI
    • http://github.com/johndbritton
    
    • http - protocol
    
    • github.com - domain
    
    • /johndbritton - resource
    

    View Slide

13. Request
    GET /johndbritton
    

    View Slide

14. Response
    
    
    ...
    

    View Slide

15. More Requests
    GET /style.css
    
    GET /jquery.js
    
    GET /image.jpg
    
    GET /image2.jpg
    
    ...
    
    

    View Slide

16. More Responses
    (you get the idea)
    

    View Slide

17. Rendering
    • HTML - Structure
    
    • CSS - Style
    
    • Javascript - Behavior
    

    View Slide

18. Telnet, Inspector, JSFiddle
    Let’s try them out
    

    View Slide

19. Browser - ONLY HTTP
    Doesn’t care about anything else
    

    View Slide

20. HTTP: methods / verbs
    • GET
    
    • POST
    
    • PUT
    
    • DELETE
    
    • more: HEAD, PATCH, TRACE, OPTIONS,
    CONNECT
    

    View Slide

21. HTTP: responses
    • 1xx - informational
    
    • 2xx - success
    
    • 3xx - redirect
    
    • 4xx - error
    
    • 5xx - server error
    

    View Slide

22. The webserver
    It speaks HTTP too
    

    View Slide

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
    

    View Slide

24. DNS: name resolution
    Where do requests go?
    

    View Slide

25. github.com
    207.97.227.239
    

    View Slide

26. Lookups are cached
    for improved performance
    

    View Slide

27. Possible cache hits
    • Local machine
    
    • Home router
    
    • ISP
    
    • Upstream provider
    

    View Slide

28. No cache - worst case
    • 13 Root nameservers
    
    • TLD nameserver
    
    • Authoritative nameserver
    
    • A record
    
    • IP address
    

    View Slide

29. dig github.com
    ; <<>> DiG 9.8.3-P1 <<>> github.com
    
    ...
    
    github.com.
    
    2
    IN
    A
    207.97.227.239
    

    View Slide

30. Making a connection
    • Resolve name
    
    • Open a connection
    
    • Speak HTTP
    

    View Slide

31. Network
    collection of nodes that can communicate directly
    

    View Slide

32. Interface
    connection from node to communication medium
    

    View Slide

33. IP address
    0.0.0.0 - 255.255.255.255
    

    View Slide

34. Why 255?
    • 0 - 255
    
    • binary, 8 bits
    
    • 00000000 - 11111111
    
    • 00000000.00000000.00000000.00000000
    
    • 11111111.11111111.11111111.11111111
    

    View Slide

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
    

    View Slide

36. Special addresses
    • 192.268.1.0/24 - network with subnet
    
    • 192.168.1.0 - network address
    
    • 192.168.1.255 - broadcast address
    

    View Slide

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
    

    View Slide

38. Network hardware
    • Hub - Dumb
    
    • Switch - Smarter
    
    • Router - Smartest
    

    View Slide

39. Network protocols
    • Transport - chunks of
    data
    
    • TCP
    
    • UDP
    • Routing -
    
    • RIP
    
    • OSPF
    

    View Slide

40. Transport
    • OS segments data, packages it up into
    packets
    
    • TCP
    
    • Reliable - resend on transmission failure
    
    • UDP
    
    • Unreliable - send once
    

    View Slide

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)
    

    View Slide

42. whatismyipaddress.com
    166.137.88.161
    github.com
    207.97.227.239
    

    View Slide

43. NAT
    Network address translation
    

    View Slide

44. ifconfig
    192.168.1.101
    whatismyipaddress.com
    166.137.88.161
    github.com
    207.97.227.239
    

    View Slide

45. traceroute, nmap,
    wireshark
    if we have time
    

    View Slide