Download as PDF, PPTX
![HTTP in TCP/IP
• そんなWebのイケてるプロトコルたちをまとめて
TCP/IPと呼んだりします
• HTTPもTCP/IPの一部です
• TCP/IPを制するものはWebを制する
• [ 検索 ] [ マスタリングTCP/IP ]](https://image.slidesharecdn.com/http-150730075534-lva1-app6891/85/HTTP-47-320.jpg)
![GET /top/login HTTP/1.1
User-Agent: Telnet [ja]
Host: sota1235.com
name=sota&hobby=aiko](https://image.slidesharecdn.com/http-150730075534-lva1-app6891/85/HTTP-53-320.jpg)
![GET /top/login HTTP/1.1
User-Agent: Telnet [ja]
Host: sota1235.com
name=sota&hobby=aiko
メソッド URI プロトコルバージョン](https://image.slidesharecdn.com/http-150730075534-lva1-app6891/85/HTTP-54-320.jpg)
![GET /top/login HTTP/1.1
User-Agent: Telnet [ja]
Host: sota1235.com
name=sota&hobby=aiko
リクエストヘッダーフィールド
メソッド URI プロトコルバージョン](https://image.slidesharecdn.com/http-150730075534-lva1-app6891/85/HTTP-55-320.jpg)
![GET /top/login HTTP/1.1
User-Agent: Telnet [ja]
Host: sota1235.com
name=sota&hobby=aiko
リクエストヘッダーフィールド
エンティティ
メソッド URI プロトコルバージョン](https://image.slidesharecdn.com/http-150730075534-lva1-app6891/85/HTTP-56-320.jpg)
More Related Content
![[BurpSuiteJapan]HTTP基礎入門](https://cdn.slidesharecdn.com/ss_thumbnails/http-170529011332-thumbnail.jpg?width=640&height=640&fit=bounds)
HTTP入門
- 1.
- 2.
- 3. 目標 • 「ブラウザでURLを打ち込み、ページが出る」まで に何が起きているのかを知る • HTTPの特徴を知る •HTTPにできること/できないことを知る
- 4. アジェンダ ✓ HTTP is ✓HTTPの役割 ✓ Web通信の流れ ✓ HTTPの実態 ✓ HTTPにできる / できないこと ✓ まとめ
- 5.
- 6. HTTP is • HTTP= Hyper Text Transfer Protocol • HTTPとはWebブラウザとWebサーバの間でHTML などのコンテンツの送受信に用いられる通信プロト コルである。
- 7. HTTPはWebと共に生まれた • HTTPは1989年3月に誕生した • 遠隔地で研究者同士の知識を共有するための仕組み としてWWWが考案された •構成要素としてHTML, HTTP, URLが提案された
- 8.
- 9.
- 10. 郵便で言うプロトコル • 送信者 • 郵便物に住所と名前を書いて、ポストに入れる •受信者 • ポストを用意する • ポストに入った郵便物を受け取る
- 11.
- 12.
- 13.
- 14.
- 15. クライアントサーバモデル • Web通信にはクライアントとサーバが存在する • サーバはリソースを配信する •クライアントはリソースを問い合わせる • クライアントが何もしない限り通信は発生しない
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24. いったんおさらい • Web通信にはクライアントとサーバが存在する • クライアントがサーバにリクエストを送る •サーバがクライアントにレスポンスを返す • リクエスト/レスポンスはHTTPで定められたルール で作られたHTTPメッセージを使用する
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33. Web通信の流れ ① クライアント(ユーザ)がURLを入力する ② そのURLが指すサーバがどこにあるのか調べる ③調べたサーバと通信開始の信号を送り合う ④ リクエストを送る
- 34.
- 35. ②送信先を調べる • URLは人間が分かりやすいように考えられたもの • 機械はURLからサーバの場所を知ることができない •URLをもちいてIPアドレスをDNSサーバに問い合わ せる必要がある • ※厳密にはURL中に含まれるHost名
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46. Not only HTTP •HTTPはリクエスト/レスポンスメッセージで使われ るプロトコル • 通信先を探したり、実際に通信を行うのは別のプロ トコルが担当している • Webの通信は様々な技術によって成り立っている
- 47. HTTP in TCP/IP •そんなWebのイケてるプロトコルたちをまとめて TCP/IPと呼んだりします • HTTPもTCP/IPの一部です • TCP/IPを制するものはWebを制する • [ 検索 ] [ マスタリングTCP/IP ]
- 48.
- 49. HTTPメッセージ is テキスト •HTTPメッセージの実態はテキスト • HTTPのルールに則って作られたテキストがHTTP メッセージ
- 50.
- 51. GET / HTTP/1.1 Host:sota1235.com HTTP/1.1 200 OK Date: Thu, 30 Jul 2015 02:47:55 GMT Server: Apache Last-Modified: Thu, 04 Dec 2014 06:50:12 GMT ETag: "700d9f-3776-5095e5f2e5100" Accept-Ranges: bytes Content-Length: 14198 Content-Type: text/html <!DOCTYPE html> … クライアント HTTPリクエスト HTTPレスポンス cosme.net @210.129.109.21
- 52.
- 53. GET /top/login HTTP/1.1 User-Agent:Telnet [ja] Host: sota1235.com name=sota&hobby=aiko
- 54. GET /top/login HTTP/1.1 User-Agent:Telnet [ja] Host: sota1235.com name=sota&hobby=aiko メソッド URI プロトコルバージョン
- 55. GET /top/login HTTP/1.1 User-Agent:Telnet [ja] Host: sota1235.com name=sota&hobby=aiko リクエストヘッダーフィールド メソッド URI プロトコルバージョン
- 56. GET /top/login HTTP/1.1 User-Agent:Telnet [ja] Host: sota1235.com name=sota&hobby=aiko リクエストヘッダーフィールド エンティティ メソッド URI プロトコルバージョン
- 57.
- 58. HTTP/1.1 200 OK Date:Tue, 10 Jul 2015 06:50:15 GMT Content-Length: 362 Content-Type: text:html <html> ………
- 59. HTTP/1.1 200 OK Date:Tue, 10 Jul 2015 06:50:15 GMT Content-Length: 362 Content-Type: text:html <html> ……… プロトコル バージョン ステータス コード ステータスコードの 説明
- 60. HTTP/1.1 200 OK Date:Tue, 10 Jul 2015 06:50:15 GMT Content-Length: 362 Content-Type: text:html <html> ……… プロトコル バージョン ステータス コード ステータスコードの 説明 レスポンスヘッダーフィールド
- 61. HTTP/1.1 200 OK Date:Tue, 10 Jul 2015 06:50:15 GMT Content-Length: 362 Content-Type: text:html <html> ……… プロトコル バージョン ステータス コード ステータスコードの 説明 レスポンスヘッダーフィールド ボディ
- 62. いつ使うの？ • はっきり言ってほとんど使う場面はないです • でもWebと関わる人は知っておくべき技術です •以下のものは押さえときたい • メソッド • ステータスコード • 主要なヘッダー
- 63. ヘッダーを意識する • 普段の開発で意識しとくとよいのがヘッダー • あなたの想像よりも多機能(きっと) •様々なヘッダー設定することで通信を制御したり、ブラウザ に特定の振る舞いを命令することができる ✓ キャッシュ ✓ CSP ✓ リソース読み込み元の制限(Same Origin Policy) ✓ ファイル転送方式(gzipによる圧縮等)
- 64.
- 65.
- 66.
- 67.
- 68.
- 69. GET / HTTP/1.1@cosmeのトップページを取得
- 70. GET / HTTP/1.1HTML上のリソース全てにする • ページで使われるjs • ページで使われるcss • ページで使われる画像 も全部！
- 71. GET / HTTP/1.1HTML上のリソース全てにする • ページで使われるjs • ページで使われるcss • ページで使われる画像 も全部！ 問題 使うリソースの数に比例してページ読み込みが 遅くなる
- 72.
- 73.
- 74.
- 75. クライアント サーバ 問題 同じ相手とやりとりしてるのにリクエストごとに毎回 TCP通信が発生する =IP逆引きもTCP確立もやり直し
- 76. HTTP通信の特徴 • HTTPは状態を保持しない • HTTPはステートレスなプロトコル •サーバは以前の通信内容を覚えない
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85. 諸行無常 • 時代が変わるにつれてHTTPだけじゃ対応できな くなってきた • そもそもHTTPが古すぎる •今主流のHTTP/1.1が策定されたのは1997年 • とてもじゃないがHTTPだけではそれらのサービ スを実装できない
- 86. 諸行無常 • 時代が変わるにつれてHTTPだけじゃ対応できな くなってきた • そもそもHTTPが古すぎる •今主流のHTTP/1.1が策定されたのは1997年 • とてもじゃないがHTTPだけではそれらのサービ スを実装できない
- 87.
- 88.
- 89.
- 90.
- 91.
- 92. TCP通信の省略 • HTTP/1.1であればConnectionヘッダーで制御可能 • Connection:Keep-Alive • 特に指定がなくてもほとんどの環境で自動的に適用 されます
- 93.
- 94.
- 95. セキュアな通信 • HTTP/1.1であればBASIC認証, DIGEST認証が使用可 能 •HTTPの段階でセキュアに認証するために導入された • でも全然セキュアじゃないので使わないでください
- 96. セキュアな通信 • BASIC認証 • パスワードが平文でHTTPメッセージに乗っかる •DIGEST認証 • パスワードはメッセージに乗らないが認証トークンはメッ セージに乗っかる いずれも盗聴されたら終わり 認証機構をHTTPのみで実装するのはやめましょう
- 97.
- 98. できないこと • 状態保持(ステートフルな通信) • セキュアな通信 •サーバプッシュ • 通信の並列 / 多重化
- 99.
- 100.
- 101.
- 102.
- 103.
- 104. Cookie • ログイン情報やECのカート情報をCookieに入れてお き、次回以降は常にCookieも含めて通信する • 状態保持ができ、ステートフルな通信を実現できる •Cookieには有効期限をつけたりJSから読み込めなく したりすることもできる
- 105. セキュアな通信 • HTTPS通信で実現できる • HTTPS= HTTP + SSL / TLS • 複数プロトコルを組み合わせ、暗号化通信を実現する • BASIC, DIGESTと違い盗聴されても大丈夫！ • ただし導入にはコストがかります( ꒪⌓꒪)
- 106. サーバプッシュ • JavaScriptのAjaxによって実現される • 手法がいくつか存在する •Polling / Comet(Long Polling) / WebSocket • それぞれの長所 / 短所を知り、使い分けるのが大事 • 選択肢はComet or WebSocket
- 107. 通信の並列/多重化 • HTTP/1.1までで実現する方法はないです(´・ω・｀) • のでフロントをデザインする際はリソースの読み込 み順や通信量を意識する必要がある •ただしモダンなブラウザでは通信の並列化を行って いる
- 108.
- 109.
- 110. 通信の並列/多重化 • だいたいのブラウザでは6個まで処理できる • 7つ目のリクエストは6個のうちどれかが完了するま でWaiting状態になる •ページが重い時はHTTPリクエストの所作を見るのを おすすめします
- 111.
- 112. Web通信で大事なこと • Web通信はクライアント/サーバがリクエスト/レスポ ンスをやりとりすることで実現される • リクエスト/レスポンスにHTTPが使用される •クライアントからアクションを起こさない限り通信 は発生しない
- 113. HTTPで大事なこと • HTTPはステートレスなプロトコル • HTTPメッセージの実態はテキスト •HTTPの役割を理解し、できる/できないことを知る
- 114.
- 115.
- 116. HTTP/2.0 • 今までできなかったことができるようになるらしい • サーバプッシュ •ストリームによる通信の多重化 • ボディのバイナリ化による高速化 • リソース読み込み優先順位付け
- 117.
- 118.