Revisiting HTTP/2

RFC 7540 was ratified over 2 years ago and, today, all major browsers, servers, and CDNs support the next generation of HTTP. Just over a year ago, at Velocity (https://www.slideshare.net/Fastly/http2-what-no-one-is-telling-you), we discussed the protocol, looked at some real world implications of its deployment and use, and what realistic expectations we should have from its use.

Now that adoption is ramped up and the protocol is being regularly used on the Internet, it's a good time to revisit the protocol and its deployment. Has it evolved? Have we learned anything? Are all the features providing the benefits we were expecting? What's next?

In this session, we'll review protocol basics and try to answer some of these questions based on real-world use of it. We'll dig into the core features like interaction with TCP, server push, priorities and dependencies, and HPACK. We'll look at these features through the lens of experience and see if good practice patterns have emerged. We'll also review available tools and discuss what protocol enhancements are in the near and not-so-near horizon.

Transcript

1. Revisiting HTTP/2
   Hooman Beheshti
   

   View Slide

2. View Slide

3. https://caniuse.com/#search=http2
   

   View Slide

4. https://istlsfastyet.com/
   

   View Slide

5. https://istlsfastyet.com/
   

   View Slide

6. https://www.fastly.com/
   

   View Slide

7. % of overall requests on Fastly’s network (2017)
   % of requests
   0%
   25%
   50%
   75%
   100%
   January
   February
   M
   arch
   April
   M
   ay
   June
   July
   August
   Septem
   ber
   O
   ctober
   N
   ovem
   ber
   D
   ecem
   ber
   HTTP/2
   

   View Slide

8. https://youtu.be/CkFEoZwWbGQ
   

   View Slide

9. Revisiting HTTP/2
   • Core concepts
   • Major features
   - HTTP and TCP
   - Server push
   - Priorities and dependencies
   - HPACK
   • Has anything changed? Have we learned anything?
   • What’s next?
   

   View Slide

10. HTTP/2
    The basics
    

    View Slide

11. Binary protocol
    

    View Slide

12. Connection
    

    View Slide

13. connection
    

    View Slide

14. connection
    • A single, long lasting connection
    • Theoretically, this means better congestion management
    between peers
    • TLS/ALPN
    

    View Slide

15. connection
    stream
    stream
    stream
    …
    

    View Slide

16. Streams
    • Virtual communication channels
    - Translate roughly to a request/response exchange
    - Either side can initiate a stream
    • Stream IDs
    - Client: odd; server: even; 0: reserved
    - Each ID must be larger than the last
    - Cannot be reused
    

    View Slide

17. +--------+
    send PP | | recv PP
    ,--------| idle |--------.
    / | | \
    v +--------+ v
    +----------+ | +----------+
    | | | send H / | |
    ,------| reserved | | recv H | reserved |------.
    | | (local) | | | (remote) | |
    | +----------+ v +----------+ |
    | | +--------+ | |
    | | recv ES | | send ES | |
    | send H | ,-------| open |-------. | recv H |
    | | / | | \ | |
    | v v +--------+ v v |
    | +----------+ | +----------+ |
    | | half | | | half | |
    | | closed | | send R / | closed | |
    | | (remote) | | recv R | (local) | |
    | +----------+ | +----------+ |
    | | | | |
    | | send ES / | recv ES / | |
    | | send R / v send R / | |
    | | recv R +--------+ recv R | |
    | send R / `----------->| |<-----------' send R / |
    | recv R | closed | recv R |
    `----------------------->| |<----------------------'
    +--------+
    send: endpoint sends this frame
    recv: endpoint receives this frame
    H: HEADERS frame (with implied CONTINUATIONs)
    PP: PUSH_PROMISE frame (with implied CONTINUATIONs)
    ES: END_STREAM flag
    R: RST_STREAM frame
    

    View Slide

18. connection
    stream
    stream
    stream
    …
    frame frame frame frame
    frame frame frame frame
    frame frame frame
    frame frame frame
    frame frame
    frame frame frame
    

    View Slide

19. GET /thing HTTP/1.1
    Host: www.example.com
    User-Agent: Some_user_agent
    HTTP/1.1 200 OK
    Server: some_server
    Content-Type: text/html
    Content-Length: 1000
    html html html html html html html
    html html html html html html html
    html html html html html html html
    html html html html html html html
    html html html html html html html
    html html html html html html html
    html html html html html html html
    html html html html html
    Request Response
    

    View Slide

20. GET /thing HTTP/1.1
    Host: www.example.com
    User-Agent: Some_user_agent
    HTTP/1.1 200 OK
    Server: some_server
    Content-Type: text/html
    Content-Length: 1000
    html html html html html html html
    html html html html html html html
    html html html html html html html
    html html html html html html html
    html html html html html html html
    html html html html html html html
    html html html html html html html
    html html html html html
    Request Response
    HEADERS
    

    View Slide

21. GET /thing HTTP/1.1
    Host: www.example.com
    User-Agent: Some_user_agent
    HTTP/1.1 200 OK
    Server: some_server
    Content-Type: text/html
    Content-Length: 1000
    html html html html html html html
    html html html html html html html
    html html html html html html html
    html html html html html html html
    html html html html html html html
    html html html html html html html
    html html html html html html html
    html html html html html
    HEADERS
    HEADERS
    Request Response
    

    View Slide

22. GET /thing HTTP/1.1
    Host: www.example.com
    User-Agent: Some_user_agent
    HTTP/1.1 200 OK
    Server: some_server
    Content-Type: text/html
    Content-Length: 1000
    html html html html html html html
    html html html html html html html
    html html html html html html html
    html html html html html html html
    html html html html html html html
    html html html html html html html
    html html html html html html html
    html html html html html
    DATA
    DATA
    DATA
    DATA
    DATA
    DATA
    HEADERS
    Request Response
    HEADERS
    

    View Slide

23. DATA Carries request or response data
    HEADERS Carries request/response headers/trailers; can initiate a stream
    PRIORITY Indicates priority of a stream
    RST_STREAM Terminates a stream
    SETTINGS Defines parameters for the connection only
    PUSH_PROMISE Signals peer for server push
    PING Maintenance frame for checking RTT, connection, etc
    GOAWAY For shutting down a connection
    WINDOW_UPDATE Frame responsible for flow control adjustments
    CONTINUATION Extends a HEADERS frame and can carry more headers
    

    View Slide

24. DATA Carries request or response data
    HEADERS Carries request/response headers/trailers; can initiate a stream
    PRIORITY Indicates priority of a stream
    RST_STREAM Terminates a stream
    SETTINGS Defines parameters for the connection only
    PUSH_PROMISE Signals peer for server push
    PING Maintenance frame for checking RTT, connection, etc
    GOAWAY For shutting down a connection
    WINDOW_UPDATE Frame responsible for flow control adjustments
    CONTINUATION Extends a HEADERS frame and can carry more headers
    

    View Slide

25. TCP
    TLS
    TLS Record
    Header: value\r\n
    Header: value\r\n
    Header: value\r\n
    \r\n
    Body Body Body Body Body
    Body Body Body Body Body
    Body Body Body Body Body
    Body Body Body Body Body
    HTTP/1
    

    View Slide

26. HTTP/2 Frame
    TCP
    TLS
    TLS Record
    HTTP/2 Frame
    HTTP/2 Frame
    …
    Stream ID
    Stream ID
    Stream ID
    TCP
    TLS
    TLS Record
    Header: value\r\n
    Header: value\r\n
    Header: value\r\n
    \r\n
    Body Body Body Body Body
    Body Body Body Body Body
    Body Body Body Body Body
    Body Body Body Body Body
    HTTP/1 HTTP/2
    

    View Slide

27. Protocol flow
    

    View Slide

28. HTTP/1
    connection
    request
    response
    

    View Slide

29. HTTP/2
    connection
    (sid=1)
    DATA
    (sid=1)
    DATA
    (sid=1)
    DATA
    (sid=1)
    HEADERS
    (sid=1)
    HEADERS
    

    View Slide

30. HTTP/1
    connection
    request
    response
    

    View Slide

31. HTTP/1
    connection
    request
    response
    Head-of-line blocking:
    nothing else can happen over the connection while busy with request/response
    

    View Slide

32. connection
    request
    response
    HTTP/1
    connection
    request
    response
    connection
    request
    response
    connection
    request
    response
    

    View Slide

33. HTTP/2
    connection
    (sid=3)
    DATA
    (sid=1)
    DATA
    (sid=5)
    HEADERS
    (sid=3)
    DATA
    (sid=1)
    HEADERS
    (sid=3)
    HEADERS
    (sid=11)
    HEADERS
    (sid=13)
    HEADERS
    (sid=15)
    HEADERS
    (sid=13)
    DATA
    (sid=13)
    DATA
    (sid=17)
    HEADERS
    

    View Slide

34. Multiplexing & Interleaving
    

    View Slide

35. View Slide

36. HTTP/1.1
    

    View Slide

37. HTTP/1.1 HTTP/2
    

    View Slide

38. View Slide

39. HTTP/2 & TCP
    

    View Slide

40. Performance
    

    View Slide

41. The perfect page
    

    View Slide

42. View Slide

43. View Slide

44. View Slide

45. Private WebpageTest
    5Mbps/1Mbps, 40ms latency
    h1 vs h2
    

    View Slide

46. PLR
    

    View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. 780Kbps/330Kbps, 200ms latency
    

    View Slide

54. View Slide

55. 0% PLR 2% PLR
    5Mbps/1Mbps
    40ms
    780Kbps/330Kbps
    200ms
    5Mbps/1Mbps
    40ms
    780Kbps/330Kbps
    200ms
    Doc
    Complete
    h2 h2 h2 h2 h1 h1 h1 h1
    DCL Start h1 h1 h2 h1 h1 h1 h2 h1
    Speed
    Index
    h2/h1 h2 h2 h2 h1 h1 h2 h2
    

    View Slide

56. 0% PLR 2% PLR
    5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms 5Mbps/1Mbps; 40ms 780Kbps/330Kbps; 200ms
    Site1a
    (Fastly)
    DocComplete h2 h2 h2 h1 h1 h1 h1 h1
    DCL Start h2 h1 h2 h2 h2/h1 h1 h2 h2
    Speed Index h1 h2 h2 h2 h1 h2/h1 h2/h1 h2
    Site1b
    DocComplete h2/h1 h2 h2 h2 h1 h2 h1 h2/h1
    DCL Start h1 h2 h1 h1 h1 h2/h1 h1 h1
    Speed Index h1 h2 h2 h1 h1 h2/h1 h1 h1
    Site1c
    DocComplete h1/h2 h2 h2 h2 h1 h1 h1 h1
    DCL Start h1 h1/h2 h1 h1 h1 h2 h1 h1
    Speed Index h2 h2 h1 h2 h1 h2 h1 h1
    Site2a
    DocComplete h2 h2 h2 h2 h1 h2/h1 h1 h1
    DCL Start h2 h2 h2 h2 h1 h1 h1 h1
    Speed Index h1 h2 h1 h2 h1 h2 h1 h2
    Site2b
    DocComplete h2 h2 h2 h2 h1 h1/h2 h1 h1
    DCL Start h2 h2 h1 h2 h1 h2 h1 h2
    Speed Index h2 h1/h2 h1 h1/h2 h2 h2 h1 h1
    Site3a
    DocComplete h2 h2 h1 h2 h2 h2 h1 h1
    DCL Start h2 h2 h2 h2 h2 h2 h2 h2
    Speed Index h2 h2 h1 h1 h1/h2 h1/h2 h1 h1
    Site3b
    DocComplete h2 h2 h2 h1/h2 h2 h2/h1 h2 h2
    DCL Start h2 h2 h2 h2 h2 h2 h2 h2
    Speed Index h1 h2 h1 h1 h1 h2 h1 h1
    Site3c
    DocComplete h1 h2 h2 h2 h1 h2 h2 h2
    DCL Start h1/h2 h2 h1 h1/h2 h2/h1 h2 h1 h2/h1
    Speed Index h1 h2 h2 h2 h2 h2 h2 h2
    

    View Slide

57. Why?
    

    View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. Head of line blocking
    in TCP
    

    View Slide

63. View Slide

64. View Slide

65. View Slide

66. Some reading…
    • http://c3lab.poliba.it/images/3/3b/QUIC_SAC15.pdf
    • https://www.usenix.org/system/files/conference/nsdi14/nsdi14-paper-
    wang_xiao_sophia.pdf
    • http://arxiv.org/pdf/1507.06562v1.pdf
    • http://nl.cs.montana.edu/lab/publications/Goel_H2_extended.pdf
    • https://99designs.com.au/tech-blog/blog/2016/07/14/real-world-http-2-400gb-of-
    images-per-day/
    

    View Slide

67. Takeaways (then)
    • Despite the experiment flaws, performance
    benefits are less than clear cut, out of the box
    • Seemed best:
    - Not listen to anyone!
    - Try for yourself
    

    View Slide

68. Has anything
    changed?
    

    View Slide

69. BBR
    

    View Slide

70. https://github.com/google/bbr/blob/master/Presentations/bbr-2017-02-08-google-net-research-summit.pdf
    

    View Slide

71. https://cloudplatform.googleblog.com/2017/07/TCP-BBR-congestion-control-comes-to-GCP-your-Internet-just-got-faster.html
    

    View Slide

72. Bountifully Beneficial Reading
    • https://github.com/google/bbr/blob/master/Presentations/
    bbr-2017-02-08-google-net-research-summit.pdf
    • https://www.ietf.org/proceedings/97/slides/slides-97-iccrg-
    bbr-congestion-control-02.pdf
    • https://github.com/google/bbr
    • https://dl.acm.org/citation.cfm?id=3009824
    • https://arxiv.org/pdf/1706.09115.pdf
    

    View Slide

73. https://twitter.com/amernetflix/status/892787364598132736
    

    View Slide

74. https://blogs.dropbox.com/tech/2017/09/optimizing-web-servers-for-high-throughput-and-low-latency/
    

    View Slide

75. BBR Cubic
    a single 1MB object download
    

    View Slide

76. BBR Cubic
    a single 1MB object download
    

    View Slide

77. BBR things…
    • Is BBR a good network citizen?
    • “network waterboarding”
    • There’s still work to do
    

    View Slide

78. Coalescing
    

    View Slide

79. View Slide

80. View Slide

81. https://daniel.haxx.se/blog/2016/08/18/http2-connection-coalescing/
    

    View Slide

82. View Slide

83. View Slide

84. Origin frame
    • List of domains eligible for coalescing
    - Cert still needs to match
    • Empty frame signals no coalescing
    - Fall back to SNI
    • Obviates DNS lookups for listed domains
    

    View Slide

85. Origin frame
    • List of domains eligible for coalescing
    - Cert still needs to match
    • Empty frame signals no coalescing
    - Fall back to SNI
    • Obviates DNS lookups for listed domains
    

    View Slide

86. Origin frame
    • List of domains eligible for coalescing
    - Cert still needs to match
    • Empty frame signals no coalescing
    - Fall back to SNI
    • Obviates DNS lookups for listed domains
    

    View Slide

87. The connection is an authoritative and secure
    context
    

    View Slide

88. The connection is an authoritative and secure
    context
    

    View Slide

89. The connection is an authoritative and secure
    context
    

    View Slide

90. h2 and TCP
    • Performance benefits?
    - Jury’s still out
    - BBR helps, but pros/cons aren’t totally clear yet
    - It’s still best to figure out what’s best for you on your own!
    • We’re about to get more control over some coalescing
    • The context of a connection is being relied on more
    and more
    

    View Slide

91. HTTP/2 Server Push
    

    View Slide

92. Push basic
    • “push” a resource to the client before it’s
    requested
    • Only servers can push
    • Hop-by-hop
    • Triggered by PUSH_PROMISE frame
    

    View Slide

93. connection
    

    View Slide

94. connection
    

    View Slide

95. connection
    

    View Slide

96. What to push?
    • A replacement for inlining
    - All the RTT-saving benefits + caching
    • Google paper:
    - https://docs.google.com/a/fastly.com/drawings/d/
    1mWwY_MeNAjzDRCF0uT97KgN0lh_jX79a53X6iOuH_Is/pub?w=2330&h=1350
    • Facebook:
    - https://www.facebook.com/atscaleevents/videos/1775942979345465/
    • TTFMP:
    - https://youtu.be/4pQ2byAoIX0
    

    View Slide

97. Link: ; rel=preload; as=style
    https://w3c.github.io/preload/
    

    View Slide

98. Doesn’t Link rel=preload already
    mean something to the browser?
    

    View Slide

99. Link: ; rel=preload; as=style; nopush
    https://w3c.github.io/preload/
    

    View Slide

100. Link: ; rel=preload; as=style; x-http2-push-only
     

     View Slide

101. Benefits?
     

     View Slide

102. No push:
     Push:
     1xRTT
     

     View Slide

103. That’s cool, but...
     

     View Slide

104. View Slide

105. View Slide

106. View Slide

107. View Slide

108. View Slide

109. Non-header trigger
     

     View Slide

110. View Slide

111. “Async” Push
     

     View Slide

112. View Slide

113. Push with Link header
     Async Push
     

     View Slide

114. of course it isn’t that simple…
     

     View Slide

115. The client cache
     

     View Slide

116. RST_STREAM
     

     View Slide

117. View Slide

118. RST_STREAM
     

     View Slide

119. No Push
     First view
     Repeat view
     

     View Slide

120. Push
     First view
     Repeat view
     pushed
     pushed
     

     View Slide

121. https://blog.yoav.ws/tale-of-four-caches/
     

     View Slide

122. Cache Digests
     http://httpwg.org/http-extensions/cache-digest.html
     

     View Slide

123. +-------------------------------+-------------------------------+

     | Origin-Len (16) | Origin? (*) ...

     +-------------------------------+-------------------------------+

     | Digest-Value? (*) ...

     +---------------------------------------------------------------+
     

     View Slide

124. We still have work to do...
     

     View Slide

125. https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/
     

     View Slide

126. Adoption?
     

     View Slide

127. $ varnishlog -i h2_attributes | grep -o "is_push:." | head -n 30000 | sort | uniq -c
     30000 is_push:0
     $ varnishlog -i h2_attributes | grep -o "is_push:." | head -n 30000 | sort | uniq -c
     29980 is_push:0
     20 is_push:1
     $ varnishlog -i h2_attributes | grep -o "is_push:." | head -n 30000 | sort | uniq -c
     29985 is_push:0
     15 is_push:1
     US-East
     

     View Slide

128. $varnishlog -i h2_attributes | grep -o "is_push:." | head -n 30000 | sort | uniq -c
     29967 is_push:0
     33 is_push:1
     $varnishlog -i h2_attributes | grep -o "is_push:." | head -n 30000 | sort | uniq -c
     29972 is_push:0
     28 is_push:1
     $varnishlog -i h2_attributes | grep -o "is_push:." | head -n 30000 | sort | uniq -c
     29974 is_push:0
     26 is_push:1
     US-West
     $ varnishlog -i h2_attributes | grep -o "is_push:." | head -n 30000 | sort | uniq -c
     30000 is_push:0
     $ varnishlog -i h2_attributes | grep -o "is_push:." | head -n 30000 | sort | uniq -c
     29980 is_push:0
     20 is_push:1
     $ varnishlog -i h2_attributes | grep -o "is_push:." | head -n 30000 | sort | uniq -c
     29985 is_push:0
     15 is_push:1
     US-East
     

     View Slide

129. $varnishlog -i h2_attributes | grep -o "is_push:." | head -n 30000 | sort | uniq -c
     29953 is_push:0
     47 is_push:1
     $varnishlog -i h2_attributes | grep -o "is_push:." | head -n 30000 | sort | uniq -c
     29981 is_push:0
     19 is_push:1
     $varnishlog -i h2_attributes | grep -o "is_push:." | head -n 30000 | sort | uniq -c
     29984 is_push:0
     16 is_push:1
     

     View Slide

130. What about…
     

     View Slide

131. View Slide

132. Fetch stuff!!
     

     View Slide

133. https://tools.ietf.org/html/rfc8297
     

     View Slide

134. View Slide

135. {
     103
     

     View Slide

136. Pushing for push
     • Is the 1RTT worth the complexity?
     • 103 to the browser:
     - Same benefit as push for the most important use-case
     - Much simpler
     - Leverage browser cache
     • Cache digests may still be useful?
     • What do we do with push?
     

     View Slide

137. Prioritization
     

     View Slide

138. Prioritization basics
     • Address possible contention because of all the
     concurrency
     • Stream weights
     • Dependency (including exclusivity)
     • HEADERS and PRIORITY frames
     • It’s only a “suggestion”
     

     View Slide

139. Example 1
     • A gets ¾ of resources
     • B gets ¼ of resources
     *
     A
     12
     B
     4
     12/(12+4) 4/(12+4)
     

     View Slide

140. Example 2
     • D gets all resources
     • After D is done, C gets all resources
     • Weights are meaningless since there are
     no siblings
     *
     D
     1
     C
     8
     

     View Slide

141. Example 3
     • D gets all resources
     • After D is done, C gets all resources
     • After C is done:
     - A gets ¾ of resources
     - B gets ¼ of resources
     *
     D
     1
     C
     8
     A
     12
     B
     4
     

     View Slide

142. Example 4
     • D gets all resources
     • After D is done:
     - C gets ½ of resources
     - E gets ½ of resources
     • After C is done:
     - A gets ¾ of C’s ½ of resources
     - B gets ¼ of C’s ½ of resources
     *
     D
     1
     C
     8
     A
     12
     B
     4
     E
     8
     

     View Slide

143. https://speakerdeck.com/summerwind/2-prioritization
     

     View Slide

144. https://speakerdeck.com/summerwind/2-prioritization
     

     View Slide

145. https://speakerdeck.com/summerwind/2-prioritization
     

     View Slide

146. View Slide

147. https://speakerdeck.com/summerwind/2-prioritization
     

     View Slide

148. https://github.com/deweerdt/h2priograph
     

     View Slide

149. View Slide

150. https://github.com/deweerdt/h2priograph
     

     View Slide

151. https://github.com/deweerdt/h2priograph
     

     View Slide

152. Priority hints
     

     View Slide

153. https://discourse.wicg.io/t/manual-priority-control-of-resource-fetching/2280
     https://github.com/WICG/priority-hints
     

     View Slide

154. HPACK
     

     View Slide

155. HPACK (RFC 7541)
     • Addresses the header bloat problem
     • Two primary mechanisms
     - All headers (name=value) are Huffman encoded
     - Indexed tables at each peer
     

     View Slide

156. Tables
     • Static table
     - Defined by the RFC, never changes
     • Dynamic table
     - Built during the connection and maintained by each
     side
     - FIFO
     

     View Slide

157. +-------+-----------------------------+---------------+
     | Index | Header Name | Header Value |
     +-------+-----------------------------+---------------+
     | 1 | :authority | |
     | 2 | :method | GET |
     | 3 | :method | POST |
     | 4 | :path | / |
     | 5 | :path | /index.html |
     | 6 | :scheme | http |
     | 7 | :scheme | https |
     | 8 | :status | 200 |
     | 9 | :status | 204 |
     | 10 | :status | 206 |
     | 11 | :status | 304 |
     | 12 | :status | 400 |
     | 13 | :status | 404 |
     | 14 | :status | 500 |
     | 15 | accept-charset | |
     | 16 | accept-encoding | gzip, deflate |
     | 17 | accept-language | |
     | 18 | accept-ranges | |
     | 19 | accept | |
     | 20 | access-control-allow-origin | |
     | 21 | age | |
     | 22 | allow | |
     | 23 | authorization | |
     | 24 | cache-control | |
     | 25 | content-disposition | |
     | 26 | content-encoding | |
     | 27 | content-language | |
     | 28 | content-length | |
     | 29 | content-location | |
     | 30 | content-range | |
     +-------+-----------------------------+---------------+
     Table 1: Static Table Entries
     +-------+-----------------------------+---------------+
     | Index | Header Name | Header Value |
     +-------+-----------------------------+---------------+
     | 31 | content-type | |
     | 32 | cookie | |
     | 33 | date | |
     | 34 | etag | |
     | 35 | expect | |
     | 36 | expires | |
     | 37 | from | |
     | 38 | host | |
     | 39 | if-match | |
     | 40 | if-modified-since | |
     | 41 | if-none-match | |
     | 42 | if-range | |
     | 43 | if-unmodified-since | |
     | 44 | last-modified | |
     | 45 | link | |
     | 46 | location | |
     | 47 | max-forwards | |
     | 48 | proxy-authenticate | |
     | 49 | proxy-authorization | |
     | 50 | range | |
     | 51 | referer | |
     | 52 | refresh | |
     | 53 | retry-after | |
     | 54 | server | |
     | 55 | set-cookie | |
     | 56 | strict-transport-security | |
     | 57 | transfer-encoding | |
     | 58 | user-agent | |
     | 59 | vary | |
     | 60 | via | |
     | 61 | www-authenticate | |
     +-------+-----------------------------+---------------+
     Table 1: Static Table Entries
     

     View Slide

158. Tables
     • Static table
     - Defined by the RFC, never changes
     • Dynamic table
     - Built during the connection and maintained by each
     side
     - FIFO
     

     View Slide

159. Bytes browser => server
     Bytes server => browser
     

     View Slide

160. https://blogs.dropbox.com/tech/2016/05/enabling-http2-for-dropbox-web-services-experiences-and-observations/
     

     View Slide

161. HPACK - things to know
     • Default size is 4K
     - For entire dynamic table
     - Site-wide headers proposal:
     • https://mnot.github.io/I-D/site-wide-headers/
     • Compression context is set per connection
     - New connection starts with blank dynamic table
     • Can’t turn it off
     • Can be an attack vector:
     - https://www.imperva.com/docs/Imperva_HII_HTTP2.pdf
     

     View Slide

162. content-security-policy:script-src https://connect.facebook.net https://cm.g.doubleclick.net https://ssl.google-analytics.com https://
     graph.facebook.com https://twitter.com 'unsafe-eval' https://*.twimg.com https://api.twitter.com https://analytics.twitter.com
     https://publish.twitter.com https://ton.twitter.com https://syndication.twitter.com https://www.google.com 'nonce-
     Kk9FW3roM81U6D0LjPHpZw==' https://t.tellapart.com https://platform.twitter.com https://www.google-analytics.com blob: 'self'; frame-
     ancestors 'self'; font-src https://twitter.com https://*.twimg.com data: https://ton.twitter.com https://fonts.gstatic.com https://
     maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com 'self'; media-src https://rmpdhdsnappytv-vh.akamaihd.net https://prod-video-
     eu-central-1.pscp.tv https://v.cdn.vine.co https://dwo3ckksxlb0v.cloudfront.net https://twitter.com https://amp.twimg.com https://
     smmdhdsnappytv-vh.akamaihd.net https://*.twimg.com https://prod-video-eu-west-1.pscp.tv https://rmmdhdsnappytv-vh.akamaihd.net
     https://clips-media-assets.twitch.tv https://prod-video-us-west-2.pscp.tv https://prod-video-us-west-1.pscp.tv https://prod-video-ap-
     northeast-1.pscp.tv https://smdhdsnappytv-vh.akamaihd.net https://ton.twitter.com https://rmdhdsnappytv-vh.akamaihd.net https://
     mmdhdsnappytv-vh.akamaihd.net https://smpdhdsnappytv-vh.akamaihd.net https://prod-video-sa-east-1.pscp.tv https://mdhdsnappytv-
     vh.akamaihd.net https://prod-video-ap-southeast-2.pscp.tv https://mtc.cdn.vine.co https://dev-video-us-west-2.pscp.tv https://prod-
     video-us-east-1.pscp.tv blob: 'self' https://prod-video-ap-southeast-1.pscp.tv https://mpdhdsnappytv-vh.akamaihd.net https://dev-
     video-eu-west-1.pscp.tv; connect-src https://rmpdhdsnappytv-vh.akamaihd.net https://prod-video-eu-central-1.pscp.tv https://
     graph.facebook.com https://*.giphy.com https://dwo3ckksxlb0v.cloudfront.net https://vmaprel.snappytv.com https://smmdhdsnappytv-
     vh.akamaihd.net https://*.twimg.com https://embed.pscp.tv https://api.twitter.com https://prod-video-eu-west-1.pscp.tv https://
     rmmdhdsnappytv-vh.akamaihd.net https://clips-media-assets.twitch.tv https://prod-video-us-west-2.pscp.tv https://pay.twitter.com
     https://prod-video-us-west-1.pscp.tv https://analytics.twitter.com https://vmap.snappytv.com https://*.twprobe.net https://prod-
     video-ap-northeast-1.pscp.tv https://smdhdsnappytv-vh.akamaihd.net https://syndication.twitter.com https://sentry.io https://
     rmdhdsnappytv-vh.akamaihd.net https://media.riffsy.com https://mmdhdsnappytv-vh.akamaihd.net https://embed.periscope.tv https://
     smpdhdsnappytv-vh.akamaihd.net https://prod-video-sa-east-1.pscp.tv https://vmapstage.snappytv.com https://upload.twitter.com
     https://proxsee.pscp.tv https://mdhdsnappytv-vh.akamaihd.net https://prod-video-ap-southeast-2.pscp.tv https://dev-video-us-
     west-2.pscp.tv https://prod-video-us-east-1.pscp.tv 'self' https://vmap.grabyo.com https://prod-video-ap-southeast-1.pscp.tv https://
     mpdhdsnappytv-vh.akamaihd.net https://dev-video-eu-west-1.pscp.tv; style-src https://fonts.googleapis.com https://twitter.com
     https://*.twimg.com https://translate.googleapis.com https://ton.twitter.com 'unsafe-inline' https://platform.twitter.com https://
     maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com 'self'; object-src https://twitter.com https://pbs.twimg.com; default-src
     'self' blob:; frame-src https://staticxx.facebook.com https://twitter.com https://*.twimg.com https://5415703.fls.doubleclick.net
     https://player.vimeo.com https://pay.twitter.com https://www.facebook.com https://ton.twitter.com https://syndication.twitter.com
     https://vine.co twitter: https://www.youtube.com https://platform.twitter.com https://upload.twitter.com https://s-
     static.ak.facebook.com https://4337974.fls.doubleclick.net https://8122179.fls.doubleclick.net 'self' https://donate.twitter.com;
     img-src https://prod-profile.pscp.tv https://graph.facebook.com https://prod-thumbnail.pscp.tv https://*.giphy.com https://
     twitter.com https://*.twimg.com https://ad.doubleclick.net data: https://clips-media-assets.twitch.tv https://lumiere-a.akamaihd.net
     https://fbcdn-profile-a.akamaihd.net https://www.facebook.com https://ton.twitter.com https://*.fbcdn.net https://
     syndication.twitter.com https://media.riffsy.com https://www.google.com https://prod-profile.periscope.tv https://
     stats.g.doubleclick.net https://platform.twitter.com https://api.mapbox.com https://www.google-analytics.com blob: https://prod-
     thumbnail-small.pscp.tv https://prod-thumbnail-small.periscope.tv 'self' https://prod-thumbnail.periscope.tv; report-uri https://
     twitter.com/i/csp_report?a=NVQWGYLXFVZXO2LGOQ%3D%3D%3D%3D%3D%3D&ro=false;
     

     View Slide

163. content-security-policy:script-src https://connect.facebook.net https://cm.g.doubleclick.net https://ssl.google-analytics.com https://
     graph.facebook.com https://twitter.com 'unsafe-eval' https://*.twimg.com https://api.twitter.com https://analytics.twitter.com
     https://publish.twitter.com https://ton.twitter.com https://syndication.twitter.com https://www.google.com 'nonce-
     Kk9FW3roM81U6D0LjPHpZw==' https://t.tellapart.com https://platform.twitter.com https://www.google-analytics.com blob: 'self'; frame-
     ancestors 'self'; font-src https://twitter.com https://*.twimg.com data: https://ton.twitter.com https://fonts.gstatic.com https://
     maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com 'self'; media-src https://rmpdhdsnappytv-vh.akamaihd.net https://prod-video-
     eu-central-1.pscp.tv https://v.cdn.vine.co https://dwo3ckksxlb0v.cloudfront.net https://twitter.com https://amp.twimg.com https://
     smmdhdsnappytv-vh.akamaihd.net https://*.twimg.com https://prod-video-eu-west-1.pscp.tv https://rmmdhdsnappytv-vh.akamaihd.net
     https://clips-media-assets.twitch.tv https://prod-video-us-west-2.pscp.tv https://prod-video-us-west-1.pscp.tv https://prod-video-ap-
     northeast-1.pscp.tv https://smdhdsnappytv-vh.akamaihd.net https://ton.twitter.com https://rmdhdsnappytv-vh.akamaihd.net https://
     mmdhdsnappytv-vh.akamaihd.net https://smpdhdsnappytv-vh.akamaihd.net https://prod-video-sa-east-1.pscp.tv https://mdhdsnappytv-
     vh.akamaihd.net https://prod-video-ap-southeast-2.pscp.tv https://mtc.cdn.vine.co https://dev-video-us-west-2.pscp.tv https://prod-
     video-us-east-1.pscp.tv blob: 'self' https://prod-video-ap-southeast-1.pscp.tv https://mpdhdsnappytv-vh.akamaihd.net https://dev-
     video-eu-west-1.pscp.tv; connect-src https://rmpdhdsnappytv-vh.akamaihd.net https://prod-video-eu-central-1.pscp.tv https://
     graph.facebook.com https://*.giphy.com https://dwo3ckksxlb0v.cloudfront.net https://vmaprel.snappytv.com https://smmdhdsnappytv-
     vh.akamaihd.net https://*.twimg.com https://embed.pscp.tv https://api.twitter.com https://prod-video-eu-west-1.pscp.tv https://
     rmmdhdsnappytv-vh.akamaihd.net https://clips-media-assets.twitch.tv https://prod-video-us-west-2.pscp.tv https://pay.twitter.com
     https://prod-video-us-west-1.pscp.tv https://analytics.twitter.com https://vmap.snappytv.com https://*.twprobe.net https://prod-
     video-ap-northeast-1.pscp.tv https://smdhdsnappytv-vh.akamaihd.net https://syndication.twitter.com https://sentry.io https://
     rmdhdsnappytv-vh.akamaihd.net https://media.riffsy.com https://mmdhdsnappytv-vh.akamaihd.net https://embed.periscope.tv https://
     smpdhdsnappytv-vh.akamaihd.net https://prod-video-sa-east-1.pscp.tv https://vmapstage.snappytv.com https://upload.twitter.com
     https://proxsee.pscp.tv https://mdhdsnappytv-vh.akamaihd.net https://prod-video-ap-southeast-2.pscp.tv https://dev-video-us-
     west-2.pscp.tv https://prod-video-us-east-1.pscp.tv 'self' https://vmap.grabyo.com https://prod-video-ap-southeast-1.pscp.tv https://
     mpdhdsnappytv-vh.akamaihd.net https://dev-video-eu-west-1.pscp.tv; style-src https://fonts.googleapis.com https://twitter.com
     https://*.twimg.com https://translate.googleapis.com https://ton.twitter.com 'unsafe-inline' https://platform.twitter.com https://
     maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com 'self'; object-src https://twitter.com https://pbs.twimg.com; default-src
     'self' blob:; frame-src https://staticxx.facebook.com https://twitter.com https://*.twimg.com https://5415703.fls.doubleclick.net
     https://player.vimeo.com https://pay.twitter.com https://www.facebook.com https://ton.twitter.com https://syndication.twitter.com
     https://vine.co twitter: https://www.youtube.com https://platform.twitter.com https://upload.twitter.com https://s-
     static.ak.facebook.com https://4337974.fls.doubleclick.net https://8122179.fls.doubleclick.net 'self' https://donate.twitter.com;
     img-src https://prod-profile.pscp.tv https://graph.facebook.com https://prod-thumbnail.pscp.tv https://*.giphy.com https://
     twitter.com https://*.twimg.com https://ad.doubleclick.net data: https://clips-media-assets.twitch.tv https://lumiere-a.akamaihd.net
     https://fbcdn-profile-a.akamaihd.net https://www.facebook.com https://ton.twitter.com https://*.fbcdn.net https://
     syndication.twitter.com https://media.riffsy.com https://www.google.com https://prod-profile.periscope.tv https://
     stats.g.doubleclick.net https://platform.twitter.com https://api.mapbox.com https://www.google-analytics.com blob: https://prod-
     thumbnail-small.pscp.tv https://prod-thumbnail-small.periscope.tv 'self' https://prod-thumbnail.periscope.tv; report-uri https://
     twitter.com/i/csp_report?a=NVQWGYLXFVZXO2LGOQ%3D%3D%3D%3D%3D%3D&ro=false;
     4.6KB
     

     View Slide

164. HPACK - things to know
     • Default size is 4K
     - For entire dynamic table
     - Site-wide headers proposal:
     • https://mnot.github.io/I-D/site-wide-headers/
     • Compression context is set per connection
     - New connection starts with blank dynamic table
     • Can’t turn it off
     • Can be an attack vector:
     - https://www.imperva.com/docs/Imperva_HII_HTTP2.pdf
     

     View Slide

165. View Slide

166. Static Static
     Connection
     

     View Slide

167. Static
     Dynamic
     Static
     Dynamic
     SETTINGS_HEADER_TABLE_SIZE
     Connection
     

     View Slide

168. Static
     Dynamic
     Static
     Dynamic
     Decoder Encoder
     SETTINGS_HEADER_TABLE_SIZE
     Connection
     

     View Slide

169. Static
     Dynamic
     Dynamic
     Static
     Dynamic
     Dynamic
     Decoder
     Encoder
     Encoder
     Decoder
     SETTINGS_HEADER_TABLE_SIZE
     SETTINGS_HEADER_TABLE_SIZE
     Connection
     

     View Slide

170. Tools and resources
     

     View Slide

171. http://chimera.labs.oreilly.com/books/1230000000545
     

     View Slide

172. Browser indicator
     • Chrome:
     – https://chrome.google.com/webstore/detail/http2-and-spdy-
     indicator/mpbpobfflnpcgagjijhmgnchggcjblin?hl=en
     • Firefox:
     – https://addons.mozilla.org/en-US/firefox/addon/http2-indicator/
     

     View Slide

173. Dev tools
     

     View Slide

174. Wireshark
     Using the TLS key file:
     https://jimshaver.net/2015/02/11/decrypting-tls-browser-traffic-with-wireshark-the-easy-way/
     

     View Slide

175. cURL
     https://curl.haxx.se/docs/http2.html
     

     View Slide

176. cURL
     https://daniel.haxx.se/blog/2018/01/15/inspect-curls-tls-traffic/
     

     View Slide

177. nghttp
     https://nghttp2.org/
     

     View Slide

178. Others
     • h2c (and wiretapping):
     - https://github.com/fstab/h2c
     • h2a: reverse proxy
     - https://github.com/summerwind/h2a
     • Conformance:
     - https://github.com/summerwind/h2spec
     • Serves and proxies:
     - Charles proxy: https://www.charlesproxy.com
     - MITM proxy: https://mitmproxy.org/
     - h2o: https://h2o.examp1e.net/
     - Envoy: https://www.envoyproxy.io/
     • http-wg
     - https://github.com/http2/http2-spec/wiki/Tools
     

     View Slide

179. What’s next?
     

     View Slide

180. 0.9 1.0 1.1 2.0
     HTTP
     Complexity
     HTTP version
     

     View Slide

181. 0.9 1.0 1.1 2.0
     HTTP
     Complexity
     My Age
     HTTP version
     

     View Slide

182. QUIC
     

     View Slide

183. QUIC
     

     View Slide

184. gQUIC vs iQUIC
     

     View Slide

185. gQUIC vs iQUIC
     • Monolithic
     • Google proprietary
     • Modularized
     • IETF standard
     

     View Slide

186. IP
     TCP
     UDP
     TLS
     HTTP/2
     QUIC
     TCP-like congestion
     avoidance, recovery
     HTTP/2 shim
     UDP
     QUIC
     TCP-like congestion
     avoidance, recovery
     Application (HTTP/2)
     QUIC crypto TLS 1.3
     gQUIC iQUIC
     http/2
     https://datatracker.ietf.org/meeting/98/materials/slides-98-edu-sessf-quic-tutorial/
     

     View Slide

187. View Slide

188. The promise of QUIC
     • Low latency connection setup
     - 0RTT (with TLS 1.3)
     • UDP
     - Addresses TCP’s head of line blocking in h2
     - More flexible congestion avoidance algorithms
     - “rich signaling for congestion control and loss recovery”
     • Everything authenticated and encrypted
     • Mitigating middle box tomfoolery
     • Connection migration and NAT rebinding
     

     View Slide

189. Some QUIC reading
     • https://dl.acm.org/citation.cfm?id=3098842
     • https://quicwg.github.io/
     • https://github.com/quicwg
     • And a video: https://vimeo.com/227461189
     

     View Slide

190. Questions
     • Has much changed?
     • Do we still have a lot to learn?
     • Do we still have a lot to do?
     • QUIC will fix everything, right?
     

     View Slide

191. Thank you
     

     View Slide