csr-rsc-ssg-isr-ssr-ssrf

Questa repo può servire da supporto per presentare uno o più meetup. Il percorso è il seguente...

• "CSR" Client Side Rendering: React come libreria SPA standard
• "RSC" React Server Components: esecuzione di componenti React solo lato server
• "SSG" Static Site Generation: esecuzione di componenti React durante la build
• "ISR" Incremental Static Regeneration: rigenerazione di componenti su richiesta
• "SSR" Server Side Rendering: pre-rendering lato server ed esecuzione (hydration) lato client
• "SSRF" Server Side Request Forgery: una vulnerabilità di sicurezza corretta di recente in Next.JS

Questo lavoro si basa principalmente su due fonti:

• 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 caricamento dati

[!IMPORTANT] CSR (Client-Side Rendering): il codice React viene consegnato al browser, che genera contenuti inseriti nel DOM.

demo

cd 1-csr-load-data
npm start

2-csr-router vanilla react SPA routing

[!IMPORTANT] Dopo il primo caricamento della pagina, la navigazione verso altre pagine dello stesso sito utilizza JavaScript per ri-renderizzare parti della pagina senza richiedere un aggiornamento completo della pagina.

demo

cd 2-csr-router
npm start

RSC React Server Components

3-rsc-load-data React Server Components (implementazione Next.js) caricamento dati

[!IMPORTANT] Componenti React scritti per essere eseguiti solo sul server, piuttosto che nel browser.

demo

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

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

[!IMPORTANT] I componenti vengono eseguiti solo sul server. Il comportamento predefinito è il rendering statico: i componenti vengono eseguiti in fase di build.

demo

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

5-SSR SSR Server Side Rendering

[!IMPORTANT] SSR significa prerenderizzare i componenti client sul server. Il codice React viene eseguito nel momento in cui viene richiesto. Il risultato può essere memorizzato nella cache per richieste future.

Buona pratica: definire i componenti 'use client'; il più in basso possibile nell'albero dei componenti.

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

Hydration

[!IMPORTANT] "In React, “hydration” è il modo in cui React si “aggancia” all'HTML esistente che è già stato renderizzato da React in un ambiente server. Durante l'hydration, React tenterà di collegare i listener di eventi al markup esistente e di subentrare nel rendering dell'app sul client. Nelle app completamente costruite con React, di solito si idrata una sola “root”, una volta all'avvio dell'intera 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 (implementazione Next.js)

[!IMPORTANT] SSG (Static Site Generation) con il pages router: il codice React viene eseguito quando compili l'applicazione e l'output generato è statico.

demo

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

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

[!IMPORTANT] ISR (con il pages router): "Next.js ti consente di creare o aggiornare pagine statiche dopo aver creato il tuo sito. L'Incremental Static Regeneration (ISR) ti permette di usare la generazione statica in base alla singola pagina, senza dover ricostruire l'intero sito. Con l'ISR puoi mantenere i vantaggi della staticità scalando fino a milioni di pagine."

demo

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

Perché ISR?

"i dati potrebbero diventare obsoleti al momento della richiesta"

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

Server actions

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

SSRF (corretta in NextJS v14.1.1)

Definizione di SSRF

...

Perché?

• Se si ha accesso a un server vulnerabile ma non al server di destinazione direttamente (DMZ, FireWall...)
• Se si vogliono eseguire richieste nascondendo la propria origine
• ...

Demo 8-ssrf-14.1.0

Contesto

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

Obiettivo

Condizioni per sfruttare la CVE-2024-34351

• Un'applicazione basata su Next.JS con versione inferiore alla 14.1.1
• L'uso della funzione redirect, con un percorso assoluto. Nella demo, in addTodo.js: redirect(/blog/${inputValue});