Skip to content
KitploitKITPLOIT
FerramentasBlog
Enviar
FerramentasBlog
Enviar

Ferramentas de Hacking, PenTest e Cibersegurança para o seu Arsenal de Segurança!

Kitploit é um diretório de ferramentas de hacking, cibersegurança e pentesting. Descubra as últimas atualizações de projetos para encontrar vulnerabilidades, analisar sistemas, automatizar testes e fortalecer sua segurança.

··Feeds·Contato·Privacidade·© 2026 Kitploit

Diretório de Ferramentas

Categorias

Ver todas as categorias
Loading categories
Next.js_exploit_CVE-2024-34351 — Repositório educacional que demonstra padrões de renderização Next.js (CSR, RSC, SSG, ISR, SSR) e um laboratório prático de exploração SSRF para CVE-2024-34351 com etapas de mitigação. | Kitploit
Ferramentas/GitHubGitHub/avergnaud/next.js_exploit_cve-2024-34351
Análise de VulnerabilidadesExploração de Aplicações WebSegurança WebAprendizado e EducaçãoLabs e Prática
GitHubavergnaud/next.js_exploit_cve-2024-34351

Next.js_exploit_CVE-2024-34351

Repositório educacional que demonstra padrões de renderização Next.js (CSR, RSC, SSG, ISR, SSR) e um laboratório prático de exploração SSRF para CVE-2024-34351 com etapas de mitigação.

Mais Populares

Ver todos →

Descubra as ferramentas mais usadas pela nossa comunidade.

Explore todas as ferramentas

Navegue pela nossa coleção de ferramentas

Ver todas as ferramentas →
Compartilhar
Ver Repositório
1há 2 anosAinda não revisado

csr-rsc-ssg-isr-ssr-ssrf

Este repositório pode servir de suporte para apresentar um ou mais meetup(s). O percurso é o seguinte…

  • "CSR" Client Side Rendering : React como biblioteca SPA padrão
  • "RSC" React Server Components : execução de componentes React apenas no lado do servidor
  • "SSG" Static Site Generation : execução de componentes React durante o build
  • "ISR" Incremental Static Regeneration : regeneração de componentes sob demanda
  • "SSR" Server Side Rendering : pre-rendering no lado do servidor e depois execução (hydration) no lado do cliente
  • "SSRF" Server Side Request Forgery : uma falha de segurança corrigida recentemente no Next.JS

Este trabalho é baseado principalmente em duas fontes:

  • https://demystifying-rsc.vercel.app/
  • https://www.assetnote.io/resources/research/digging-for-ssrf-in-nextjs-apps

mind map

CSR Client Side Rendering

1-csr-load-data vanilla react SPA loading data

mind map CSR

[!IMPORTANT] CSR (Client-Side Rendering): o código React é entregue ao navegador, que gera conteúdo que é inserido no DOM.

renderização do lado do cliente carregando dados

demonstração

root@kitploit:~
cd 1-csr-load-data
npm start

GIF de carregamento de dados CSR

2-csr-router vanilla react SPA routing

[!IMPORTANT] Após a página ser carregada pela primeira vez, navegar para outras páginas no mesmo site usa JavaScript para re-renderizar partes da página sem exigir uma atualização completa da página.

demonstração

root@kitploit:~
cd 2-csr-router
npm start

roteamento de renderização do lado do cliente

RSC React Server Components

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

mapa mental CSR

[!IMPORTANT] Componentes React que são escritos para executar apenas no servidor, e não no navegador.

React Server Components carregando dados

demonstração

root@kitploit:~
cd 3-rsc-load-data
npm run build
npm run start

roteamento de renderização do lado do cliente

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

mapa mental CSR

[!IMPORTANT] Os componentes são executados apenas no servidor. O comportamento padrão é a renderização estática: os componentes são executados no momento da construção.

demonstração

root@kitploit:~
cd 4-rsc-router
npm run build
npm run start

roteamento de componentes do servidor React

5-SSR SSR Server Side Rendering

mapa mental SSR

[!IMPORTANT] SSR significa pré-renderizar componentes do cliente no servidor. O código React é executado no momento em que é solicitado. O resultado pode ser armazenado em cache para requisições futuras.

Melhor prática: definir componentes 'use client'; o mais abaixo possível na árvore de componentes.

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

Hydration

[!IMPORTANT] "Em React, “hydration” é como React “anexa” ao HTML existente que já foi renderizado pelo React em um ambiente de servidor. Durante a hidratação, o React tentará anexar ouvintes de eventos à marcação existente e assumir a renderização do aplicativo no cliente. Em aplicativos totalmente construídos com React, você geralmente hidratará apenas uma “raiz”, uma vez na inicialização para todo o aplicativo."

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

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

demonstração

root@kitploit:~
cd 5-ssr
npm run build
npm run start

SSR

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

mapa mental page router SSG

[!IMPORTANT] SSG (Static Site Generation) usando o pages router: o código React é executado quando você constrói seu aplicativo, e a saída gerada é estática.

demonstração

root@kitploit:~
cd 6-pages-router-ssg
npm run build
npm run start

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

mapa mental page router ISR

[!IMPORTANT] ISR (usando pages router): "O Next.js permite que você crie ou atualize páginas estáticas depois de construir seu site. A Regeneração Estática Incremental (ISR) permite que você use geração estática por página, sem precisar reconstruir o site inteiro. Com ISR, você pode manter os benefícios do estático enquanto escala para milhões de páginas."

demonstração

root@kitploit:~
cd 7-pages-router-isr
npm run build
npm run start

Por que ISR?

"os dados podem se tornar obsoletos no momento da requisição"

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)

Definição SSRF

...

Por quê?

  • Se você tem acesso a um servidor vulnerável, mas não ao servidor alvo diretamente (DMZ, Firewall...)
  • Se você deseja executar requisições ocultando sua própria origem
  • ...

Demonstração 8-ssrf-14.1.0

Contexto

SSRF A

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

Objetivo

SSRF B, objetivo

Condições para explorar a CVE-2024-34351

  • Uma aplicação baseada em Next.JS em versão inferior a 14.1.1
  • O uso da função redirect, com um caminho absoluto. Na demonstração, em addTodo.js: redirect(/blog/${inputValue});

Funcionamento da função redirect

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

  • A função Next.JS redirect não retorna uma resposta HTTP 302 ao navegador.

Next.JS executa a requisição no lado do servidor e depois retorna o resultado ao navegador:

  • Para executar a requisição, Next.JS precisa construir a URL a ser chamada. Na demonstração, em addTodo.js: A função redirect('/blog/123'); constrói a URL http://207.154.209.99/blog/123. Para construir essa URL, Next.JS recupera, entre outros, o host 207.154.209.99 a partir do header HTTP da requisição inicial.
  • Next.JS começa por requisitar a URL com um HTTP HEAD.
  • Se a resposta retornar um header Content-Type: text/x-component, então Next.JS requisita a URL com um HTTP GET.

SSRF C, introdução

Exploração

Para resultar em um SSRF no servidor alvo, é necessário executar outro servidor:

  • que escuta em todas as rotas (query path)
  • que retorna um HTTP 200 com um header Content-Type: text/x-component, para toda requisição HEAD
  • que retorna um HTTP 302 para o servidor alvo, para toda requisição GET

SSRF D, exploit

GIF de demonstração do exploit

Correção da vulnerabilidade em 8-ssrf-14.1.0

Solução 1 (não permanente) : Configuração nginx para forçar o host

Em /etc/nginx/sites-available/nextjs

Antes:

root@kitploit:~
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;
  }
}

Depois:

root@kitploit:~
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;
  }
}

Risco de efeito colateral...

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

Solução 2 : atualizar Next.js

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

Notas

"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" is not supported in app/. Read more: 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

create-next-app

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

As páginas no diretório app são Server Components por padrão. Isso é diferente do diretório pages, onde as páginas são Client Components.

Atualizar para Next.js 13 não requer o uso do novo App Router. Você pode continuar usando pages com novos recursos que funcionam em ambos os diretórios

Desempenho

Se você quiser comparar o desempenho de carregamento para as diferentes soluções, pode adicionar as métricas web core vitals em console.log.

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

outras fontes / referências

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 usando App router?

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

No Next.js App Router, todos os dados buscados são estáticos por padrão, renderizados no momento da construção. No entanto, isso pode ser facilmente alterado: o Next.js estende o objeto de opções do fetch para fornecer flexibilidade nas regras de cache e revalidação. Você pode usar a opção {next: {revalidate: number}} para atualizar dados estáticos em intervalos definidos ou quando ocorrerem alterações no backend (Regeneração Estática Incremental), enquanto a opção {cache: 'no-store'} pode ser passada na requisição fetch para dados dinâmicos (renderização no lado do servidor).

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

Baixar ferramenta