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
3
81
Why Hono なぜHonoを使うべきなのか
tresagua0123
6
1.3k
大規模な美容メディアのフロントエンドを支えるサーバー技術
tresagua0123
0
26
バッチシステムのリプレース ~オンプレ/PHP->AWS/TypeScriptで実現する大規模バッチの新規設計、構築~
tresagua0123
0
18
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
A Modern Web Designer's Workflow
chriscoyier
695
190k
KATA
mclloyd
30
14k
A better future with KSS
kneath
238
17k
Building Applications with DynamoDB
mza
95
6.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
It's Worth the Effort
3n
185
28k
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のセキュリティについて学びを深め、 いつか一緒に働ける日を楽しみにしています!