csr-rsc-ssg-isr-ssr-ssrf

Dieses Repository kann als Grundlage für die Präsentation eines oder mehrerer Meetups dienen. Der Ablauf ist wie folgt…

• „CSR" Client Side Rendering: React als Standard-SPA-Bibliothek
• „RSC" React Server Components: Ausführung von React-Komponenten ausschließlich auf dem Server
• „SSG" Static Site Generation: Ausführung von React-Komponenten während des Builds
• „ISR" Incremental Static Regeneration: Neugenerierung von Komponenten bei Bedarf
• „SSR" Server Side Rendering: Pre-Rendering auf dem Server, dann Ausführung (Hydration) auf dem Client
• „SSRF" Server Side Request Forgery: eine kürzlich in Next.JS behobene Sicherheitslücke

Diese Arbeit basiert hauptsächlich auf zwei Quellen:

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

---

CSR Client Side Rendering

1-csr-load-data vanilla react SPA loading data

[!IMPORTANT] CSR (Client-Side Rendering): React-Code wird an den Browser ausgeliefert, der Inhalte generiert, die in das DOM eingefügt werden.

Demo

cd 1-csr-load-data
npm start

2-csr-router vanilla react SPA routing

[!IMPORTANT] Nach dem erstmaligen Laden der Seite verwendet die Navigation zu anderen Seiten derselben Website JavaScript, um Teile der Seite neu zu rendern, ohne dass ein vollständiger Seitenneuladevorgang erforderlich ist.

Demo

cd 2-csr-router
npm start

RSC React Server Components

3-rsc-load-data React Server Components (Next.js-Implementierung) Laden von Daten

[!IMPORTANT] React-Komponenten, die dafür geschrieben wurden, nur auf dem Server ausgeführt zu werden, nicht im Browser.

Demo

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

4-rsc-router React Server Components (Next.js-Implementierung) Routing

[!IMPORTANT] Komponenten werden nur auf dem Server ausgeführt. Das Standardverhalten ist statisches Rendering: Komponenten werden zur Build-Zeit ausgeführt.

Demo

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

5-SSR SSR Server Side Rendering

[!IMPORTANT] SSR bedeutet, Client-Komponenten auf dem Server vorzurendern. React-Code wird zum Zeitpunkt der Anforderung ausgeführt. Das Ergebnis kann für zukünftige Anfragen zwischengespeichert werden.

Best Practice: 'use client';-Komponenten so weit unten im Komponentenbaum wie möglich definieren.

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

Hydration

[!IMPORTANT] „In React ist „Hydration" der Vorgang, bei dem React an vorhandenes HTML „anbindet", das bereits von React in einer Serverumgebung gerendert wurde. Während der Hydration versucht React, Ereignis-Listener an das vorhandene Markup anzuhängen und die Darstellung der App auf dem Client zu übernehmen. In vollständig mit React erstellten Apps hydriert man normalerweise nur eine „Wurzel", einmal beim Start, für die gesamte App."

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

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

Demo

cd 5-ssr
npm run build
npm run start

6-pages-router-ssg (Next.js-Implementierung)

[!IMPORTANT] SSG (Static Site Generation) mit dem Pages Router: React-Code wird beim Erstellen der Anwendung ausgeführt, und die generierte Ausgabe ist statisch.

Demo

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

7-pages-router-isr (Next.js-Implementierung)

[!IMPORTANT] ISR (mit Pages Router): „Next.js ermöglicht es Ihnen, statische Seiten zu erstellen oder zu aktualisieren, nachdem Sie Ihre Website erstellt haben. Incremental Static Regeneration (ISR) ermöglicht es Ihnen, Static-Generation auf Seitenbasis zu verwenden, ohne die gesamte Website neu erstellen zu müssen. Mit ISR können Sie die Vorteile von statischen Seiten beibehalten und gleichzeitig auf Millionen von Seiten skalieren."

Demo

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

Warum ISR?

„Die Daten könnten zum Zeitpunkt der Anforderung veraltet sein"

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

Server Actions

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

SSRF (behoben in NextJS v14.1.1)

Definition SSRF

...

Warum?

• Wenn man Zugriff auf einen verwundbaren Server hat, aber nicht direkt auf den Zielserver (DMZ, Firewall…)
• Wenn man Anfragen ausführen möchte, während man die eigene Herkunft verbirgt
• …

Demo 8-ssrf-14.1.0

Kontext

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

Ziel

Bedingungen zur Ausnutzung der CVE-2024-34351