Web 200: Anatomy of a Request

Slide 1

Slide 1 text

Web 200: Anatomy of a Request @johndbritton

Slide 2

Slide 2 text

How does this...

Slide 3

Slide 3 text

[enter]

Slide 4

Slide 4 text

...become this...

Slide 5

Slide 5 text

...on the internet?

Slide 6

Slide 6 text

Internet, how does it work?

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

OSI Model • 7 Layers • We won’t cover everything • Really boring • Required if you want some bogus certiﬁcates • Actually a useful concept

Slide 10

Slide 10 text

HTTP The language browsers speak

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Request GET /johndbritton

Slide 14

Slide 14 text

Response ...

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

More Responses (you get the idea)

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Telnet, Inspector, JSFiddle Let’s try them out

Slide 19

Slide 19 text

Browser - ONLY HTTP Doesn’t care about anything else

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

The webserver It speaks HTTP too

Slide 23

Slide 23 text

Two types of webapp • Static • Receive a request • Find a ﬁle on disk • Respond with contents of the ﬁle • Dynamic • Receive a request • Run application logic • Return a dynamically generated response

Slide 24

Slide 24 text

DNS: name resolution Where do requests go?

Slide 25

Slide 25 text

github.com 207.97.227.239

Slide 26

Slide 26 text

Lookups are cached for improved performance

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Network collection of nodes that can communicate directly

Slide 32

Slide 32 text

Interface connection from node to communication medium

Slide 33

Slide 33 text

IP address 0.0.0.0 - 255.255.255.255

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Network settings • Auto-conﬁgured 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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Routing • Routers connect networks, handle packets and don’t care what’s inside • RIP • Distance vector (hop count) • OSPF • Open shortest path ﬁrst (link weight)

Slide 42

Slide 42 text

whatismyipaddress.com 166.137.88.161 github.com 207.97.227.239

Slide 43

Slide 43 text

NAT Network address translation

Slide 44

Slide 44 text

ifconﬁg 192.168.1.101 whatismyipaddress.com 166.137.88.161 github.com 207.97.227.239

Slide 45

Slide 45 text

traceroute, nmap, wireshark if we have time