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
4
3k
Next.jsのセキュリティ設計とアーキテクチャ
muratak
October 28, 2024
Tweet
Share
More Decks by muratak
See All by muratak
DDoS対策 ~監視、分析、対策~
tresagua0123
2
73
Why Hono なぜHonoを使うべきなのか
tresagua0123
6
1.2k
大規模な美容メディアのフロントエンドを支えるサーバー技術
tresagua0123
0
23
バッチシステムのリプレース ~オンプレ/PHP->AWS/TypeScriptで実現する大規模バッチの新規設計、構築~
tresagua0123
0
15
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
The Invisible Side of Design
smashingmag
299
50k
Embracing the Ebb and Flow
colly
85
4.7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.6k
Making Projects Easy
brettharned
116
6.2k
It's Worth the Effort
3n
184
28k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
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のセキュリティについて学びを深め、 いつか一緒に働ける日を楽しみにしています!