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

2020 - Evolution of Internet

2020 - Evolution of Internet

今後インターネットはどのように進化していくのか。
2020年をターゲットにし、以下2つの視点から最新の技術動向を解説します。
・プロトコルの歴史と今後の進化
・クライアントAPIの実装とPWA対応

※以下スライドの増補版として作成しています。
https://speakerdeck.com/ariaki/very-beginning-of-http2

Akira Morikawa

July 27, 2018
Tweet

More Decks by Akira Morikawa

Other Decks in Technology

Transcript

  1. 2020 2021 2022 2018 2019 ▲ ▼ Evolution of Internet

    2018. 07. 27 / #rosso @ariaki4dev CC-BY-4.0 Target Skill Level
  2. 1991 HTTP/0.9 1996 HTTP/1.0 1999 HTTP/1.1 2015 HTTP/2 1999 TLS/1.0 1996 SSL/3.0 1995 SSL/2.0 2008 TLS/1.2 2006 TLS/1.1 2018 TLS/1.3

    1981 TCP/4.0 , IPv4 1980 UDP/1.0 1998 IPv6 1974 TCP/1.0 2001 TCP/ECN Protocol Histories 2020 QUIC ???
  3. HTTP/0.9 HTTP/1.0 HTTP/1.1 HTTP/2 - 1991 年に登場 - GET メソッド

    - ステータスコードなし - ヘッダなし - Content-Type が指定できないので HTML のみ転送可 Histories
  4. HTTP/0.9 HTTP/1.0 HTTP/1.1 HTTP/2 - 1996 年に登場 ( RFC1945 )

    - HEAD / POST メソッドが追加された - PUT / DELETE は正式仕様ではなく参考仕様 - ステータスコードが追加された - ヘッダが追加された - HTML 以外の転送にも対応 - クッキーはまだない Histories
  5. HTTP/1.1 HTTP/2 GET /index.html HTTP/1.0 User-Agent: NCSA_Mosaic/2.0 (Windows 3.1) Request

    HTTP/0.9 HTTP/1.0 200 OK Date: Fri, 06 Jul 2018 19:00:00 GMT Server: CERN/3.0 libwww/2.17 Content-Type: text/html <HTML>HELLO WORLD</HTML> Response Histories
  6. HTTP/0.9 HTTP/1.0 HTTP/1.1 HTTP/2 - 1999 年に登場 ( RFC2068 )

    - PUT / DELETE / OPTIONS / TRACE / CONNECT メソッドが追加された - 1台の HTTPd で複数ドメインに対応した ( Host ) - コネクションの再利用に対応した ( Keep-Alive ) - Chunked レスポンスに対応した - 言語 / タイプ / エンコーディングのネゴシエーションに対応した - HTTP パイプラインに対応した - 1つの TCP 接続で複数 HTTP リクエストを応答を待たずに送信できる Histories
  7. GET /index.html HTTP/1.1 Host: ariaki.info Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 Accept-Encoding: gzip, deflate,

    br Accept-Language: ja,en-US;q=0.9,en;q=0.8 Cache-Control: max-age=0 HTTP/2 Request HTTP/0.9 HTTP/1.0 HTTP/1.1 Histories
  8. HTTP/1.1 200 OK Date: Fri, 06 Jul 2018 19:00:00 GMT

    Server: Apache Content-Type: text/html; charset=UTF-8 Cache-Control: private, max-age=0 Expires: -1 Connection: Keep-Alive <HTML>HELLO WORLD</HTML> HTTP/2 Response HTTP/0.9 HTTP/1.0 HTTP/1.1 Histories
  9. HTTP/0.9 HTTP/1.0 HTTP/1.1 HTTP/2 - 2015 年に登場 ( RFC7540 )

    - HTTP/1.1 との後方互換性を維持 - 多くの新機能や改善 Histories
  10. - ネゴシエーション方法として以下をサポート - h2c ( 非暗号通信 ) - Upgrade :

    初回は HTTP/1.1 接続し、Upgrade ヘッダで対応を通知 - Direct : クライアントから直接 HTTP/2 接続を指定 - h2 ( 暗号通信 ) - ALPN : TLS/1.2+ 拡張を使用した暗号化接続 ( Application-Layer Protocol Negotiation ) - NPN : TLS/1.2+ 拡張を使用した暗号化接続 ( Next Protocol Negotiation ) 概要 Negotiation
  11. h2c - Upgrade HTTP/1.1 101 Switching Protocols Connection: Upgrade Upgrade:

    h2c : Response GET / HTTP/1.1 Host: ariaki.info Connection: Upgrade, HTTP2-Settings Upgrade: h2c HTTP2-Settings: <<BASE64 ENCODED BINARY>> Request Negotiation
  12. h2 - ALPN ClientHello Handshake Message ServerHello ALPN Extention 通信プロトコル候補

    ALPN Extention 通信プロトコル決定 Negotiation 暗号化
  13. 暗号化 Negotiation h2 - NPN ClientHello Handshake Message ServerHello NPN

    Extention 通信プロトコル候補 NPN Extention 通信プロトコル決定
  14. Binary Frame TYPE FRAME DESCRIPTION 0 DATA リクエスト/レスポンスの本文 1 HEADERS

    リクエスト/レスポンスのヘッダ情報 2 PRIORITY ストリーム優先順位(※クライアントのみ送信可) 3 RST_STREAM ストリーム終了(※エラー時など) 4 SETTINGS 接続設定の変更 5 PUSH_PROMISE サーバプッシュ予告(※サーバのみ送信可) 6 PING 接続の生存状態を確認 7 GOAWAY 接続終了(※エラー時など) 8 WINDOW_UPDATE ウインドウサイズ変更 9 CONTINUATION サイズの大きい HEADERS / PUSH_PROMISE フレーム断片
  15. リクエストヘッダの基本形 Header Compression GET /index.html HTTP/1.1 Host: ariaki.info : HTTP/1.1

    :method GET :path / :scheme https :authority ariaki.info Accept */* : HTTP/2
  16. リクエストヘッダの送信方法 Header Compression - ヘッダ名は別途管理 ( Table ) し、2 回目以降は

    Index 指定 - Table 最大長は SETTINGS_MAX_HEADER_LIST_SIZE で指定 - 超過した場合は FIFO で削除 - ヘッダは Binary 形式 ( Binary Optimized Header Encoding ) - HPACK 圧縮
  17. リクエストヘッダ テーブル Header Compression - Index, Name, Value を持つテーブル構造 -

    静的テーブル - 使用頻度の高いヘッダ - Index ( 1 - 61 ) が規定されている - 動的テーブル - その他のヘッダデータ - Index ( 62 - ) を自動採番する - 2回目以降は Index を使って指定する
  18. 静的テーブル ( 一部抜粋 ) Header Compression +-------+-----------------------------+---------------+ | 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 | | +-------+-----------------------------+---------------+ | Index | Header Name | Header Value | +-------+-----------------------------+---------------+ | 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 | | https://tools.ietf.org/html/draft-ietf-httpbis-header-compression-12#appendix-A
  19. テーブル指定 Header Compression +-------+-----------------------------+---------------+ | Index | Header Name |

    Header Value | +-------+-----------------------------+---------------+ | 1 | :authority | | | 2 | :method | GET | | 4 | :path | / | | 7 | :scheme | https | :method GET :path / :scheme https :authority ariaki.info x-test-header DEBUG : 2 GET 4 / 7 https 1 ariaki.info x-test-header DEBUG ( ※次回以降は 62 を指定 ) :
  20. 概要 Multi Plexing - HTTP/1.1 - セッション毎に 1 リクエストずつ処理 -

    同一ドメインに対して同時 6 セッション ( Domain Sharding ) - サーバはリクエスト順に応答しなければならない - HTTP/2 - 同一セッション内で同時に複数 ( 100+ ) リクエスト可 - リクエスト時にレスポンス優先順位を設定可
  21. Multi Plexing (1) GET /index.html (2) GET /app.css (3) GET

    /app.js (1) GET /index.html (2) GET /app.css (3) GET /app.js (4) GET /logo.png (4) GET /logo.png 1セッション内で 複数リクエスト 複数セッションを 平行リクエスト ※実際は 6 程度 * Response all HTTP/1.1 HTTP/2
  22. HTTP/2 の課題 Problems - Head of Line Blocking 問題 -

    レスポンス完了まで後続のリクエストを受け付けられない - 小さなレスポンス圧縮によるサイドチャネル攻撃 - CRIME / BREACH 等 - Server Push: キャッシュ済データを送信する問題 - 103 Early Hints 等で改善中 - Priority: 優先度を喋らないクライアントに対する応答方法がサーバ実装任せ
  23. OSS Server Products Compatibility - Apache HTTP Server 2.4.17+ (

    mod_http2 ) - nginx 1.9.5+ - NodeJS 9+ ( node-http2 ) - Apache Tomcat 8.5.32+ ( and more )
  24. SSL/3.0 - 1996 年に登場 ( RFC6101 ) - 2014年10月に仕様上の脆弱性が発見された -

    2015 年 6 月に使用禁止された ( RFC7568 ) ※ Force Downgrade ( POODLE 攻撃 ) の対象となる為 ※ SSL/2.0 も、2011 年 3 月に使用禁止されている ( RFC6176 ) Histories TLS/1.0 TLS/1.1 TLS/1.2 TLS/1.3
  25. SSL/3.0 - 1999 年に登場 ( RFC2246 ) - 拡張仕様が追加された (

    RFC3546 ) - 必須共通鍵暗号:TLS_DHE_DSS_WITH_3DES_EDE_CBC_SHA - 一部の鍵交換アルゴリズム廃止 ( FORTEZZA ) - ハッシュ計算方法の変更 - CBC モードにおけるパディング方法の変更 - 2018 年 6 月 30 日をもって使用禁止された ( PCI-DSS v3.2 ) Histories TLS/1.1 TLS/1.2 TLS/1.3 TLS/1.0
  26. SSL/3.0 - 2006 年に登場 ( RFC4346 ) - 必須共通鍵暗号:TLS_RSA_WITH_3DES_EDE_CBC_SHA -

    共通鍵暗号に AES 追加 - CBC モードにおけるパディング方法の再変更 ( POODLE 対策 ) - セッション再開の規制緩和 - 既に脆弱性が発見され、TLS/1.2 への移行が望まれている Histories TLS/1.2 TLS/1.3 TLS/1.0 TLS/1.1
  27. SSL/3.0 - 2008 年に登場 ( RFC5246 ) - 必須共通鍵暗号:TLS_RSA_WITH_AES_128_CBC_SHA -

    脆弱なハッシュの利用箇所削減 ( MD5, SHA-1, 等 ) - CipherSuite によりハッシュ方式設定 - 署名方式の解釈方法変更 - CBC に加えて、GCM / CCM 追加 Histories TLS/1.1 TLS/1.3 TLS/1.0 TLS/1.2
  28. SSL/3.0 Histories TLS/1.1 TLS/1.2 TLS/1.0 TLS/1.3 - 2018 年 3

    月に正式勧告 ( draft-28 ) - 必須共通鍵暗号:TLS_AES_128_GCM_SHA256 - OpenSSL 1.1.1 で実装予定 - 現在は pre-8 ( 2018-06-20 )
  29. - CBC, IV - RC4, DSA - MD5, SHA-1, SHA-224

    - PFS / PSK 以外の鍵交換 - SSL3.0 以下のプロトコルサポート ※ 危殆化(きたいか)… 技術進歩によって危険性が向上すること 危殆化アルゴリズムの廃止 Discontinued
  30. - データ圧縮 ( CRIME ) - 再ネゴシエーション - セッション ID

    による再開 など ( ※ TLS / SSL の既知の脆弱性 ) その他、多数の機能を廃止 Discontinued
  31. - QUIC は UDP 上に実装される - コネクション確立のレイテンシが低い ( 最速 0-RTT

    ) - 強力な輻輳制御/再送制御 - ストリーム/コネクションフロー制御 - Head of Line Blocking が発生しない多重化 - ヘッダ/ペイロードの暗号化と認証 - 前方誤り訂正 - 接続マイグレーション ( 停止/再開 ) 概要 QUIC Feature
  32. - まだ各社での独自研究段階 - 既にインターネットトラフィックの 7% が QUIC - Google, Akamai,

    LINE, 等 - 最新ドラフトを 2018 年 11 月に IEST / IESG 提出予定 - 現在 draft-13 ( 2018 年 6 月 28 日時点 ) - 初期バージョンは機能が絞られる予定 - 対応プロトコルを HTTP のみに限定 実装状況 QUIC Feature
  33. Ethernet IPv4 / IPv6 UDP TCP TLS/1.3 TLS/1.3 HTTP/2 QUIC

    HTTP/1.1 Semantics Protocol Stack ( Probably in 2020 ) + DOH
  34. [ HTTP/2 ] - https://developers.google.com/web/fundamentals/performance/http2/?hl=ja - https://mozilla.github.io/meao/2017/06/26/http2/ - https://developer.mozilla.org/ja/docs/Web/HTTP/Overview [

    TLS/1.3 ] - https://wiki.openssl.org/index.php/TLS1.3 - https://tools.ietf.org/html/draft-ietf-tls-tls13-28 - https://www.ipa.go.jp/security/ipg/documents/ipa-cryptrec-gl-3001-2.0.pdf [QUIC] - https://datatracker.ietf.org/wg/quic/about/ - http://www.soumu.go.jp/main_content/000485068.pdf - http://www.soumu.go.jp/main_content/000485069.pdf Appendix
  35. 概要 - 単一の規格ではなく、以下を実現する Web アプリ仕様の総称 - ダウンロード動作の必要なく Web ベースで動作 -

    ストアを介さずアプリ提供可能 - Native アプリと比べてデータ転送量が少ない - Native アプリに近い機能が実装できる - ホーム画面登録 / オフライン利用 - ハードウェア制御 - 認証 / 決済 / Push 通知 / 等
  36. 認証の3要素 1. 知識認証 ( SYK: Something You Know ) 例

    ) パスワード、暗証番号 2. 所有認証 ( SYH: Something You Have ) 例 ) USB ドングル、SMS 3. 生体認証 ( SYA: Something You Are ) 例 ) 指紋、虹彩 https://yubikey.yubion.com Authentication
  37. APIs - Credential Management API - ブラウザに保存されたパスワードを JavaScript から利用/管理する -

    Web Authentication API - 公開鍵を用いた認証データを JavaScript から利用/管理する - Mozilla Firefox 60 ( 2018 年 5 月 10 日 ) ではじめて実装 - Google Chrome 67 ( 2018 年 5 月 29 日 ) より対応 Authentication
  38. APIs - Payment Request API - ブラウザ上で支払情報 ( 支払方法/ 配送先住所

    / 配送方法 ) を管理する - https://youtu.be/hmqZxP6iTpo - Payment Handler API ( Chrome 68+ ) - ブラウザ上で支払処理を実行する - https://youtu.be/undqD82MBvA Payment
  39. Service Worker - Service Worker - Web ページとは別にバックグラウンドプロセスで実行するスクリプト - ユーザインタラクションを必要としない機能を実現

    - プッシュ通知 - バックグラウンド同期 - App Shell モデルの実装 - リソースのキャッシュやプリロード管理 - コンテンツとナビゲーションの分離 Workers
  40. Other APIs - Manifest - Web アプリの設定ファイル - ホームアイコン -

    スプラッシュ画面とテーマ色 - Worklet - 描画や音声処理などの重い処理を別プロセスで実行 Workers
  41. - Web Bluetooth API … Bluetooth デバイス操作 - Web USB

    API … USB デバイス操作 - UserMedia API - Image Capture API … カメラのズーム - Shape Detection API … 顔/文字/バーコード等のリアルタイム認識 - Web xR … AR/VR を Web 上で実現する APIs Hardware
  42. - Performance API - Navigation Timing API … Web ナビゲーション時間を計測

    - Resource Timing API … リソース読込時間を計測 - User Timing API … 指定区間の実行時間を計測 - Performance memory API … メモリ使用状況の確認 - Page Lifecycle API … ページの生存期間/状態を定義 ( Chrome 68+ ) - Network Information API … 通信状況の確認 APIs Performance