Next.jsのセキュリティ設計とアーキテクチャ

Transcript

1. スポンサー LT: Next.jsのセキュリティ設計とアーキテクチャ 10/28 ROSCAFE TECH NIGHT#11 muratak@SWE
2. 簡単な自己紹介 @rio_devops ・Next.js, ServerSide TypeScript, AWS etc ・@cosmeエンジニア ・(複業) TypeScriptでの開発/技術コンサル等歴任 普段はこれらの活動をしている。
3. Next.jsのセキュリティ設計とアーキテクチャ 今日のテーマ ・Next.js開発でのセキュリティ設計上気をつける点を知り、 Web開発一般におけるセキュリティ設計においても気をつける点を振り返る 注意) 本スライドはエンジニアとして、 また、本イベント会場スポンサーとしての著者の個人見解であり、 発表者の所属会社の技術責任者及び代表として意見するものではありません。
4. What is Next.js? ~最も人気な Reactフレームワーク ~
5. How Next.js works? ~Nextってどうやって動くの？ ~ ・Browser | Node.js, Bun, Deno などブラウザとサーバ両面で動く ・Client Componentsはブラウザで実行され、 Server Componentsはサーバーで実行される Next.jsのセキュリティ設計を考える上での肝はそれらの 境界面にある 原則として、機密情報がブラウザー側に露出する設計はセキュリティ上ダメ
6. But in what cases? ~セキュリティ設計上、気をつける点って？ ~ 今から一緒に具体例を通してみていきましょう！ (一緒に設計するつもりで )
7. Bad Env ~環境変数をどこに置くか ~ ・NEXT_PUBLIC_XXXX で始まる環境変数はブラウザーからアクセスできるので機密情報を入れない。 → サーバー側の環境変数など、セキュアな場所に機密情報は保管せよ
8. Bad Props ~propsの渡し方~
9. Bad Props ~propsの渡し方~
10. Bad Props ~propsの渡し方~
11. Bad Props ~どうやって防ぐ？ ~ ・そもそも機密情報を propsとして渡さない(それはそう)・DTOパターン(それはそう) ・Taint APIs (React19の新機能)を使って渡そうとすると強制エラーにする
12. Some ways to protect your apps ・next-auth ・session & pass
13. Some ways to protect your apps ・next-cors ・express-rate-limit ・express-slow-down ・helmet … what else guys?
14. It is your turn! Next.jsのセキュリティについて学びを深め、 いつか一緒に働ける日を楽しみにしています！