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

Revisiting HTTP/2

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.

More Decks by London Web Performance Group

Other Decks in Technology

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