これからNext.jsを始める人に注意してほしいセキュリティ事項

ARANK

Next.js v14からServer Actionsがstableリリースとなり、開発体験だけでなく、ユーザ体験(ハイドレーションの完了を待機せずフォーム操作ができる、プログロレッシブ•エンハンスメントなど)の向上が見込まれます。今回は、Next.jsのServer Actionsを実装する上で注意しなければならないセキュリティ懸念事項とその対策を提案します。!Server ActionsがNext.jsのstableリリースに含まれる前から日本のエンジニアのみならず、各国のエンジニアがセキュリティの懸念事項について議論、調査、アウトプットしてきました。今回は公式の推奨・注意事項に加え、さまざまな記事で言及されている方法をまとめたいと思います。Server Actionsとはformからsubmitされた際の処理(DBの更新等)をサーバサイドで非同期で実行できる関数です。ReactのServer ComponentsだけでなくClient Componentsからも呼びだすことができます。つまり、formがsubmitされた際のDB更新などの処理をわざわざエンドポイントを立てずに関数として書くことができます。Server Actions(またはServer Components)のセキュリティリスクと対策Server ActionsやServer ComponentsをClinet Componentsから利用する場合…