全てのAPIを保護するためにリクエスト時にkeyを要求するよう変更

[kameiryohei]

実装意図や考えた

• 以前他の人に触ってもらった際にAPIが保護されていないことを指摘され改善方法を模索していた
• Revert "CORSによるAPIの保護を実装" #16 でrevertした通りCORSの設定を行うことでAPIを保護できると考えていたが、自分のCORSの理解が間違えていたためrevertした
• 再度考えたところfetchのリクエストのheaderに任意のkeyを割り当てそれを認証することでリクエストを許可することで実現できると考えた。
• 全てのAPIに保護のための記述をするのは手間かつメンテナンス性に欠けるため、middleware.tsを作成しapiディレクトリにある全てのファイルにルールを設定

主な実装方法など

• middleware.tsにリクエストのheaderにx-api-keyが環境変数から読み込んだ値と一致しなければstatusで401を返すように実装
• フロントエンド側ではheaderに環境変数から読み込んだ値を付与してリクエストを送信するように設定

Postmanで動作確認を行った結果期待通りheaderに何もない状態ではリクエストが送れないことが確認できた。

例：/api/planにリクエストを送信した例

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
class-planner	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 10, 2024 6:16am