PrAha Challenge 課題1 「よく使うHTTPヘッダを理解する」 - 一人前のエンジニアになるための軌跡

HTTPヘッダーとは

メッセージのボディに対する付加的な情報、いわゆるメタデータを表す。

以下のヘッダーの意味と、役割を説明する

リクエストしたURIのホスト名とポート番号を示す。 Host ヘッダー項目はすべての HTTP/1.1 リクエストメッセージで送信する必要がある、つまり必須項目である

メッセージのボディの内容がどのような種類なのかをメディアタイプで示す。

例. text image audio

クライアントのソフトウェア情報を示す。

クライアントが自分の処理できるメディアタイプをサーバーに伝える。

リンクをクリックした時、クリック元のURIを示す。

※以下ような場合は、ブラウザーは Referer ヘッダーを送信しない。

1.参照していたリソースがローカルの "file" または "data" の URI の場合
2. 安全ではない HTTP リクエストが使用されており、それを参照しているページが安全なプロトコル (HTTPS) で受信された場合

クライアントが認識できる圧縮方式を指定する。

認証する際に使用する認証情報を提示する。

リダイレクト時の移動先のURI、または新規作成時のURIを示す。

- refererについて

aタグにtarget="_blank"を設定したところ、先輩エンジニアから「ちゃんとrel=noreferrerを設定した？」と聞かれました。なぜそのような設定が必要なのでしょうか？
- パフォーマンスとセキュリティの問題にさらされるため
rel=noreferrerを設定しなかった場合に起きうる問題を調べて、説明して下さい
- リンクを別タブで開いた際に、リンク先のページ上で多くのjavasctiptが動作していた場合、リンク元のページのパフォーマンスにも影響が出る。
- window.openerを使用すると、リンク先のページからリンク元のページにアクセスできる。これによって悪意のURLにリダイレクトするように改竄される
先輩エンジニアに「同じオリジンの時はrefererの情報を全部送って、別オリジンの時は、オリジン情報だけをrefererとして送信するように、HTTPリクエストにヘッダを追加しておいてもらえる？」と頼まれました。HTTPリクエストのヘッダーには、どんな値を追加する必要があるでしょうか？
- origin-when-cross-origin

HTTPヘッダーに関するクイズを3問、作成してください
- **以下の意味を教えてください。
- accept: application/json, text/plain, /
- accept-language: en-US,en;q=0.9,ja;q=0.8
- application/x-www-form-urlencoded

リクエストヘッダーやレスポンスヘッダーをDevツール上で見る機会はあったが、それぞれのヘッダーが何を意味しているかを追ったことがなかったので、良い学びになりました。

特にtarget="_blank"はrel=noreferrerを設定する必要があるとは知利ませんでした。（※現在はブラウザごとにデフォルトで設定されているらしい）今後は、これらの知識を実装でどのように生かしていけるか、非常に楽しみです。