Server Function のセキュリティで、気をつけることは何ですか。
実体がサーバー上のエンドポイントだからです。React 公式も「引数は完全にクライアント制御下にある」と明記しています。UIに出していない操作も、画面を経由せず直接呼べます。
面接官が見ているのは🔴 ここを外すと本番で穴を開ける。最重要ノードのひとつ。
これは「フォームの送信処理はどう実装しますか。」への追撃質問です。
よくある答えと、面談でどう見られるか
- 引数はクライアントが自由に作れるので、関数の中で検証と認可を必ず行う
これが正解です。公式も「引数は完全にクライアント制御下にある」と明記しています。 - サーバーで実行されるので、クライアントから改ざんされる余地はない
実行される場所と、入力の信頼性は別の話です。実行はサーバーですが、引数はクライアントが決めています。ここは本番で穴を開ける誤解です。 - 画面にボタンを出していない操作は呼ばれないので、そこは省略できる
UI に出ていないことは防御になりません。Server Function は実質エンドポイントなので、画面を経由せず直接呼び出せます。 - 型を付けておけば不正な値は弾かれる
TypeScript の型はビルド時のもので、実行時には残りません。面談で頻出の論点です。実行時の検証は別途必要になります。
面接官は何を見ているか
- 引数はクライアントが自由に作れる、と認識している
- 関数の中で認可チェックが要ると言えた
- 「画面に出していないから安全」ではないと理解している
模範解答
引数を信用しないことです。
Server Function は結果としてサーバー上のエンドポイントになります。React の公式は「Server Function の引数は完全にクライアント制御下にある。セキュリティのため、常に信頼できない入力として扱い、検証とエスケープを行うこと」と明記しています。さらに「どの Server Function でも、ログイン中のユーザーがその操作を行ってよいかを検証すること」とも書かれています。
つまり、画面にボタンを出していないから呼ばれない、という前提は成り立ちません。関数が公開されている以上、任意の引数で直接呼ばれ得ます。
具体的には、deleteItem(id) のような関数で id だけ受け取って消してはいけません。「そのユーザーがその id を消してよいか」を関数の中で必ず確認します。
もう1つ、'use server' をファイル先頭に書くと、そのファイルから export した関数が全部クライアントから呼べるようになります。補助的なつもりの関数を同じファイルに export しないよう気をつけます。
ここからどう深掘りされるか
この問いに答えられた場合、面談は次の質問に進みます。