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
Building large-scale batch of media with AWS
tresagua0123
0
5
DDoS対策 ~監視、分析、対策~
tresagua0123
3
95
Why Hono なぜHonoを使うべきなのか
tresagua0123
6
1.4k
大規模な美容メディアのフロントエンドを支えるサーバー技術
tresagua0123
0
28
バッチシステムのリプレース ~オンプレ/PHP->AWS/TypeScriptで実現する大規模バッチの新規設計、構築~
tresagua0123
0
24
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
4 Signs Your Business is Dying
shpigford
184
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Rails Girls Zürich Keynote
gr2m
95
14k
BBQ
matthewcrist
89
9.8k
Being A Developer After 40
akosma
90
590k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
KATA
mclloyd
32
14k
Side Projects
sachag
455
43k
Code Review Best Practice
trishagee
70
19k
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のセキュリティについて学びを深め、 いつか一緒に働ける日を楽しみにしています!