Next.jsのAPI Routesへpublicにアクセスできてしまう問題の対応

こんにちは

Next.jsにはAPI Routesという機能がありますね

API Routesはpages/apiディレクトリ以下にファイルを作成することで、サーバーサイドで実行されるAPIエンドポイントを作成することができる機能です。
DBからデータを取得する単純なAPIエンドポイントとして使用するのではなく、BFFのように他で作成されたAPIとの中継役として使用されるのが一般的ですね
サーバーサイドで実行されるため、リクエストで送信されるAPI Keyを見られることなく送信することがでできる利点もあります

このAPI Routesですが、公式には標準では同一オリジンからのリクエストのみ受け付けると記載がありますが、実際に使用してみると同一オリジンだけではなく、どこからでもpublicにアクセスできてしまうようです。
実際に同様の事象が報告されています
これはAPIのセキュリティ上、重大な問題点ですね。

今回はAPI Routesの上記問題点の対策として、二重送信クッキーを紹介します。

二重送信クッキーはCSRF攻撃の対策として用いられている手法で、Cookieに設定されたランダムなトークンと、リクエスト時に送信されたトークンの値が同値である場合のみ正常なリクエストとして処理する方法です。
API Routesはブラウザ側と同一オリジンであり、API側でCookieの参照も簡単におこなえるため、この方法との相性が良いと思います。
Cookieに保存するトークンは可能な限り即廃棄するようにし、トークンが存在しない場合はアクセス毎に生成するような方法を用いると、セキュリティ強度が高いと思われます。

Cookieを参照するため、ブラウザ外からのリクエストは完全に遮断することができ、API側の認証も強固にすることで今回の問題点については対応することができそうですね

トークンの認証処理についてはNext.jsのmiddlewareを使うことで簡単に実装可能です。

Next.jsのAPI Routesは便利な機能のようですが、今回のようにセキュリティ上に大きな問題点を抱えているように思えます。
実際に使用する際は紹介した二重送信クッキーを使用するなど、セキュリティ上の問題についてよく注意した上で使うべきでしょう。