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
3.1k
Next.jsのセキュリティ設計とアーキテクチャ
muratak
October 28, 2024
Tweet
Share
More Decks by muratak
See All by muratak
DDoS対策 ~監視、分析、対策~
tresagua0123
2
79
Why Hono なぜHonoを使うべきなのか
tresagua0123
6
1.3k
大規模な美容メディアのフロントエンドを支えるサーバー技術
tresagua0123
0
25
バッチシステムのリプレース ~オンプレ/PHP->AWS/TypeScriptで実現する大規模バッチの新規設計、構築~
tresagua0123
0
18
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
GitHub's CSS Performance
jonrohan
1031
460k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
A designer walks into a library…
pauljervisheath
207
24k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Fireside Chat
paigeccino
37
3.5k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Faster Mobile Websites
deanohume
307
31k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
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のセキュリティについて学びを深め、 いつか一緒に働ける日を楽しみにしています!