csr-rsc-ssg-isr-ssr-ssrf

Ce repo peut servir de support pour présenter un ou plusieurs meetup(s). Le parcours est le suivant...

• "CSR" Client Side Rendering : React en tant que lib SPA standard
• "RSC" React Server Components : exécution de composants React uniquement côté serveur
• "SSG" Static Site Generation : exécution de composants React pendant le build
• "ISR" Incremental Static Regeneration : re-génération de composants à la demande
• "SSR" Server Side Rendering : pre-rendering côté serveur puis exécution (hydration) côté client
• "SSRF" Server Side Request Forgery : une faille de sécurité corrigée récemment dans Next.JS

Ce travail est basé principalement sur deux sources :

• 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 is delivered to the browser, which generates content that is inserted into the DOM.

démo

cd 1-csr-load-data
npm start

2-csr-router vanilla react SPA routing

[!IMPORTANT] After the page has been loaded for the first time, navigating to other pages on the same website uses JavaScript to re-render parts of the page without requiring a full page refresh.

démo

cd 2-csr-router
npm start

RSC React Server Components

3-rsc-load-data React Server Components (Next.js impl) loading data

[!IMPORTANT] React components which are written to run only on the server, rather than in the browser.

démo

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

4-rsc-router React Server Components (Next.js impl) routing

[!IMPORTANT] Components are executed only on the server. The default behavior is static rendering: components are executed at build time.

démo

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

5-SSR SSR Server Side Rendering

[!IMPORTANT] SSR means prerendering client components on the server. React code runs at the time it is requested. The result may be cached for future requests.

Best practice: define 'use client'; components as far down the component tree as possible.

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

Hydration

[!IMPORTANT] "In React, “hydration” is how React “attaches” to existing HTML that was already rendered by React in a server environment. During hydration, React will attempt to attach event listeners to the existing markup and take over rendering the app on the client. In apps fully built with React, you will usually only hydrate one “root”, once at startup for your entire app."

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

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

démo

cd 5-ssr
npm run build
npm run start

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

[!IMPORTANT] SSG (Static Site Generation) using the pages router: React code is run when you build your application, and the generated output is static.

démo

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

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

[!IMPORTANT] ISR (using pages router): "Next.js allows you to create or update static pages after you’ve built your site. Incremental Static Regeneration (ISR) enables you to use static-generation on a per-page basis, without needing to rebuild the entire site. With ISR, you can retain the benefits of static while scaling to millions of pages."

démo

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

Pourquoi ISR ?

"the data could become stale at request time"

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

Server actions

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

SSRF (fixed in NextJS v14.1.1)

Définition SSRF

...

Pourquoi ?

• Si on a accès à un serveur vulnérable mais pas au serveur cible directement (DMZ, FireWall...)
• Si on veut exécuter des requêtes en masquant sa propre origine
• ...

Démo 8-ssrf-14.1.0

Contexte

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

Objectif

Conditions pour exploiter la CVE-2024-34351

• Une application basée sur Next.JS en version inférieure à la 14.1.1
• L'utilisation de la fonction redirect, avec un chemin absolu. Dans la démo, dans addTodo.js : redirect(/blog/${inputValue});

Fonctionnement de la fonction redirect

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