こんにちは！
web開発学習中のゆういちと申します。
この記事ではWeb技術の基盤となるHTTPについて簡単に解説し、
特に重要な「ヘッダ」の役割や具体例を紹介します。
もしも間違いなどありましたらご指摘ください。
こちらの記事はウェブ開発初学者が書いたものです。
同じく学習中の方に参考にして頂きたいです。
①HTTPとは
インターネット上で通信を行うためのプロトコル(取り決め事)のひとつです。
データを正しい相手に正しい状態で届けるために、様々なことが決められています。
これらを理解して正しく設定する事で、WEBサイトやアプリを適切に構築できます。
実際にはHTTPSとして内容を暗号化することにより、第三者に改ざん・盗聴されてしまうリスクを抑えた上で通信が行われます。
この記事ではHTTPの部分に着目して見ていきます。
②HTTPで通信が行われる流れ
私たちはWEBページを表示・閲覧するためにブラウザを使用します。
ブラウザに見たいページのURLを入力するとHTTPリクエストが作成されて送信されます。
URLのホスト部分はDNSなどの仕組みによって名前解決されてIPアドレスになります。
IPアドレスをもとにインターネット上の経路を複数のルーティングをたどってWEBサーバーに届きます。
ルーターは「ヘッダ」の「Host」をもとにルーティングを行います。
リクエストを受け取ったWEBサーバーは、URLやヘッダを見て処理を行った上でレスポンスを作成して返します。
そのレスポンスを受け取ったブラウザは、ヘッダの情報に従ってデータを解釈したものをユーザーに表示してくれます。
このように、リクエストとレスポンスが往復でセットになっています。
しかしHTTPでは各通信がすべて独立しています。
つまり通信一回ごとに必要な情報を全て含める必要があります。
その為必要な情報をヘッダに、渡したいデータをボディ(かURL)に正しくセットする必要があります。
URLをセットすることで通信が届く仕組みになっていますが、
HTTP自体はアプリケーション層のプロトコルであり、
届いた後にどのように処理を行うのかを定めています。
③ヘッダとは
ヘッダはリクエストやレスポンスの中にある、キーと値のペアの集合です。
決められたキーで値を設定することで、その通信を受け取った相手に処理してほしい内容を伝えることができます。
例えば"Content-Type"であれば、データのファイルタイプを指定します。
コンピュータ上のデータは、データ本体ではなく拡張子やメタ情報など別の場所にデータ形式を記述するのが一般的です。
HTTPにおいてはヘッダがそのデータ形式を記述する場所として利用されます。
このような必要な設定を忘れるとデータの解釈に失敗したり、セキュリティリスクが発生したりします。
④ボディとは
ボディにはデータ本体を記述します。
ヘッダで指定したデータを正しくセットします。
なおGETのリクエストではボディは使用できません。
⑤主なヘッダの項目
Cookie
名前と値のペアで設定します。
追加情報としてDomain,Path,HttpOnly,Secureなどいろいろな項目があり、
Cookieを発行する用途によって適切に設定します。
認証情報などのほかにもユーザーの設定や操作などの情報の保存にも使用されます。
Cookieはブラウザのストレージの専用領域に保存されます。
ブラウザはURLにリクエストを送信する際にDomainとPathにマッチしたCookieがあると、それをリクエストヘッダにセットします。
Set-Cookie
サーバーがレスポンスに設定することでブラウザにCookieとして保存するように指示できる項目です。
Host
リクエストが送信される先のサーバーのホスト名とポート番号を指定します。
ポート番号が省略された場合はスキーマに対応した番号が使用されます。
Referer
リクエストが送信された元のURLが記述されます。
分析などに利用されます。
Origin
リクエストの送信元のオリジンが記載されます。
オリジンとは、URLのスキーマ・ホスト・ポートの組み合わせです。
これら全てが一致している場合はオリジンが同じと見なされます。
Refererと似ていますが、こちらはセキュリティの観点で利用されます。
特にCORS(異なるオリジンとのデータ通信に関するセキュリティの仕組み)との関連が深いです。
Access-Control-Allow-Credentials
送信先でCookieなどの資格情報を別のリクエストに含めることを許可する場合に記述します。
Authorization
認証情報を記述します。
Basic認証やBearer認証などで使用されます。
スキーマ名 + 本文の形式で値にセットします。
Content-Disposition
取得したリソースファイルをどのように取り扱うかを指定します。
既定ではページ上で表示ですが、ファイルとして保存する指定も可能です。
Content-Type
bodyのメディアタイプを記述します。
- application/json
- multipart/form-data
- text/html
- image/jpeg
- text/css
- text/javascript
ページの表示に必要なcssやJavaScript、画像ファイルなどもこれによりHTTPで届けられるわけですね。
Content-Encoding
bodyのデータの圧縮方法を記述します。
Content-Length
bodyのデータの長さを記述します。
⑥まとめ
ヘッダの様々な設定は自動で行われることも多いですが、
フレームワークなどの利用時にも何かと必要になります。
HTTP技術のより深い部分やセキュリティリスクを知るきっかけにもなります。
MDNを見るともっと色々なヘッダの項目を知ることができます。
これらの理解も深めつつ正しくフレームワークを使いこなして、
WEBサイトやアプリケーションの開発を行いたいですね！
最後までご覧いただきありがとうございます。
- リクエストとレスポンスがセットである
- 必ずヘッダがあって中に大切な設定が書いてある