csr-rsc-ssg-isr-ssr-ssrf

このリポジトリは、1つまたは複数のミートアップを発表するためのサポートとして使用できます。流れは次のとおりです...

• "CSR" Client Side Rendering : 標準的なSPAライブラリとしてのReact
• "RSC" React Server Components : Reactコンポーネントを_サーバー側でのみ_実行
• "SSG" Static Site Generation : _ビルド_中にReactコンポーネントを実行
• "ISR" Incremental Static Regeneration : オンデマンドでのコンポーネントの再生成
• "SSR" Server Side Rendering : サーバー側での_プリレンダリング_、続いてクライアント側での実行（ハイドレーション）
• "SSRF" Server Side Request Forgery : Next.JSで最近修正されたセキュリティの脆弱性

この作業は主に2つのソースに基づいています：

• https://demystifying-rsc.vercel.app/
• https://www.assetnote.io/resources/research/digging-for-ssrf-in-nextjs-apps

---

CSR クライアントサイドレンダリング

1-csr-load-data vanilla react SPA データ読み込み

[!IMPORTANT] CSR（クライアントサイドレンダリング）：Reactコードがブラウザに配信され、DOMに挿入されるコンテンツを生成します。

デモ

cd 1-csr-load-data
npm start

2-csr-router vanilla react SPA ルーティング

[!IMPORTANT] ページが最初に読み込まれた後、同じWebサイト内の他のページへの移動では、JavaScriptを使用してページの一部を再レンダリングするため、ページ全体のリロードは必要ありません。

デモ

cd 2-csr-router
npm start

RSC React Server Components

3-rsc-load-data React Server Components（Next.js実装）データ読み込み

[!IMPORTANT] ブラウザではなく、サーバー上でのみ実行されるように書かれたReactコンポーネント。

デモ

cd 3-rsc-load-data
npm run build
npm run start

4-rsc-router React Server Components（Next.js実装）ルーティング

[!IMPORTANT] コンポーネントはサーバー上でのみ実行されます。デフォルトの動作は静的レンダリングです。つまり、コンポーネントはビルド時に実行されます。

デモ

cd 4-rsc-router
npm run build
npm run start

5-SSR SSR サーバーサイドレンダリング

[!IMPORTANT] SSRは、クライアントコンポーネントをサーバー上で事前レンダリングすることを意味します。Reactコードはリクエストされた時点で実行されます。結果は将来のリクエストのためにキャッシュされる場合があります。

ベストプラクティス：'use client';コンポーネントは、コンポーネントツリーのできるだけ下の方で定義します。

https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#moving-client-components-down-the-tree

ハイドレーション

[!IMPORTANT] Reactにおいて、「ハイドレーション」とは、Reactがサーバー環境でレンダリング済みの既存のHTMLに「アタッチ」する仕組みのことです。ハイドレーション中、Reactは既存のマークアップにイベントリスナーをアタッチし、クライアント上でのアプリのレンダリングを引き継ごうとします。Reactで完全に構築されたアプリでは、通常、起動時にアプリ全体に対して1つの「ルート」を1回だけハイドレーションします。

https://react.dev/reference/react-dom/client/hydrateRoot

https://www.gatsbyjs.com/docs/conceptual/partial-hydration/

デモ

cd 5-ssr
npm run build
npm run start

6-pages-router-ssg (Next.js 実装)

[!IMPORTANT] pagesルーターを使用したSSG（静的サイト生成）：アプリケーションのビルド時にReactコードが実行され、生成された出力は静的です。

デモ

cd 6-pages-router-ssg
npm run build
npm run start

7-pages-router-isr (Next.js 実装)

[!IMPORTANT] ISR（pagesルーター使用）：「Next.jsでは、サイトをビルドした後に静的ページを作成または更新できます。インクリメンタル静的再生成（ISR）により、サイト全体を再ビルドすることなく、ページ単位で静的生成を使用できます。ISRを使用すると、静的生成の利点を維持しながら、数百万ページにスケールできます。」

デモ

cd 7-pages-router-isr
npm run build
npm run start

なぜISRなのか？

「リクエスト時にデータが古くなる可能性がある」

https://vercel.com/blog/nextjs-server-side-rendering-vs-static-generation

Server actions

https://react.dev/reference/rsc/server-actions

SSRF（NextJS v14.1.1で修正済み）

SSRFの定義

...

なぜ？

• 脆弱なサーバーにはアクセスできるが、ターゲットサーバーには直接アクセスできない場合（DMZ、ファイアウォールなど）
• 自分の発信元を隠してリクエストを実行したい場合
• ...

デモ 8-ssrf-14.1.0

コンテキスト

https://www.assetnote.io/resources/research/digging-for-ssrf-in-nextjs-apps

目的

CVE-2024-34351 を悪用するための条件

• 14.1.1 より前のバージョンのNext.JSベースのアプリケーション
• 絶対パスを指定したredirect関数の使用。デモでは、addTodo.js内で：redirect(/blog/${inputValue});

redirect 関数の動作

出典：https://www.assetnote.io/resources/research/digging-for-ssrf-in-nextjs-apps

• Next.JSのredirect関数は、ブラウザにHTTP 302レスポンスを返しません。

Next.JSはサーバー側でリクエストを実行し、その結果をブラウザに返します：

• リクエストを実行するには、Next.JSが呼び出すURLを構築する必要があります。 デモでは、addTodo.js内で： redirect('/blog/123');関数はURL http://207.154.209.99/blog/123 を構築します。 このURLを構築するために、Next.JSは初期リクエストのHTTPヘッダーからホスト 207.154.209.99 を取得します。
• Next.JSは最初にHTTP HEADでURLをリクエストします。
• レスポンスが Content-Type: text/x-component ヘッダーを返した場合、Next.JSはHTTP GETでURLをリクエストします。

悪用

ターゲットサーバーに対するSSRFを実現するには、別のサーバーを実行する必要があります：

• すべてのルート（クエリパス）でリッスンする
• すべてのHEADリクエストに対して、Content-Type: text/x-component ヘッダー付きのHTTP 200を返す
• すべてのGETリクエストに対して、ターゲットサーバーへのHTTP 302を返す

8-ssrf-14.1.0 の脆弱性の修正

解決策1（恒久的ではない）：ホストを強制するためのnginx設定

/etc/nginx/sites-available/nextjs 内