今回の学習のゴール

NetworkのGeneralがわかるようになる

1. HTTPの仕組み

HTTP

HTTPとは、HyperText Transfer Protocolの略称。
webクライアントであるブラウザとwebサーバ間で行われるデータのやり取りのルールのこと。ハイパーテキストを転送するためのプロトコルである。

RequestとResponse

webクライアントは、HTTPという決められたルールにしたがって、webサーバーにデータをリクエストする
webサーバは、webクライアントへリクエストされたデータ（HTMLファイルや画像など）をレスポンスする
リクエストもレスポンスも、HTTPヘッダーとデータ本体（ボディ）の2つに情報が別れている

HTTPヘッダー

Requestのヘッダー
- Webブラウザ側でサポートするデータのタイプ、データの圧縮方法、ブラウザの種類など、Webサーバーに送るためのデータが格納されている
Responseのヘッダー
- サーバの種類、返信するデータのタイプ、データの圧縮方法などのデータが格納されている

ボディ

Requestのボディ
- Webサーバーに送るためのデータが格納されている
- ex. Webページ上の入力欄に入力されたテキスト情報がある場合、その情報をWebサーバに送る
Responseのボディ
- HTMLや画像ファイル、動画ファイルなどのデータが格納されている

メソッド

クライアントが行いたい処理をサーバーに伝える役割
メソッドの主な種類
- GET : URI※のヘッダーデータとボディデータを取得する
- POST : URIにリソースを追加する
- PUT : URIの内容を作成、更新する
- DELETE : URIの内容を削除する
- HEAD : URIのヘッダーデータを取得する
- OPTIONS : URIに対して利用できるメソッドの一覧を取得する
- ※URI（Uniform Resource Identifier）は、インターネット上のデータやサービス、機器などの所在情報を識別する書き方のルールの総称で、URLは、URIで定められたルールに従って書かれたり使われたりする

ステータスコード

HTTPステータスコードとも呼ばれる
HTMLを表示する前にブラウザが受信する3桁の番号のこと
HTML受信前に、ステータスコードを受信することでブラウザは正しい処理ができるようになる
コードには以下のような意味が付与されている
- 100番台 : 情報提供　続きの情報があることを伝える
- 200番台 : 正常処理 Webサーバーがリクエストの処理ができたことを伝える
- 300番台 : リダイレクト処理別のURLへリクエストし直すように要求する
- 400番台 : リクエストエラークライアントのリクエストに問題があり、処理ができなかったことを伝える
- 500番台 : サーバーエラーサーバー側に問題があり処理できなかったことを伝える
メジャーなステータスコード

ステータスコード	結果	説明
200	OK	リクエストが成功要求に応じた情報が返される
301	Moved Permanently	リクエストしたリソースが恒久的に移動されている（移動先のURLが表示される）
302	Found	リクエストしたリソースが一時的に移動されている
400	Bad Request	定義されていないメソッドが使用されている等、リクエストが不正である
401	Unauthorized	認証が必要
403	Forbidden	アクセス権限がない等、リクエストはしたが処理できない状態
404	Not Found	指定したURLのデータが存在しない
500	Internal Server Error	サーバー内部のエラー
503	Service Unavailable	サービスが一時的に過負荷やメンテナンス等で使用不可能な状態

※告白に学ぶ HTTP Status Code -エラー編-を参考にさせていただくとイメージがしやすい

主要なヘッダー

Accept : クライアントが理解できるデータ形式をMIMEタイプで伝える
- MIMEタイプ : メディアタイプのこと。videoやtextなどを表す
Accept-Language : クライアントが理解できる言語や推奨されているロケール（言語や国・地域の設定）の種類を示す
- ex. ja,en-US;q=0.9,en;q=0.8
  - q=0.9は、品質値といい、数が大きいほど優先度が高い
Host : リクエスト先のサーバ名。DNS名を利用する。クライアントがリクエストするサーバーが識別される
- ex. www.example.com
- にて詳細をまとめた
User-Agent : ブラウザの種別やバージョン、プラットフォームなどの情報をサーバに伝える
- ex. Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36

※ヘッダー情報は検証ツールのNetworkタブより確認できる

2. HTTPSによる暗号化（セキュリティ）について

HTTPSとは

HTTP over SSL/TLSの略称。HTTP通信をより安全に行うためのプロトコル

SSL/TLS

SSLは、Secure Sockets Layerの略称。TLSは、Transport Layer Securityの略称。
どちらも、インターネット上でデータを暗号化して送受信する仕組み（プロトコル）である。重要なデータを暗号化して、サーバとPC間での通信を安全に行なうことができる。

SSL/TLSの役割
- 暗号化通信
- サイト運営元の確認
SSL/TLSの種類
- ドメイン認証SSL
  - 低コストですぐにセキュリティを強化できる
- 企業実在認証SSL
  - 個人情報の送受信を暗号化し、公式サイトのセキュリティ強化できる
- EV SSL(Extended Validation SSL)
  - ブラウザのアドレスバーを緑色にして運営団体名を表示させて、一目で安全性をアピールできる

※SSLとTLSの違いについては別ページにて

証明書の存在と役割

証明書とは、認証局が、情報通信先のサーバーのサイト運営組織が実在していることを証明し、WebブラウザとWebサーバー間、または、サーバ同士間でSSL暗号化通信を行うための電子証明書
HTTPSには、SSL証明書が必要
鍵を用いて送信される情報を暗号化できる

HTTPとHTTPSの違い

HTTP
- 送信される情報が平文（暗号化されていないテキスト）である
- 平文であると、インターネット上で入力した情報が、第三者による盗聴や改ざん、なりすましなどの攻撃をうける危険がある
HTTPS
- 送信される情報が暗号化されている
- 送信される平文は暗号化され、送信先で復号化（暗号化されたものを平文に戻す）される
- 情報は暗号化されているため、第三者による攻撃をうける危険性がない

3. 検証ツール NetworkのGeneralについて

今回の学習のゴールである「NetworkのGeneralがわかるようになる」について
書き残しておく。
検証ツールのNetworkタブでこれまでに述べたHTTPヘッダーやボディの情報を確認することができる。今回はQiitaのトップページのHTTPヘッダーやボディ情報を確認する方法を例としてあげる。手順は以下の通り。

shift + command + c または右クリックより検証を押下し検証ツールを表示
検証ツールの Network タブを表示
command + R でページを再読み込み
Name を選択すると General をみることができる

NetworkタブのGeneralに記載がある情報

Request URL : 現在アクセスしているページのURL
Request Method : クライアントが行いたい処理をサーバーに伝える
Status Code : HTMLを表示する前にブラウザが受信する3桁の番号
Referrer Policy : Refererヘッダをリクエストにどれだけ含めるか制御する
- referrer : HTTPヘッダーの情報の一つで、ユーザーがWebサイトにアクセスした際に、そのユーザーがたどる元(参照元)になったページの情報
- ex. SSL/TLSから非SSL/TLSのページに移動する時はreferrerを送らないなどの制御をする

HTTP/HTTPSについて学んだことまとめ

目次