VIDEO LESSON
headersの使い方：リクエストヘッダーをサーバーで読むの解説動画
再生時間 7:45動画を別のタブで開く ↗
動画の字幕・文字起こしを読む
再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。
- 0:00こんにちは。
- 0:00今回は、ヘッダーズの使い方です。
- 0:03ブラウザーがサーバーへ送ってくるリクエストヘッダーを、サーバー側で読み取る方法を学びます。
- 0:09ヘッダーには、言語設定やブラウザーの情報など、アクセス時の情報が含まれています。
- 0:15ヘッダーズは、その情報を読み取るための読み取り専用のエーピーアイです。
- 0:20返すレスポンスのヘッダーを設定する仕組みとは役割が違います。
- 0:24また、送られてきた値を無条件に信頼しないことも大切です。
- 0:28何が読めて、どう扱うべきか、この二点を中心に整理していきます。
- 0:33まず前提です。
- 0:34この記事の例は、ネクストジェイエス十五以降の非同期リクエストエーピーアイに合わせた書き方です。
- 0:40ネクストジェイエス十六では、キャッシュコンポーネンツを有効にしない構成を前提とします。
- 0:46タイプスクリプトは五・二以降で、利用するネクストジェイエスが対応するノードジェイエスを使います。
- 0:53配置先は、アプリ直下にレイアウト・ティーエスエックスを備えたアップルーターのプロジェクトです。
- 0:59ページズルーターとは配置先も実行場所も異なるため、プロジェクトのルーターとバージョンを先に確認してください。
- 1:07前提がずれていると、同じコードでも動く場所が変わってしまいます。
- 1:11引数と戻り値を整理します。
- 1:13ヘッダーズは引数を取りません。
- 1:15アウェイトを付けて呼び出すと、読み取り専用のヘッダーズ形式のオブジェクトが返ってきます。
- 1:22そのオブジェクトのゲットメソッドにヘッダー名を渡すと、値が文字列で返ります。
- 1:27値が送られていなければ、ヌルが返ります。
- 1:30つまり、値がある場合とない場合の両方を想定してコードを書く必要があります。
- 1:35読み取り専用なので、このオブジェクトを通してリクエストの内容を書き換えることはできません。
- 1:42呼び出し元が送る情報を、そのまま本人確認や所在地の証明として扱わないことも、
- 1:45記事が強調している点です。
- 1:49まずはゲットで一つの値を安全に取り出す形を覚えてください。
- 1:53記事のコードです。
- 1:55ファイルは、アプリ、ヘッダーデモというフォルダーのページ・ティーエスエックスです。
- 2:01最初にネクスト・スラッシュ・ヘッダーズからヘッダーズを読み込みます。
- 2:06コンポーネントは非同期関数として定義し、アウェイト・ヘッダーズで受信ヘッダーを取得します。
- 2:13次にゲットでアクセプト・ランゲージを取り出し、変数ローへ入れます。
- 2:18値がある場合は先頭八十字までに切り取り、値がなければ指定なしという文字列を使います。
- 2:25これがランゲージヒントです。
- 2:27最後に、見出しと言語ヘッダーという文字とともに、その値を段落へ表示します。
- 2:33スライドでは表示崩れを避けるため、波括弧の埋め込みを文字列の連結で示しています。
- 2:39実行結果と処理の順序です。
- 2:41ブラウザーからアクセスすると、そのブラウザーの言語設定に応じたアクセプト・ランゲージが表示されます。
- 2:48たとえば日本語環境であれば、日本語を優先する内容が届きます。
- 2:52ただしこれは、ユーザーが希望する言語を示すヒントにすぎません。
- 2:56本人であることや、所在地を証明する情報ではない点に注意してください。
- 3:01記事の例では、値の長さを八十字までに制限し、通常のジェイエスエックスのテキストとして表示しています。
- 3:08ヘッダーの内容を、そのままエイチティーエムエルへ挿入する使い方は避けます。
- 3:13外部から来た値を、長さと表示方法の両面で安全に扱うことが、この例の大切なポイントです。
- 3:19値の整え方を、純粋なロジックに切り出して確認します。
- 3:24関数トゥーヒントは、受け取ったローの値があればスライスで先頭八十字までに切り取り、
- 3:29ヌルや未定義の場合は指定なしを返します。
- 3:35短い値であればそのまま返ります。
- 3:38百文字の長い値であれば、先頭八十字だけが残ります。
- 3:42ここで注意したいのは、空文字はヌルではないため、フォールバックは働かず空文字がそのまま返る点です。
- 3:51オプショナルチェーンとヌル合体演算子の組み合わせは、欠落への対処としてよく使う形です。
- 3:58どの場合にどの結果になるかを、値ごとに分けて確かめておくと、ヘッダーの扱いが安定します。
- 4:06つまずきやすい使い分けです。
- 4:08ヘッダーズが返すのは、あくまで受信したリクエストのヘッダーです。
- 4:13ブラウザーへ返すレスポンスのヘッダーを設定するエーピーアイではありません。
- 4:18たとえばキャッシュコントロールのような返却側の指定は、ルートハンドラーのレスポンスや、
- 4:23適切なサーバー設定側で行います。
- 4:27名前が似ているため混同しやすいですが、入ってくる情報を読むのか、出ていく情報に付けるのか、
- 4:31方向で区別してください。
- 4:35読み取りたいときはヘッダーズ、返したい値を付けたいときはレスポンス側、と覚えると迷いません。
- 4:42この区別は、クッキーズなど近いエーピーアイを学ぶときにも役立ちます。
- 4:47転送ヘッダーと認証情報の注意です。
- 4:49エックス・フォワーデッド・フォーやホストといった値は、一見すると接続元やアクセス先を示しているように見えます。
- 4:58しかし、それらを信頼できるかどうかは、前段のプロキシが何を上書きし、何を検証するかに依存します。
- 5:06構成によっては、利用者が値を偽って送ることもできてしまいます。
- 5:11そのため、認証やアクセス制御の根拠として安易に使わないでください。
- 5:16もう一つ、受信したオーソリゼーションやクッキーを、外部のユーアールエルへ丸ごと転送しないことも大切です。
- 5:24認証情報が意図しない相手へ渡ると、なりすましにつながる恐れがあります。
- 5:30ヘッダーは便利な情報源ですが、信頼の境界を意識して扱いましょう。
- 5:35静的出力との関係です。
- 5:37この例は、アクセスのたびに変わるリクエストヘッダーを読むため、リクエストごとのサーバー処理を必要とします。
- 5:45そのため、アウトプットにエクスポートを指定して生成したアウトフォルダーを配信するだけのサーバーでは実行できません。
- 5:54ビルド時点で値が決まらない情報は、静的なファイルには含められないためです。
- 5:59実際に使う場合は、ネクストジェイエスのサーバー実行環境を用意するか、別のエーピーアイで代替します。
- 6:07公開方法を決める前に、ヘッダーが本当に必要か、必要ならどの環境で動かすかを確認してください。
- 6:14配信方式と機能の相性は、設計の早い段階で確かめることが重要です。
- 6:18確認課題です。
- 6:20カールのエイチオプションでアクセプト・ランゲージを変更し、表示結果を比較してみてください。
- 6:26たとえば英語を指定した場合と日本語を指定した場合で、表示がどう変わるかを確認します。
- 6:32値が欠落した場合と、とても長い値を送った場合も試してください。
- 6:37欠落では指定なしが表示され、長い値では先頭八十字までに収まるはずです。
- 6:42あわせて、表示用途と認証用途の違いも整理してください。
- 6:46ヘッダーは表示のヒントには使えても、認証の根拠にはならない、という区別です。
- 6:52確認は開発サーバーだけでなく、本番用ビルドと公開先でも行います。
- 6:57ユーアールエルを直接開く場合と、画面内のリンクから遷移する場合も分けて試すと確実です。
- 7:03まとめです。
- 7:04ヘッダーズは、アウェイトを付けて呼び出し、ゲットで名前を指定して値を取り出します。
- 7:10戻り値は文字列かヌルで、オブジェクト自体は読み取り専用です。
- 7:14返すレスポンスのヘッダーを設定する仕組みではないため、キャッシュコントロールなどはレスポンス側で指定します。
- 7:21転送ヘッダーを信頼できるかは前段の構成次第であり、認証情報を外部へ丸ごと転送してはいけません。
- 7:27そして、この機能はリクエストごとのサーバー処理が必要で、静的出力だけでは使えません。
- 7:33カールで値を変えて結果を比べ、欠落と長い値の動きを説明できれば、この回の目標は達成です。
- 7:39これでヘッダーズは完了です。
- 7:41お疲れさまでした。
- 7:42次回はクッキーズを学びます。
この動画で学べること
headersでアクセス時のヘッダーを読む方法を紹介します。読み取り専用のAPIと、レスポンスヘッダーの設定との違いを学びます。
解説記事・サンプルコードを読む：headersの使い方：リクエストヘッダーをサーバーで読む →