csr-rsc-ssg-isr-ssr-ssrf

This repo can be used as support to present one or more meetup(s). The path is as follows...

• "CSR" Client Side Rendering: React as a standard SPA library
• "RSC" React Server Components: execution of React components only on the server side
• "SSG" Static Site Generation: execution of React components during the build
• "ISR" Incremental Static Regeneration: regeneration of components on demand
• "SSR" Server Side Rendering: pre-rendering on the server side then execution (hydration) on the client side
• "SSRF" Server Side Request Forgery: a security vulnerability recently fixed in Next.JS

This work is mainly based on two 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.

demo

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.

demo

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.

demo

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.

demo

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/

demo

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.

demo

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."

demo

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

Why 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)

Definition of SSRF

...

Why?

• If we have access to a vulnerable server but not directly to the target server (DMZ, FireWall...)
• If we want to execute requests while hiding our own origin
• ...

Demo 8-ssrf-14.1.0

Context

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

Objective

Conditions to exploit CVE-2024-34351

• A Next.JS-based application with version lower than 14.1.1
• Use of the redirect function, with an absolute path. In the demo, in addTodo.js: redirect(/blog/${inputValue});

How the redirect function works

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