Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
そのNext.js(Server Actions)の セキュリティを意識できていますか?(Te...
Search
Ken Watanabe
June 05, 2025
1
180
そのNext.js(Server Actions)の セキュリティを意識できていますか?(Techbowl&カミナシの勉強会 on 2025/5/30 @Kaminashi )
Ken Watanabe
June 05, 2025
Tweet
Share
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
25
1.8k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
A better future with KSS
kneath
238
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Speed Design
sergeychernyshev
32
1k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Building Adaptive Systems
keathley
43
2.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Transcript
そのNext.js(Server Actions)の セキュリティを意識できていますか? StatHackカンパニー 渡邉健 Techbowl&カミナシの勉強会 in 2025/5/30 @Kaminashi 5F
Kaminashiではプロダクトをリリースする前に Production Readiness Checkをしています リリースするにあたり、Kaminashiの定める満 たすべきセキュリティ要件を自社のセキュリ ティエンジニアともに確認します (2hours~) 今回はそれを踏まえKaminashiでも導入事例の 多いNext.js特有の意識し損ねそうな点を一部
抜粋します はじめに https://kaminashi-developer.hatenab log.jp/entry/2025/05/16/090000
• Next.js 14以降 Next.jsは大きく変わった ◦ その中で最大のフロントエンドコミュニティでの変化の一つ Server Actions Next.jsはじめましての方に向けて
従来のアーキテクチャ 従来のアーキテクチャと比較したServer Actions フロントエンドとAPIの分離 API (Express) フロントエンド (React) fetch API
Server Actionsによる置き換え (Next.js 15) 従来のアーキテクチャと比較したServer Actions Server Actionsによる クライアント・サーバのやり取り サーバの関数を呼ぶ
(実態は中でFetchが呼 ばれる) ‘use server’をつけることで server内で実行される関数に 関数呼び出しだけサーバとの通信も完結 する、圧倒的記述量の少なさっ API・フロント開発をまとめてできちゃう
やっていることはただのFetch 内部の通信をDebugしてみよう Next.jsが内部で隠蔽するPOSTリクエスト curlでも、もちろん レスポンスが帰ってくる
Pros • 記述量が圧倒的に少ない! • APIをデプロイしなくていいぶん運用が楽! Cons • フロントエンドとサーバの秘密情報の距離が小さくなった ◦ “use
server”をつけそのこねるだけで、サーバの持つ秘密情報にアクセスできることも ◦ その関数はサーバで実行されていることを常に意識し続ける必要あり • どこでリクエストが発生するのか追いづらい ◦ 明示的なfetchがなくなるため 個人的なPros/Cons
クライアントと Server Actionsはちゃんと分離して 秘密情報にアクセスされないように 最大限の配慮を
ナイトメアサーバアクション ファイルの引数で パストラバーサル 環境変数を返している
ちゃんとFetchが実行されることを 意識しよう
「クライアントで実行される感」が強くなってしまうが故に、 改めてサーバに送るFetchなんだぞ!ってことを意識しよう ブラウザで処理するな らまだしも、 巨大なデータが送られ るので気をつけよう
(備忘録)巨大なリクエストを防ぐには? 一応デフォルトでは 1MByteのデータまでし か送れない next.config.ts で調整可能
サーバ側でも バリデーションをちゃんとしよう
クライアントとサーバが近くて、ついついクライアントでのみのバリデーションになりがち あくまでServer Actionsの実態はサーバでcurlでも叩けちゃうのだ Next.jsが隠蔽するけど どんなリクエストも 送れるのでちゃんと バリデーションしよう
ちゃんとHSTSなど ヘッダーの設定をしよう
セキュリティーを向上させるヘッダをちゃんとつけよう 結局は内部はAPIなので、 ちゃんとヘッダー等の 設定をしてあげよう
ご清聴ありがとうございました!