そのNext.js(Server Actions)の セキュリティを意識できていますか？(Techbowl&カミナシの勉強会 on 2025/5/30 @Kaminashi )

Transcript

1. そのNext.js(Server Actions)の セキュリティを意識できていますか？ StatHackカンパニー 渡邉健 Techbowl&カミナシの勉強会 in 2025/5/30 @Kaminashi 5F
2. Kaminashiではプロダクトをリリースする前に Production Readiness Checkをしています リリースするにあたり、Kaminashiの定める満 たすべきセキュリティ要件を自社のセキュリ ティエンジニアともに確認します (2hours~) 今回はそれを踏まえKaminashiでも導入事例の 多いNext.js特有の意識し損ねそうな点を一部 抜粋します はじめに https://kaminashi-developer.hatenab log.jp/entry/2025/05/16/090000
3. • Next.js 14以降 Next.jsは大きく変わった ◦ その中で最大のフロントエンドコミュニティでの変化の一つ Server Actions Next.jsはじめましての方に向けて
4. 従来のアーキテクチャ 従来のアーキテクチャと比較したServer Actions フロントエンドとAPIの分離 API (Express) フロントエンド (React) fetch API
5. Server Actionsによる置き換え (Next.js 15) 従来のアーキテクチャと比較したServer Actions Server Actionsによる クライアント・サーバのやり取り サーバの関数を呼ぶ （実態は中でFetchが呼 ばれる） ‘use server’をつけることで server内で実行される関数に 関数呼び出しだけサーバとの通信も完結 する、圧倒的記述量の少なさっ API・フロント開発をまとめてできちゃう
6. やっていることはただのFetch 内部の通信をDebugしてみよう Next.jsが内部で隠蔽するPOSTリクエスト curlでも、もちろん レスポンスが帰ってくる
7. Pros • 記述量が圧倒的に少ない！ • APIをデプロイしなくていいぶん運用が楽！ Cons • フロントエンドとサーバの秘密情報の距離が小さくなった ◦ “use server”をつけそのこねるだけで、サーバの持つ秘密情報にアクセスできることも ◦ その関数はサーバで実行されていることを常に意識し続ける必要あり • どこでリクエストが発生するのか追いづらい ◦ 明示的なfetchがなくなるため 個人的なPros/Cons
8. クライアントと Server Actionsはちゃんと分離して 秘密情報にアクセスされないように 最大限の配慮を
9. ナイトメアサーバアクション ファイルの引数で パストラバーサル 環境変数を返している
10. ちゃんとFetchが実行されることを 意識しよう
11. 「クライアントで実行される感」が強くなってしまうが故に、 改めてサーバに送るFetchなんだぞ！ってことを意識しよう ブラウザで処理するな らまだしも、 巨大なデータが送られ るので気をつけよう
12. （備忘録）巨大なリクエストを防ぐには？ 一応デフォルトでは 1MByteのデータまでし か送れない next.config.ts で調整可能
13. サーバ側でも バリデーションをちゃんとしよう
14. クライアントとサーバが近くて、ついついクライアントでのみのバリデーションになりがち あくまでServer Actionsの実態はサーバでcurlでも叩けちゃうのだ Next.jsが隠蔽するけど どんなリクエストも 送れるのでちゃんと バリデーションしよう
15. ちゃんとHSTSなど ヘッダーの設定をしよう
16. セキュリティーを向上させるヘッダをちゃんとつけよう 結局は内部はAPIなので、 ちゃんとヘッダー等の 設定をしてあげよう
17. ご清聴ありがとうございました！