Palestra sobre tudo que quem trabalha com web deve saber sobre uma requisição web.

1. Desconstruindo a web
Willian Molinari (a.k.a PotHix)

2. Aviso

3. Willian Molinari
a.k.a PotHix

6. Plaev
.github.io

7. Porque dessa talk?

10. https://www.youtube.com/watch?v=nG1oGfrDiUc

11. https://www.youtube.com/watch?v=nG1oGfrDiUc

12. Essa talk se baseia em

13. Internet

14. Internet

15. The dawn of the net

16. Internet

18. http://pothix.com
http://pothix.com

19. http://pothix.com
http://pothix.com

20. http://pothix.com
É uma URL?
http://pothix.com

21. “O que significa PotHix”
“O que significa PotHix”

22. http://pothix.com
É uma URL!
http://pothix.com

23. http://pothix.com
http://pothix.com
Tem HSTS?
Strict-Transport-Security

24. http://pothix.com
Tem cache?
Expires Cache-Control
http://pothix.com

25. Protocolo: http://
Domínio: pothix.com
Path: /
Tem cache de
DNS?

26. Chrome
Faz cache de DNS

27. http://aosabook.org/en/posa/high-performance-networking-in-chrome.html

28. getaddrinfo()

29. sistema
operacional

30. glibc
I’m watching you!
n
u

31. glibc -> /etc/hosts
nss/nss_files/files-hosts.c

32. glibc -> getaddrinfo()
sysdeps/posix/getaddrinfo.c
2321 getaddrinfo (const char *name, const char *service,
2322 const struct addrinfo *hints, struct addrinfo **pai)
2323 {

33. getaddrinfo()
Tem nscd para
cache de DNS?

34. Internet
- glibc
POSIX

35. Aplicação
Apresentação
Sessão
Transporte
Rede
Enlace
Físico
Modelo
OSI

36. Aplicação
Apresentação
Sessão
Transporte
Rede
Enlace
Físico
Modelo
OSI

37. S
R
L
Y
?

38. Aplicação
Transporte
Rede
Enlace
Físico
Sessão
Apresentação

39. Aplicação
Transporte
Rede
Enlace
Físico

40. Aplicação
Transporte
Rede
Enlace
Físico
SO
user

41. TCP / UDP
DNSAplicação
Transporte
Rede
Enlace
Físico
IP
Ethernet / Wi-Fi
010101001011

42. DNS
TCP / UDP
Aplicação
Transporte
Rede
Enlace
Físico
IP
Ethernet / Wi-Fi
010101001011

43. código disponível em: chromium/src/net/dns

44. getaddrinfo()
__socket() & __connect()
sysdeps/posix/getaddrinfo.c
2515 fd = __socket (af, SOCK_DGRAM, IPPROTO_IP);
[...]
2526 [...] && __connect (fd, q->ai_addr, q->ai_addrlen) == 0

45. terminal
$ sudo strace -f -e bind,socket,fork,connect -p $(ps aux | grep chromium | grep
-v nacl | awk '{ print $2}' | xargs echo | sed 's/ /,/g')
[...]
[pid 8739] socket(PF_INET6, SOCK_DGRAM, IPPROTO_IP) = 134
[pid 8739] connect(134, {sa_family=AF_INET6, sin6_port=htons(53), inet_pton
(AF_INET6, "2001:4860:4860::8888", &sin6_addr), sin6_flowinfo=0,
sin6_scope_id=0}, 28) = -1 ENETUNREACH (Network is unreachable)
[pid 9010] socket(PF_INET, SOCK_DGRAM, IPPROTO_IP) = 134
[pid 9010] connect(134, {sa_family=AF_INET, sin_port=htons(0),
sin_addr=inet_addr("192.30.252.154")}, 16) = 0
[pid 8739] socket(PF_INET, SOCK_STREAM, IPPROTO_TCP) = 134
[pid 8739] connect(134, {sa_family=AF_INET, sin_port=htons(80),
sin_addr=inet_addr("192.30.252.154")}, 16) = -1 EINPROGRESS (Operation now in
progress)
[...]
Syscalls in action! (*stripped)

46. terminal
$ sudo strace -f -e bind,socket,fork,connect -p $(ps aux | grep chromium | grep
-v nacl | awk '{ print $2}' | xargs echo | sed 's/ /,/g')
[...]
[pid 8739] socket(PF_INET6, SOCK_DGRAM, IPPROTO_IP) = 134
[pid 8739] connect(134, {sa_family=AF_INET6, sin6_port=htons(53), inet_pton
(AF_INET6, "2001:4860:4860::8888", &sin6_addr), sin6_flowinfo=0,
sin6_scope_id=0}, 28) = -1 ENETUNREACH (Network is unreachable)
[pid 9010] socket(PF_INET, SOCK_DGRAM, IPPROTO_IP) = 134
[pid 9010] connect(134, {sa_family=AF_INET, sin_port=htons(0),
sin_addr=inet_addr("192.30.252.154")}, 16) = 0
[pid 8739] socket(PF_INET, SOCK_STREAM, IPPROTO_TCP) = 134
[pid 8739] connect(134, {sa_family=AF_INET, sin_port=htons(80),
sin_addr=inet_addr("192.30.252.154")}, 16) = -1 EINPROGRESS (Operation now in
progress)
[...]
Syscalls in action! (*stripped)
UDP para ipv6
nope :(
UDP
ipv4
request

47. Happy eyebals (rfc6555): https://www.ietf.org/mail-
archive/web/v6ops/current/msg22455.html

48. AAAA
A
Browser
sitev6
sitev4
de acordo com a rfc6555

49. AAAA
A
Browser
sitev6
sitev4
de acordo com a rfc6555

50. AAAA
A
Browser
sitev6
sitev4RST
de acordo com a rfc6555

51. DNSAplicação
Transporte
Rede
Enlace
Físico
TCP / UDP
IP
Ethernet / Wi-Fi
010101001011

52. UDP/IP
linux/blob/master/net/ipv4/udp.c

53. UDP

54. Conteúdo

55. Endereço (IP)

57. ?

58. DNSAplicação
Transporte
Rede
Enlace
Físico
TCP / UDP
IP
Ethernet / Wi-Fi
010101001011

59. DNSAplicação
Transporte
Rede
Enlace
Físico
TCP / UDP
IP
Mágica, bro!

60. A visual explanation of how dns lookups work

61. Via dnstracer: `dnstracer -s . -4 -o pothix.com`
A.ROOT-SERVERS.NET [.] (198.41.0.4)
a.gtld-servers.net [com] (192.5.6.30)
ns1.dreamhost.com [pothix.com]
(66.33.206.206) Got authoritative answer
ns1.dreamhost.com (66.33.206.206)
pothix.com -> 192.30.252.153
ns1.dreamhost.com (66.33.206.206)
pothix.com -> 192.30.252.154

62. Internet
glibc
DNS
TCP/IP
UDP/IP
POSIX

63. Internet
glibc
DNS
TCP/IP
UDP/IP
POSIX
HTTP

64. HTTP/HTTPS
TCP / UDP
IP
Ethernet / Wi-Fi
010101001011
Aplicação
Transporte
Rede
Enlace
Físico

65. HTTP/HTTPS
TCP / UDP
IP
Ethernet / Wi-Fi
010101001011
Aplicação
Transporte
Rede
Enlace
Físico

66. TCP
linux/blob/master/net/ipv4/tcp.c

67. https://en.wikipedia.org/wiki/Transmission_Control_Protocol

68. ACK
SYN + ACK
ACK
Three way handshake

69. LISTENINGSYN
LISTENSYNSENT

70. SYN+ACK
LISTEN
SYN
RECEIVED
SYNSENT

71. SYN
RECEIVED
SYNSENTESTABLISHED
ACK

72. ESTABLISHEDSYNSENTESTABLISHED
É NÓIS! É NÓIS!

74. HTTP/HTTPS
TCP / UDP
IP
Ethernet / Wi-Fi
010101001011
Aplicação
Transporte
Rede
Enlace
Físico

75. HTTPS

76. TLS = fork(SSLv3)
SSLv3 is no longer supported in chrome

77. HTTP/HTTPS
TCP / UDP
IP
Ethernet / Wi-Fi
010101001011
Aplicação
Transporte
Rede
Enlace
Físico
TLS

78. TLS

79. conexão estabelecida
client hello
(CIPHERS, URL)
Os primeiros milisegundos de uma conexão HTTPS

80. https://cc.dcsec.uni-hannover.de/

81. conexão estabelecida
Server hello
(certificado, CIPHER)
TLS_RSA_WITH_RC4_128_MD5
public
key
crypt hash

82. conexão estabelecida
Data válida?
CA confiável?
Assinatura válida?
URL esperada?

83. conexão estabelecida

84. conexão estabelecida
Gerei uma parada aqui
(pre_master secret)
!^*@#$&!@(#$&!@#)$^$^
TLS_RSA_WITH_RC4_128_MD5

85. conexão estabelecida
!!@U#$N!Y*@#$*
master secret
TLS_RSA_WITH_RC4_128_MD5

86. conexão estabelecida
É NÓIS!
TLS_RSA_WITH_RC4_128_MD5
criptografia
dos dados
verificação contra
conteúdo “batizado”
É NÓIS!

87. TLSHTTP HTTP
Internet
headers
url
cookies
headers
url
cookies

88. HTTP/HTTP2
chromium - net/http & net/spdy

89. Rafael Rinaldi
Dissecando o protocolo HTTP/2

90. HTTP 1x via telnet
$ telnet pothix.com 80
Trying 192.30.252.153...
Connected to pothix.com.
Escape character is '^]'.
GET /index.html HTTP/1.1
Host: pothix.com
HTTP/1.1 200 OK
Server: GitHub.com
...
terminal

91. HTTP/HTTPS
TCP / UDP
IP
Ethernet / Wi-Fi
010101001011
Aplicação
Transporte
Rede
Enlace
Físico

92. Aplicação
Transporte
Rede
Enlace
Físico

93. HTTP/HTTPS
TCP / UDP
IP
Ethernet / Wi-Fi
010101001011
Aplicação
Transporte
Rede
Enlace
Físico

94. papers/Vipin_Analysis_of_open_source_WLAN_driver_paper.pdf
➔ net/ipv4/tcp.c
➔ include/net/cfg80211.h
➔ net/wireless/nl80211.c
➔ include/net/mac80211.h
➔ drivers/net/wireless/iwlwifi/

95. Internetglibc
DNS
TCP/IP
UDP/IP
HTTP
POSIX

96. a/b/g/n/ac

97. a/b/g/n/ac

98. Carrier
Sense
Multiple
Access
Collision
Avoidance

99. G

100. GB
G

101. glibc
DNS
TCP/IP
UDP/IP
HTTP
POSIX
Internet

102. # traceroute -T pothix.com
traceroute to pothix.com (192.30.252.153), 30 hops max, 60 byte packets
1 palantir (192.168.1.1) 8.718 ms 8.769 ms 8.868 ms
2 10.18.128.1 (10.18.128.1) 25.058 ms 25.673 ms 27.189 ms
3 c8bd5001.virtua.com.br (200.189.80.1) 29.071 ms 29.073 ms 29.068 ms
4 embratel-T0-7-2-0-tacc01.spoph.embratel.net.br (200.178.127.57) 32.917 ms
embratel-T0-4-1-0-uacc03.spomb.embratel.net.br (189.42.182.37) 31.734 ms
embratel-T0-1-0-2-uacc04.spoph.embratel.net.br (201.56.189.9) 36.481 ms
5 ebt-H0-1-0-0-tcore01.spolp.embratel.net.br (200.230.1.242) 37.800 ms
200.244.212.73 (200.244.212.73) 37.803 ms
200.244.212.81 (200.244.212.81) 41.446 ms
6 ebt-BP1082-intl02.nyk.embratel.net.br (200.230.220.30) 204.822 ms
ebt-B11121-intl02.nyk.embratel.net.br (200.230.251.254) 192.381 ms
ebt-BP11521-intl02.nyk.embratel.net.br (200.230.220.174) 189.936 ms
7 fa-0-0-0.r23.nycmny01.us.bb.gin.ntt.net (129.250.202.185) 192.297 ms 172.074 ms 172.013 ms
8 ae-9.r22.asbnva02.us.bb.gin.ntt.net (129.250.2.149) 171.973 ms 167.012 ms 166.951 ms
9 ae-44.r06.asbnva02.us.bb.gin.ntt.net (129.250.6.113) 166.888 ms 166.873 ms
ae-45.r05.asbnva02.us.bb.gin.ntt.net (129.250.5.137) 212.669 ms
10 xe-0-3-0-18.r05.asbnva02.us.ce.gin.ntt.net (129.250.197.70) 202.448 ms
xe-0-9-0-16.r06.asbnva02.us.ce.gin.ntt.net (129.250.197.74) 201.593 ms 202.489 ms
11 pages.github.com (192.30.252.153) 171.337 ms * *
TCP meu router
github pages
USA backbone
backbone
embratel
NET

103. Internet

104. Nginx conf file
upstream backend {
server backend1.example.com weight=5;
server backend2.example.com:8080;
server unix:/tmp/backend3;
server backup1.example.com:8080 backup;
server backup2.example.com:8080 backup;
}
...
http://nginx.org/en/docs/http/ngx_http_upstream_module.html#server
TCP
Unix Socket

105. Internet
assets
TCP
http://12factor.net/port-binding

106. HTTP parsing
ragel vindo lá do velho mongrel*
*de acordo com o documento de design do unicorn

107. Internet
assets
TCP

108. Webserver -> Framework
baseado no PEP3333

109. Internet
assets
TCP

110. lib/rails/application.rb
Rack -> Rails
mais informações no post do timaro no omniref

111. É um Rack application
...
# Implements call according to the Rack API. It simply
# dispatches the request to the underlying middleware stack.
def call(env)
env["ORIGINAL_FULLPATH"] = build_original_fullpath(env)
env["ORIGINAL_SCRIPT_NAME"] = env["SCRIPT_NAME"]
super(env)
end
...

112. mais informações no post do timaro no omniref
Informações do Rack
{"GATEWAY_INTERFACE"=>"CGI/1.1",
"PATH_INFO"=>"/favicon.ico",
"QUERY_STRING"=>"",
"REMOTE_ADDR"=>"127.0.0.1",
"REMOTE_HOST"=>"localhost.localdomain",
"REQUEST_METHOD"=>"GET",
"REQUEST_URI"=>"http://localhost:9292/favicon.
ico",
"SCRIPT_NAME"=>"",
"SERVER_NAME"=>"localhost",
"SERVER_PORT"=>"9292",
"SERVER_PROTOCOL"=>"HTTP/1.1",
"SERVER_SOFTWARE"=>"WEBrick/1.3.1 (Ruby/2.2.3
/2015-08-18)",
"HTTP_HOST"=>"localhost:9292",
"HTTP_CONNECTION"=>"keep-alive",
"HTTP_USER_AGENT"=>"Mozilla/5.0 (X11; Linux
x86_64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/46.0.2490.71 Safari/537.36",
"HTTP_ACCEPT"=>"*/*",
"HTTP_REFERER"=>"http://localhost:9292/",
"HTTP_ACCEPT_ENCODING"=>"gzip, deflate, sdch",
"HTTP_ACCEPT_LANGUAGE"=>"en-US,en;q=0.8,pt-BR;q=0.
6,pt;q=0.4,es;q=0.2,eo;q=0.2", "rack.version"=>[1,
2],
"rack.multithread"=>true, "rack.multiprocess"
=>false, "rack.run_once"=>false, "rack.url_scheme"
=>"http", "HTTP_VERSION"=>"HTTP/1.1",
"REQUEST_PATH"=>"/favicon.ico"}

113. Rails::Engine
Todas as apps são Engines
mais informações no post do timaro no omniref

114. mais informações no post do timaro no omniref
Rack middlewares
[
Rack::Sendfile,
ActionDispatch::Static, Rack::Lock,
#<ActiveSupport::Cache::Strategy::LocalCache::
Middleware:0x000000028fa168>,
Rack::Runtime, Rack::MethodOverride,
ActionDispatch::RequestId,
Rails::Rack::Logger,
ActionDispatch::ShowExceptions,
WebConsole::Middleware,
ActionDispatch::DebugExceptions,
ActionDispatch::RemoteIp,
ActionDispatch::Reloader,
ActionDispatch::Callbacks,
ActiveRecord::Migration::CheckPending,
ActiveRecord::ConnectionAdapters::
ConnectionManagement,
ActiveRecord::QueryCache,
ActionDispatch::Cookies,
ActionDispatch::Session::CookieStore,
ActionDispatch::Flash,
ActionDispatch::ParamsParser,
Rack::Head,
Rack::ConditionalGet,
Rack::ETag
]

115. ActionDispatch
::Journey::Router
a primeira parte do seu código a ser tocada
mais informações no post do timaro no omniref
req.path_parameters
=> {:controller=>"pages", :action=>"home"}

116. ActionDispatch::Routing
::RouteSet::Dispatcher
achando o controller via rotas
mais informações no post do timaro no omniref
ActiveSupport::Dependencies.constantize("#{params[:controller].camelize}Controller")
=> PagesController

117. ActionController::Metal
prepara o request e manda processar
mais informações no post do timaro no omniref
def dispatch(name, request) #:nodoc:
[...]
process(name)

118. AbstractController::Base
encaminha para o seu controller
mais informações no post do timaro no omniref
def process(action, *args)
[...]
process_action(action_name, *args) # que no fim é só um `send`

119. Internet
assets
TCP
MV
VM
C

120. Internet
assets
TCP
MV
VM
C

121. Internet
assets
TCP
MV
VM
C

122. pega aí Rack -> [status, header, body]
mais informações no post do timaro no omniref
ActionDispatch
::Journey::Router

123. Internet
assets
TCP
MV
VM
C

124. Internet
assets
TCP
MV
VM
C

125. Internet
assets
TCP
MV
VM
C

126. Internet
assets
TCP
MV
VM
C

127. glibc
DNS
TCP/IP
UDP/IP
HTTP
POSIX
Internet

128. glibc
DNS
TCP/IP
UDP/IP
HTTP
POSIX
Internet

129. glibc
DNS
TCP/IP
UDP/IP
HTTP
POSIX
Internet

130. glibc
DNS
TCP/IP
UDP/IP
HTTP
POSIX
Internet

131. glibc
DNS
TCP/IP
UDP/IP
HTTP
POSIX
Internet
c-c-c-combo breaker

133. HTML

134. exemplos retirados do post “How browsers work”
algoritmo de parsing
implementado no webkit do chrome
HEAD

135. exemplos retirados do post “How browsers work”
algoritmo de parsing
implementado no webkit do chrome

136. HTML syntax error

137. <img src=”http://pothix.com/avatar.gif”> thread
<img src=”http://pothix.com/esperanto.png”> thread
<img src=”http://pothix.com/fotodasferias.scr”> thread
<script src=”http://pothix.com/marotagem.js”> sincrono
<script src=”http://pothix.com/estiloso.css”> thread
<script src=”http://pothix.com/javaescrito.js”> sincrono
<img src=”http://pothix.com/fotodasferias.jpg”>

138. <img src=”http://pothix.com/avatar.gif”> thread
<img src=”http://pothix.com/esperanto.png”> thread
<img src=”http://pothix.com/fotodasferias.scr”> thread
<script src=”http://pothix.com/marotagem.js”> sincrono
<script src=”http://pothix.com/estiloso.css”> thread
<script src=”http://pothix.com/javaescrito.js”> sincrono
<img src=”http://pothix.com/fotodasferias.jpg”>

139. exemplos retirados do post “How browsers work”

140. exemplos retirados do post “How browsers work”

141. Diego Eis: DOM, CSSOM e RenderThree - Introdução ao Browser Render Path

143. Resumindo
essa bagaça

144. glibc
MV
VM
C
Internet
Internet

145. Não acredite em mágica
entenda como funciona de verdade
ceeeeerto.

146. Seja curioso
conhecimento nunca é demais

147. Perguntas?
Willian Molinari
@PotHix
pothix@pothix.com
Slides: https://goo.gl/cC36RM

152. S
R
L
Y
?

153. The browser