今回はHTTPヘッダの種類と基礎についてざっとまとめていきます。
HTTPヘッダとは、サーバーとクライアント間で送信される、「追加情報」「指示や命令」「お願い」などを書く場です。
HTTPは様々な情報をやり取りしますが、実態はこのヘッダーで挙動を変化させて情報をボディで送信する構造になっています。
ヘッダーには色々な種類の情報があるので、デベロッパーツールのNetworkタブでも確認できるので、こんな意味があるのかと確認しながら見るとより理解が深まるでしょう！
では、いってみましょう〜
HTTPヘッダの基礎と種類
HTTPヘッダにはよく利用される種類がいくつかあります。
- Host
- Content-type
- User-agent
- Accept
- Referer
- Accept-Encoding
- Authorization
- Location
ひとつずつ眺めていきます。
Host
リクエストする際につけるヘッダーです。
送信される先のサーバードメイン名(例：hoge.example.com)とポート番号(:80 , :443)のことです。
HTTP/1.0ではIPアドレスのみの特定だったので異なるドメイン名でも区別できないことがあったようですが、HTTP/1.1でHostヘッダが追加されてドメイン名で区別できるようになったようです。
Content-type
リクエスト・レスポンスどちらでも利用できるヘッダーです。
ボディの内容がどの様な種類のメディアタイプなのかを示しています。
例えば、
Content-Type: application/xhtml+xml; charset=utf-8
といったものがあると、
applicationが「タイプ」と呼び、xhtml+xmlが「サブタイプ」と呼びます。
例えば、タイプは以下のようなものがあります。
- text:人が読んでも理解できるテキスト
- image:画像データ
- audio:音声データ
- video:映像データ
- application:その他のデータ
サブタイプは以下のようなものがあります。
- text/plain:プレーンテキスト
- text/csv:CSV形式のテキスト
- text/css:CSS形式のスタイルシート
- text/html:HTML文書
- image/jpg:JPEG画像
User-agent
リクエストするヘッダーに存在します。
リクエストしたブラウザやシステムの種類を示します。
例えば、
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/87.0.4280.88 Safari/537.36
この人はMacでアクセスして来ているんだなぁというのがわかります。
Accept
リクエストするヘッダーに存在します。
クライアントが自分の処理できるメデイアタイプをサーバーに伝える際に利用します。
例えば、
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8
q=というのは「qvalue」と呼んで、メディアタイプの優先順位を示しています。小数点を含む0~1の数値で優先順位を決定しています。
Referer
リクエストするヘッダーに存在します。
ブラウザでリンクをクリックした際にクリック元のURLを示します。分析・ログ・キャッシュの最適化に利用されるようです。
aタグで「target=”_blank”」を設定したら、「rel=noreferer」を設定した方が良いです。
設定しないと、JavaScriptのwindow.openerで親ウィンドウを嘘の類似させたサイトにジャンプさせることができてしまうので、悪意を持ったサイトにアクセスさせられてしまいます。rel=norefererを設定して親ウィンドウを操作させないように設定しましょう。
あとは、SNS等で友人間のやり取りでリンクがあった際にそれを踏んだ際にやり取りするDMのRefererが飛ばないような設定を行うのもベターだと思います。
そういった別オリジンにアクセスする際のreferer情報を制御するヘッダーが以下のようなものがあるので利用した方が良さそうです。
Referrer-Policy:origin-when-cross-origin
// 設定するには
<mera name=”referrer” content=”origin-when-cross-origin”>
Accept-Encoding
リクエストするヘッダーに存在します。
クライアントが理解できる圧縮方式を指定します。
例えば、
// クライアントリクエスト
Accept-Encoding:gzip,deflate
// サーバーレスポンス
Content-Encoding: gzip
Authorization
リクエストするヘッダーに存在します。
認証する際に、認証情報を掲示します。
AuthorizationはBasic認証で用いますが、HTTPSプロトコル前提で利用する必要があります。
httpプロトコルは通信内容が盗聴でき、AuthorizationはBase64でエンコーディングされているので、デコードしてしまえばユーザー名・パスワードが入手できてしまうからです。
Location
レスポンスヘッダーに存在します。
リダイレクト先の移動先のURIまたは新規作成したURIを示しています。
例:) Location: /index.html
このあたりの情報はMDN公式や、WEBを支える技術、Real World HTTPあたりが詳しい情報が載っています。
完全初学者が呼んでもちんぷんかんぷんだと思うので、ある程度わかってきた段階で読むと理解が進むのではないかと思います！
いじょう。ほんじゃ〜ね
