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

Web 200: Anatomy of a Request

John Britton
December 09, 2012

Web 200: Anatomy of a Request

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

John Britton

December 09, 2012
Tweet

More Decks by John Britton

Other Decks in Technology

Transcript

  1. Web 200:
    Anatomy of a Request
    @johndbritton

    View full-size slide

  2. How does this...

    View full-size slide

  3. ...become this...

    View full-size slide

  4. ...on the internet?

    View full-size slide

  5. Internet, how does it work?

    View full-size slide

  6. • Driving a car

    • Shipping containers
    It’s all about abstraction

    View full-size slide

  7. Major players
    • HTTP

    • URI

    • Browser

    • Web server

    • DNS

    • Operating system

    • Interface

    • Network

    • Router

    !
    !
    • ... among others

    View full-size slide

  8. OSI Model
    • 7 Layers

    • We won’t cover
    everything

    • Really boring

    • Required if you want
    some bogus certificates

    • Actually a useful concept

    View full-size slide

  9. HTTP
    The language browsers speak

    View full-size slide

  10. 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 full-size slide

  11. URI
    • http://github.com/johndbritton

    • http - protocol

    • github.com - domain

    • /johndbritton - resource

    View full-size slide

  12. Request
    GET /johndbritton

    View full-size slide

  13. Response


    ...

    View full-size slide

  14. More Requests
    GET /style.css

    GET /jquery.js

    GET /image.jpg

    GET /image2.jpg

    ...

    View full-size slide

  15. More Responses
    (you get the idea)

    View full-size slide

  16. Rendering
    • HTML - Structure

    • CSS - Style

    • Javascript - Behavior

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. HTTP: methods / verbs
    • GET

    • POST

    • PUT

    • DELETE

    • more: HEAD, PATCH, TRACE, OPTIONS,
    CONNECT

    View full-size slide

  20. HTTP: responses
    • 1xx - informational

    • 2xx - success

    • 3xx - redirect

    • 4xx - error

    • 5xx - server error

    View full-size slide

  21. The webserver
    It speaks HTTP too

    View full-size slide

  22. 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 full-size slide

  23. DNS: name resolution
    Where do requests go?

    View full-size slide

  24. github.com
    207.97.227.239

    View full-size slide

  25. Lookups are cached
    for improved performance

    View full-size slide

  26. Possible cache hits
    • Local machine

    • Home router

    • ISP

    • Upstream provider

    View full-size slide

  27. No cache - worst case
    • 13 Root nameservers

    • TLD nameserver

    • Authoritative nameserver

    • A record

    • IP address

    View full-size slide

  28. dig github.com
    ; <<>> DiG 9.8.3-P1 <<>> github.com

    ...

    github.com.

    2
    IN
    A
    207.97.227.239

    View full-size slide

  29. Making a connection
    • Resolve name

    • Open a connection

    • Speak HTTP

    View full-size slide

  30. Network
    collection of nodes that can communicate directly

    View full-size slide

  31. Interface
    connection from node to communication medium

    View full-size slide

  32. IP address
    0.0.0.0 - 255.255.255.255

    View full-size slide

  33. Why 255?
    • 0 - 255

    • binary, 8 bits

    • 00000000 - 11111111

    • 00000000.00000000.00000000.00000000

    • 11111111.11111111.11111111.11111111

    View full-size slide

  34. 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 full-size slide

  35. Special addresses
    • 192.268.1.0/24 - network with subnet

    • 192.168.1.0 - network address

    • 192.168.1.255 - broadcast address

    View full-size slide

  36. 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 full-size slide

  37. Network hardware
    • Hub - Dumb

    • Switch - Smarter

    • Router - Smartest

    View full-size slide

  38. Network protocols
    • Transport - chunks of
    data

    • TCP

    • UDP
    • Routing -

    • RIP

    • OSPF

    View full-size slide

  39. Transport
    • OS segments data, packages it up into
    packets

    • TCP

    • Reliable - resend on transmission failure

    • UDP

    • Unreliable - send once

    View full-size slide

  40. 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 full-size slide

  41. whatismyipaddress.com
    166.137.88.161
    github.com
    207.97.227.239

    View full-size slide

  42. NAT
    Network address translation

    View full-size slide

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

    View full-size slide

  44. traceroute, nmap,
    wireshark
    if we have time

    View full-size slide