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

• Eine auf Next.JS basierende Anwendung in einer Version unter 14.1.1
• Die Verwendung der Funktion redirect mit einem absoluten Pfad. In der Demo in addTodo.js: redirect(/blog/${inputValue});

Funktionsweise der Funktion redirect

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

• Die Next.JS-Funktion redirect sendet keine HTTP-302-Antwort an den Browser.

Next.JS führt die Anfrage serverseitig aus und gibt das Ergebnis an den Browser zurück:

• Um die Anfrage auszuführen, muss Next.JS die aufzurufende URL konstruieren. In der Demo, in addTodo.js: Die Funktion redirect('/blog/123'); konstruiert die URL http://207.154.209.99/blog/123. Um diese URL zu konstruieren, holt sich Next.JS unter anderem den Host 207.154.209.99 aus dem HTTP-Header der ursprünglichen Anfrage.
• Next.JS fragt die URL zunächst mit einem HTTP HEAD ab.
• Wenn die Antwort einen Header Content-Type: text/x-component zurückgibt, fragt Next.JS die URL mit einem HTTP GET ab.

Ausnutzung

Um einen SSRF auf dem Zielserver zu erreichen, muss man daher einen anderen Server ausführen:

• der auf allen Routen (Query-Path) hört
• der für jede HEAD-Anfrage einen HTTP 200 mit einem Header Content-Type: text/x-component zurückgibt
• der für jede GET-Anfrage einen HTTP 302 auf den Zielserver zurückgibt

Behebung der Schwachstelle in 8-ssrf-14.1.0

Lösung 1 (nicht dauerhaft): Nginx-Konfiguration zur Erzwingung des Hosts

In /etc/nginx/sites-available/nextjs

Vorher:

server {
  listen 80 default_server;
  location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

Nachher:

server {
  listen 80;
  server_name 207.154.209.99;
  location / {
    proxy_pass http://localhost:3000;
    proxy_set_header Host 207.154.209.99;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

Risiko von Nebeneffekten…

https://nginxtutorials.com/nginx-proxy_set_header-directive/

Lösung 2: Next.js aktualisieren

https://github.com/vercel/next.js/security/advisories/GHSA-fr5h-rqp8-mj6g

Hinweise

„Extra attributes from the server"

https://stackoverflow.com/questions/75337953/what-causes-nextjs-warning-extra-attributes-from-the-server-data-new-gr-c-s-c

„getStaticProps" wird in app/ nicht unterstützt. Mehr lesen: https://nextjs.org/docs/app/building-your-application/data-fetching

https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#static-site-generation-getstaticprops

https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration#step-4-migrating-pages

Seiten im App-Verzeichnis sind standardmäßig Server-Komponenten. Dies unterscheidet sich vom Pages-Verzeichnis, in dem Seiten Client-Komponenten sind.

Für das Upgrade auf Next.js 13 ist die Verwendung des neuen App Routers nicht erforderlich. Sie können weiterhin Seiten mit neuen Funktionen verwenden, die in beiden Verzeichnissen funktionieren.

Leistung

Wenn man die Ladeleistung der verschiedenen Lösungen vergleichen möchte, kann man die Web Core Vital Metriken per console.log hinzufügen.

https://web.dev/articles/fcp?hl=fr

weitere Quellen / Referenzen

https://rsc-parser.vercel.app/

https://stackoverflow.com/questions/76325862/what-is-the-difference-between-react-server-components-rsc-and-server-side-ren

https://github.com/reactjs/server-components-demo?tab=readme-ov-file#should-i-use-this-demo-for-benchmarks

https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md#does-this-replace-ssr

https://www.youtube.com/watch?v=jEJEFAc8tSI

ISR mit App Router?

https://nextjs.org/docs/pages/building-your-application/data-fetching/incremental-static-regeneration

Im Next.js App Router sind alle abgerufenen Daten standardmäßig statisch, d.h. sie werden zur Build-Zeit gerendert. Dies kann jedoch leicht geändert werden: Next.js erweitert das fetch-Optionenobjekt, um Flexibilität bei Caching- und Revalidierungsregeln zu bieten. Man kann die Option {next: {revalidate: number}} verwenden, um statische Daten in festgelegten Intervallen oder bei Backend-Änderungen zu aktualisieren (Incremental Static Regeneration), während die Option {cache: 'no-store'} in der fetch-Anfrage für dynamische Daten (Server-Side Rendering) übergeben werden kann.

https://www.telerik.com/blogs/current-state-react-server-components-guide-perplexed

https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components

https://github.com/reactjs/server-components-demo

https://dev.to/vteacher/let-s-make-a-web-application-with-react-server-components-5dmg

https://react.dev/blog/2024/04/25/react-19

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

https://www.youtube.com/watch?v=ePAPd9qzGyM

https://www.joshwcomeau.com/react/server-components/

https://nextjs.org/docs/app/building-your-application/rendering/server-components#server-rendering-strategies

https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation

https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-props

https://react.dev/reference/rsc/server-components#server-components-without-a-server