avergnaud/next.js_exploit_cve-2024-34351Demostración educativa de una vulnerabilidad de Server-Side Request Forgery (SSRF) en Next.js (CVE-2024-34351), con ejemplos paso a paso de explotación y mitigación.
Este repositorio puede servir como soporte para presentar uno o varios meetup(s). El recorrido es el siguiente...
Este trabajo se basa principalmente en dos fuentes:
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.
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.
cd 2-csr-router
npm start
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.
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.
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.
[!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."
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.
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."
cd 7-pages-router-isr
npm run build
npm run start
"the data could become stale at request time"
...
8-ssrf-14.1.0
14.1.1redirect(/blog/${inputValue});Next.JS ejecuta la petición del lado del servidor, y luego devuelve el resultado al navegador:
redirect('/blog/123'); construye la URL http://207.154.209.99/blog/123.
Para construir esta URL, Next.JS obtiene el host 207.154.209.99 a partir del header HTTP de la petición inicial.Content-Type: text/x-component, entonces Next.JS realiza una petición HTTP GET a la URL.
Para lograr un SSRF en el servidor objetivo, es necesario ejecutar otro servidor:
Content-Type: text/x-component, para cualquier petición HEAD
8-ssrf-14.1.0En /etc/nginx/sites-available/nextjs
Antes:
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;
}
}
Después:
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;
}
}
Riesgo de efectos secundarios...
Pages in the app directory are Server Components by default. This is different from the pages directory where pages are Client Components.
Upgrading to Next.js 13 does not require using the new App Router. You can continue using pages with new features that work in both directories
Si se quieren comparar los rendimientos de carga para las diferentes soluciones, se pueden agregar las métricas web core vitales en console.log.
ISR using App router ?
In the Next.js App Router, all fetched data is now static by default, rendered at build time. However, this can be changed easily: Next.js extends the fetch options object to provide flexibility in caching and revalidating rules. You can use the {next: {revalidate: number}} option to refresh static data at set intervals or when backend changes occur (Incremental Static Regeneration), while the {cache: 'no-store'} option can be passed in the fetch request for dynamic data (server-side rendering).