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 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