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のセキュリティ設計とアーキテクチャ
Search
muratak
October 28, 2024
3
2.6k
Next.jsのセキュリティ設計とアーキテクチャ
muratak
October 28, 2024
Tweet
Share
More Decks by muratak
See All by muratak
大規模な美容メディアのフロントエンドを支えるサーバー技術
tresagua0123
0
9
バッチシステムのリプレース ~オンプレ/PHP->AWS/TypeScriptで実現する大規模バッチの新規設計、構築~
tresagua0123
0
6
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
Being A Developer After 40
akosma
87
590k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
66k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Scaling GitHub
holman
458
140k
For a Future-Friendly Web
brad_frost
175
9.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
Fireside Chat
paigeccino
34
3.1k
Practical Orchestrator
shlominoach
186
10k
Transcript
スポンサー LT: Next.jsのセキュリティ設計とアーキテクチャ 10/28 ROSCAFE TECH NIGHT#11 muratak@SWE
簡単な自己紹介 muratakについて ・Next.js, ServerSide TypeScript, AWS etc ・@cosmeエンジニア 主にNext.jsやHonoなど技術系発信 →
普段はこれらの活動をしている。
Next.jsのセキュリティ設計とアーキテクチャ 今日のテーマ ・Next.js開発でのセキュリティ設計上気をつける点を知り、 Web開発一般におけるセキュリティ設計においても気をつける点を振り返る 注意) 本スライドはエンジニアとして、 また、本イベント会場スポンサーとしての著者の個人見解であり、 発表者の所属会社の技術責任者及び代表として意見するものではありません。
What is Next.js? ~最も人気な Reactフレームワーク ~
How Next.js works? ~Nextってどうやって動くの? ~ ・Browser | Node.js, Bun, Deno
などブラウザとサーバ両面で動く ・Client Componentsはブラウザで実行され、 Server Componentsはサーバーで実行される Next.jsのセキュリティ設計を考える上での肝はそれらの 境界面にある 原則として、機密情報がブラウザー側に露出する設計はセキュリティ上ダメ
But in what cases? ~セキュリティ設計上、気をつける点って? ~ 今から一緒に具体例を通してみていきましょう! (一緒に設計するつもりで )
Bad Env ~環境変数をどこに置くか ~ ・NEXT_PUBLIC_XXXX で始まる環境変数はブラウザーからアクセスできるので機密情報を入れない。 → サーバー側の環境変数など、セキュアな場所に機密情報は保管せよ
Bad Props ~propsの渡し方~
Bad Props ~propsの渡し方~
Bad Props ~propsの渡し方~
Bad Props ~どうやって防ぐ? ~ ・そもそも機密情報を propsとして渡さない(それはそう)・DTOパターン(それはそう) ・Taint APIs (React19の新機能)を使って渡そうとすると強制エラーにする
Some ways to protect your apps ・next-auth ・session & pass
Some ways to protect your apps ・next-cors ・express-rate-limit ・express-slow-down ・helmet
… what else guys?
It is your turn! Next.jsのセキュリティについて学びを深め、 いつか一緒に働ける日を楽しみにしています!