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

Web 200: Anatomy of a Request

Efc09baeb94ed440b185710062c8956d?s=47 John Britton
December 09, 2012
Technology
0
97

Web 200: Anatomy of a Request

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

Efc09baeb94ed440b185710062c8956d?s=128

John Britton

December 09, 2012
Tweet

More Decks by John Britton

See All by John Britton
Efc09baeb94ed440b185710062c8956d?s=48 johndbritton
5
1.5k
Efc09baeb94ed440b185710062c8956d?s=48 johndbritton
2
500
Efc09baeb94ed440b185710062c8956d?s=48 johndbritton
33
7.4k
Efc09baeb94ed440b185710062c8956d?s=48 johndbritton
4
320
Efc09baeb94ed440b185710062c8956d?s=48 johndbritton
2
190

Other Decks in Technology

See All in Technology
F831177123a4ddda9aa1802721f0a0db?s=48 ozontech
0
1.7k
A64ac825509279a770c13c6fc517f11a?s=48 kawaguti
PRO
0
200
79dcb04101764d7bf66f898dd446838e?s=48 tsukubachallenge
0
120
48a913a2e3bb5e68aae6f73079648e84?s=48 jnchito
2
190
B3d3a2cce932eca144b8c13a63966404?s=48 alblue
2
440
154d77627bc95f4eb226c722023b5168?s=48 a1a
2
360
9cc3d9dc67c048c3820f26f30168076e?s=48 jsaseminar
0
120
58ed7368f1de80df0b380087b19a4ac1?s=48 sugarcrm
PRO
0
140
A41b463f033e1304539253f8a663c950?s=48 moriyuya
37
16k
012418ca05dff2e4ac6bdf3e739be4e8?s=48 minorun365
0
530
93c80c388fe9d8f9df7d030549a0ff0b?s=48 chaspy
0
150
7a29c02251394fc05ebd88c631c562dc?s=48 takufujii
0
130

Featured

See All Featured
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
85
8.3k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
196
18k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
262
37k
39488f9d172ab92fd352f2cd7b73258d?s=48 mza
82
4.5k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
196
16k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
364
63k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
499
110k
Dad095ea7038f89f760419ce475d5d14?s=48 michaelherold
228
9.1k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
505
37k
Ba530e786553390f3fb271848485681c?s=48 3n
170
23k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
6
830

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