URL to HTML

URL to HTML a minute in the life of a
webpage François Marier @fmarier mozilla

mozilla newmarket

8 engineers

8 engineers 1 designer

8 engineers 1 designer 1 manager

video & media marketplace cloud services crash investigation

video & media firefox ux cloud services crash investigation

video & media firefox ux security & privacy crash investigation

video & media firefox ux security & privacy layout

> 1,000 employees world-wide

1. Learn HTML 2. ? 3. Profit !

abstractions

asbtraction construct used to understand a complicated topic at a
high level

asbtraction extra layer added to avoid writing the same code
over and over

drawSquare()

drawLine()

drawSquare()

if you don't understand the layers below, you won't know
what to do when the abstraction breaks

mastery requires a high-level understanding of the rest of the
stack

web performance

web performance how bytes make it to the user

web performance how bytes make it to the user how
the browser renders the page

URL DNS IP TCP HTTP / TLS HTML

URL uniform ressource locator

http://www.example.com

http://www.example.com /articles/

http://www.example.com /articles/tutorial.cgi

http://www.example.com /articles/tutorial.cgi ?showsolutions=0&topic=web

http://www.example.com /articles/tutorial.cgi ?showsolutions=0&topic=web #part5

http://www.example.com:80 /articles/tutorial.cgi ?showsolutions=0&topic=web #part5

http://username:password@ www.example.com:80 /articles/tutorial.cgi ?showsolutions=0&topic=web #part5

DNS domain name system

$ cat /etc/resolv.conf nameserver 208.67.222.222 nameserver 208.67.220.220

www.cs.auckland.ac.nz

www.cs.auckland.ac.nz 130.216.158.22

$ dig nz NS @199.7.83.42

$ dig nz NS @199.7.83.42 ; <<>> DiG 9.8.1-P1 <<>>
nz NS @199.7.83.42 ;; global options: +cmd ;; Got answer: ;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 412 ;; flags: qr rd; QUERY: 1, ANSWER: 0, AUTHORITY: 7, ADD ;; WARNING: recursion requested but not available ;; QUESTION SECTION: ;nz. IN NS ;; AUTHORITY SECTION: nz. 172800 IN NS ns1.dns.net.nz. nz. 172800 IN NS ns2.dns.net.nz. nz. 172800 IN NS ns3.dns.net.nz. nz. 172800 IN NS ns4.dns.net.nz. nz. 172800 IN NS ns5.dns.net.nz. nz. 172800 IN NS ns6.dns.net.nz. nz. 172800 IN NS ns7.dns.net.nz.

$ dig ac.nz NS @ns1.dns.net.nz

$ dig ac.nz NS @ns1.dns.net.nz ; <<>> DiG 9.8.1-P1 <<>>
ac.nz NS @ns1.dns.net.nz ;; global options: +cmd ;; Got answer: ;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 391 ;; flags: qr aa rd; QUERY: 1, ANSWER: 7, AUTHORITY: 0, ;; WARNING: recursion requested but not available ;; QUESTION SECTION: ;ac.nz. IN NS ;; ANSWER SECTION: ac.nz. 86400IN NS ns7.dns.net.nz. ac.nz. 86400IN NS ns4.dns.net.nz. ac.nz. 86400IN NS ns2.dns.net.nz. ac.nz. 86400IN NS ns1.dns.net.nz. ac.nz. 86400IN NS ns6.dns.net.nz. ac.nz. 86400IN NS ns3.dns.net.nz. ac.nz. 86400IN NS ns5.dns.net.nz.

$ dig auckland.ac.nz NS @ns1.dns.net.nz

$ dig auckland.ac.nz NS @ns1.dns.net.nz ; <<>> DiG 9.8.1-P1 <<>>
auckland.ac.nz NS @ns1.dns.net ;; global options: +cmd ;; Got answer: ;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 598 ;; flags: qr rd; QUERY: 1, ANSWER: 0, AUTHORITY: 3, ADD ;; WARNING: recursion requested but not available ;; QUESTION SECTION: ;auckland.ac.nz. IN NS ;; AUTHORITY SECTION: auckland.ac.nz. 86400IN NS pubsec.domainz.net.nz. auckland.ac.nz. 86400IN NS dns1.auckland.ac.nz. auckland.ac.nz. 86400IN NS dns2.auckland.ac.nz. ;; ADDITIONAL SECTION: dns1.auckland.ac.nz.86400IN A 130.216.1.2 dns2.auckland.ac.nz.86400IN A 130.216.1.1

$ dig cs.auckland.ac.nz NS @dns1.auckland.ac.nz

$ dig cs.auckland.ac.nz NS @dns1.auckland.ac.nz ; <<>> DiG 9.8.1-P1 <<>>
cs.auckland.ac.nz NS @dns1.auc ;; global options: +cmd ;; Got answer: ;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 485 ;; flags: qr aa rd; QUERY: 1, ANSWER: 4, AUTHORITY: 0, ;; WARNING: recursion requested but not available ;; QUESTION SECTION: ;cs.auckland.ac.nz. IN NS ;; ANSWER SECTION: cs.auckland.ac.nz. 10800 IN NS dns2.auckland.ac.nz. cs.auckland.ac.nz. 10800 IN NS kronos2.cs.auckland.ac.n cs.auckland.ac.nz. 10800 IN NS dns1.auckland.ac.nz. cs.auckland.ac.nz. 10800 IN NS kronos1.cs.auckland.ac.n ;; ADDITIONAL SECTION: dns1.auckland.ac.nz.1800 IN A 130.216.1.2

$ dig www.cs.auckland.ac.nz @kronos1.cs.auckland.ac.nz

$ dig www.cs.auckland.ac.nz @kronos1.cs.auckland.ac.nz ; <<>> DiG 9.8.1-P1 <<>> www.cs.auckland.ac.nz
A @krono ;; global options: +cmd ;; Got answer: ;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 175 ;; flags: qr aa rd; QUERY: 1, ANSWER: 1, AUTHORITY: 4, ;; WARNING: recursion requested but not available ;; QUESTION SECTION: ;www.cs.auckland.ac.nz. IN A ;; ANSWER SECTION: www.cs.auckland.ac.nz. 10800 IN A 130.216.158.22 ;; AUTHORITY SECTION: cs.auckland.ac.nz. 10800IN NS kronos2.cs.auckland.ac.nz cs.auckland.ac.nz. 10800IN NS dns2.auckland.ac.nz. cs.auckland.ac.nz. 10800IN NS dns1.auckland.ac.nz. cs.auckland.ac.nz. 10800IN NS kronos1.cs.auckland.ac.nz

l.root-servers.net ns1.dns.net.nz ns1.dns.net.nz dns1.auckland.ac.nz kronos1.cs.auckland.ac.nz

IP internet protocol

www.bbc.co.uk 212.58.246.94

$ mtr 212.58.246.94 1. 192.168.1.1 2. llu.bng1.tvc.orcon.net.nz 3. xe-3-3-0.cre1.sky.orcon.net.nz 4.
121.98.9.137 5. ae1-0.cre2.nct.odyssey.net.nz 6. ORCON-INTER.bar1.SanFrancisco1.Level3.net 7. xe-5-0-0.bar1.SanFrancisco1.Level3.net 8. ae-0-11.bar2.SanFrancisco1.Level3.net 9. ae-6-6.ebr2.SanJose1.Level3.net 10. ae-62-62.csw1.SanJose1.Level3.net 11. ae-61-61.ebr1.SanJose1.Level3.net 12. ae-2-2.ebr2.NewYork1.Level3.net 13. ae-62-62.csw1.NewYork1.Level3.net 14. ae-61-61.ebr1.NewYork1.Level3.net 15. ae-43-43.ebr2.London1.Level3.net 16. ae-57-222.csw2.London1.Level3.net 17. ae-229-3605.edge4.London1.Level3.net 18. BBC-TECHNOL.edge4.London1.Level3.net 19. ??? 20. ??? 21. ae0.er01.cwwtf.bbc.co.uk 22. 132.185.255.165 23. bbc-vip015.cwwtf.bbc.co.uk

130.216.158.22 212.58.246.94

130.216.158.22 212.58.246.94 router drops packets packets arrive in wrong order

130.216.158.22 212.58.246.94 router drops packets cable is cut packets arrive
in wrong order

ideal network actual network

TCP transmission control protocol

guarantees in-order delivery of packets

abstraction of a reliable point-to-point connection with built-in re-try logic

applications have a lot less errors to deal with

UDP user datagram protocol

TCP UDP

reminder: abstractions are leaky

3-way handshake establishing a new connection

client server

client SYN x=42 server

client SYN x=42 SYN+ACK y=10,x=43 server

client SYN x=42 SYN+ACK y=10,x=43 ACK y=11 server

HTTP hypertext transfer protocol

http://www.example.com

clear text protocol

client request server

client request response server

Host: www.example.com User-Agent: Mozilla/5.0 (rv:29.0) Firefox/29.0 DNT: 1

Host: www.example.com User-Agent: Mozilla/5.0 (rv:29.0) Firefox/29.0 DNT: 1 <request body
goes in here>

Content-Type: text/html Date: Thu, 22 May 2014 05:34:47 GMT Last-Modified:
Fri, 09 Aug 2013 23:54:35 GMT Content-Length: 1270 <!doctype html> <html> <head> <title>Example Domain</title> </head> <body> <div> <h1>Example Domain</h1> <p>This domain is established to be used for domain in examples without prior coordination </div> </body> </html>

200 OK

404 Not Found

$ curl http://www.example.com <!doctype html> <html> <head> <title>Example Domain</title> </head>
<body> <div> <h1>Example Domain</h1> <p>This domain is established to be used for domain in examples without prior coordinatio </div> </body> </html>

$ curl --head http://www.example.com HTTP/1.1 200 OK Accept-Ranges: bytes Cache-Control:
max-age=604800 Content-Type: text/html Date: Thu, 22 May 2014 05:42:26 GMT Etag: "359670651" Expires: Thu, 29 May 2014 05:42:26 GMT Last-Modified: Fri, 09 Aug 2013 23:54:35 GMT Server: ECS (cpm/F858) X-Cache: HIT x-ec-custom-error: 1 Content-Length: 1270

verbs (fancy word for commands)

GET /article/43228

GET /article/43228 GET /article/43228

GET /article/43228 POST /article/delete/last

GET /article/43228 POST /article/delete/last POST /article/delete/last

GET /article/43228 POST /item/20/buy POST /item/20/buy $$$ $$$

TLS transport layer security

SSL secure sockets layer

HTTPS hypertext transfer protocol secure

secure (sometimes)

client server (pk, sk)

client hello! server (pk, sk)

client hello! hello! pubkey server (pk, sk)

client hello! hello! pubkey server (pk, sk) session key

client hello! hello! pubkey i'm done! encrypt pk (session key)
server (pk, sk) session key

client hello! hello! pubkey i'm done! encrypt pk (session key)
server (pk, sk) session key session key

man-in-the-middle

client server (pk, sk)

client server (pk, sk) NSA (pk, sk)

client hello! server (pk, sk) NSA (pk, sk)

client hello! server (pk, sk) NSA (pk, sk) hello!

client hello! hello! pubkey server (pk, sk) NSA (pk, sk)
hello!

client hello! hello! pubkey server (pk, sk) NSA (pk, sk)
hello! hello! pubkey

client hello! hello! pubkey server (pk, sk) key NSA (pk,
sk) hello! hello! pubkey

client hello! hello! pubkey i'm done! encrypt(key) server (pk, sk)
key NSA (pk, sk) hello! hello! pubkey

key NSA (pk, sk) hello! hello! pubkey key

key NSA (pk, sk) hello! hello! pubkey i'm done! encrypt(key) key

key NSA (pk, sk) hello! hello! pubkey i'm done! encrypt(key) key key

authentication (of the server)

client hello! hello! pubkey server (pk, sk) session key

client hello! hello! signed pubkey server (pk, sk) session key
verify signature

client hello! hello! signed pubkey server (pk, sk) session key
verify signature i'm done! encrypt pk (session key) session key

client hello! hello! signed pubkey server (pk, sk) NSA (pk,
sk) hello! hello! signed pubkey key

client hello! hello! signed pubkey server (pk, sk) NSA (pk,
sk) hello! hello! signed pubkey key abort!

how can you tell you're talking to the right person?
(and not to the NSA)

trusted third-party certificate authority

EFF has found more than 650 certificate authorities in the
wild

*.google.com

*.google.com 7 different domains

$1,000 $100

$1,000 $1,000 $100

HTML hypertext markup language

parsing

.png .jpg .js .css

resolve all hostnames establish TCP connections negotiate TLS session URL
DNS IP TCP HTTP / TLS HTML

@fmarier [email protected] questions?

wanna know more? https://github.com/alex/what-happens-when/blob/master/README.rst USB protocol ARP resolution browser networking
stack rendering engine HTML parsing CSS interpretation

Copyright © 2015 Francois Marier <[email protected]> This work is licensed
under a Creative Commons Attribution-ShareAlike 4.0 International License. leaky pipe: https://www.flickr.com/photos/ifl/3920636654 leaky pipe with elephant: https://www.flickr.com/photos/rcrhee/10785374875 sky tower: https://www.flickr.com/photos/elisfanclub/6120863439 golden gate: https://www.flickr.com/photos/jeffgunn/6663212147 san jose: https://www.flickr.com/photos/the_tahoe_guy/3183673224 statue of liberty: https://www.flickr.com/photos/suewaters/7574642942 big ben: https://www.flickr.com/photos/timmorris/3103896345 bbc house: https://www.flickr.com/photos/redvers/532073098 fingers crossed: https://www.flickr.com/photos/bearpark/6861722073 prince charles : http://en.wikipedia.org/wiki/File:Prince_Charles_2012.jpg southern cross cable: https://en.wikipedia.org/wiki/File:Southern_Cross_Cable_route.svg image credits

URL to HTML

URL to HTML

More Decks by Francois Marier

Other Decks in Programming

Featured

Transcript