HTTPをしゃべろう～Firefoxになるために～

平成28年10月1日(土): CookHack #1 〜火狐(フォクすけ)とパイを焼きまくれ！〜 にて話しました

Transcript

1. HTTPをしゃべろう ～Firefoxになるために～ By @tera_3939
2. 自己紹介 • お名前 • @tera_3939 • 所属 • Firefox学生マーケティングチーム • Rustはむつかしい…… • Webできない……
3. はなすこと • 自己紹介 • Firefoxが何をしているか知る • HTTPについて • リクエスト • レスポンス • 実際にしゃべる
4. Firefoxになるためには
5. まず何をしているか知ろう
6. Firefoxが何をしているのか HTTP・HTTPS とかで リソースを取ってくる レンダリングエンジンで ちょめちょめ Webページを表示 詳しくは：“ブラウザの仕組み: 最新ウェブブラウザの内部構造” http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/
7. Firefoxが何をしているのか HTTP・HTTPS とかで リソースを取ってくる レンダリングエンジンで ちょめちょめ Webページを表示 今回は ここになる 詳しくは：“ブラウザの仕組み: 最新ウェブブラウザの内部構造” http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/
8. くわしいひとへ • 今回HTTPSのお話はないです • HTTP/2のお話もないです • (というか僕がまったくわからない)
9. HTTPとは • HyperTextTransferProtocol • ステートレス • C/Sモデル • リクエストとレスポンスで成り立っている • テキストデータでやり取り • TCPで80番ポート • 今はもう大概HTTPS
10. しくみ クライアント サーバー リソースちょーだい あいよ リクエスト レスポンス
11. 実際に見てみる • Firefoxの開発ツール(F12)のネットワークで確認
12. リクエスト • クライアントからサーバーに要求をする • /index.htmlをちょーだい、とか
13. 要求例 GET /hoge/fuga.html HTTP/1.1 // request-line Host: foobar.co.jp // header-field
14. request-line • どんなリクエストなのか表す • データを取得するだけとか、データを送信したいとか
15. request-line method SP request-target SP HTTP-version CRLF SP: 半角スペース CRLF: 改行文字
16. request-line • method • サーバーに要求する動作の指定 ex) GET, POST • request-target • 要求するコンテンツの場所 ex) /, /img/hoge.png • HTTP-version • 使用するプロトコルのバージョン ex) 1.1
17. header-field • リクエスト自身の情報を表す • HostとかUser-Agentとか
18. header-field field-name “:” OWS field-value OWS OWS: 省略可能な半角スペース
19. header-field • field-name • HostとかUser-Agentとか • field-value • ドメイン名とか
20. レスポンス • サーバーからの応答 • 問題ないよとか、そんなもんねぇよとか
21. 応答例 HTTP/1.1 200 OK // status-line Date: Tue, 20 Sep 2016 14:25:52 GMT // header-field Content-Type: text/html ．．．
22. status-line HTTP-version SP status-code SP reason-phrase CRLF SP: 半角スペース CRLF: 改行
23. status-line • HTTP-version • HTTPのバージョン ex) HTTP/1.1とか • status-code • サーバーの応答結果 ex) 200とか404とか • reason-phrase • status-codeに対応した単語とか ex)OKとかNOT FOUNDとか
24. header-field • field-name • Content-TypeとかDateとか • field-value • text/htmlとか
25. まとめると
26. リクエストを送ると GET /hoge/fuga.html HTTP/1.1 // request-line Host: foobar.co.jp // header-field
27. 応答が来る HTTP/1.1 200 OK // status-line Date: Tue, 20 Sep 2016 14:25:52 GMT // header-field Content-Type: text/html ．．．
28. これをさえあれば • HTTPがしゃべれる！！
29. これをさえあれば • HTTPがしゃべれる！！ ＝Firefoxになれる！！！
30. 実際に“なってみる“
31. telnet • TCPを話せる • 相手につないでテキストデータを送れる • デフォルトのポート番号は23番
32. $ telnet domain.name 80
34. Firefoxになった！！(?)
35. 5分9厘ぐらいは……
36. まとめ • Firefoxは偉大
37. 詳細 • RFC（Request for Comments） • HTTP/1.1は7230~7235に書いてある（らしい） • 結構みっちり決まってる • 英語（死）