Translated ['network-services-pentesting/pentesting-web/nextjs.md'] to p

This commit is contained in:
Translator 2024-12-18 02:37:11 +00:00
parent 607c3f8514
commit 793348d8d9

View file

@ -56,9 +56,9 @@ my-nextjs-app/
```
### Diretórios e Arquivos Principais
* **public/:** Hospeda ativos estáticos, como imagens, fontes e outros arquivos. Os arquivos aqui são acessíveis no caminho raiz (`/`).
* **public/:** Hospeda ativos estáticos, como imagens, fontes e outros arquivos. Os arquivos aqui são acessíveis na raiz (`/`).
* **app/:** Diretório central para as páginas, layouts, componentes e rotas da API da sua aplicação. Abrange o paradigma **App Router**, permitindo recursos avançados de roteamento e segregação de componentes servidor-cliente.
* **app/layout.tsx:** Define o layout raiz para sua aplicação, envolvendo todas as páginas e fornecendo elementos de UI consistentes, como cabeçalhos, rodapés e barras de navegação.
* **app/layout.tsx:** Define o layout raiz da sua aplicação, envolvendo todas as páginas e fornecendo elementos de UI consistentes, como cabeçalhos, rodapés e barras de navegação.
* **app/page.tsx:** Serve como o ponto de entrada para a rota raiz `/`, renderizando a página inicial.
* **app/\[route]/page.tsx:** Lida com rotas estáticas e dinâmicas. Cada pasta dentro de `app/` representa um segmento de rota, e `page.tsx` dentro dessas pastas corresponde ao componente da rota.
* **app/api/:** Contém rotas da API, permitindo que você crie funções serverless que lidam com requisições HTTP. Essas rotas substituem o diretório tradicional `pages/api`.
@ -166,7 +166,7 @@ Rotas dinâmicas permitem o manuseio de caminhos com segmentos variáveis, permi
**Exemplo: Rota `/posts/[id]`**
**Estrutura de Arquivo:**
**Estrutura de Arquivos:**
```arduino
arduinoCopy codemy-nextjs-app/
├── app/
@ -345,9 +345,9 @@ return <div dangerouslySetInnerHTML={{ __html: html }} />;
<details>
<summary>Travessia de Caminho do Cliente</summary>
<summary>Traversal de Caminho do Cliente</summary>
É uma vulnerabilidade que permite que atacantes manipulem caminhos do lado do cliente para realizar ações não intencionais, como Cross-Site Request Forgery (CSRF). Ao contrário da travessia de caminho do lado do servidor, que visa o sistema de arquivos do servidor, a CSPT foca em explorar mecanismos do lado do cliente para redirecionar solicitações de API legítimas para endpoints maliciosos.
É uma vulnerabilidade que permite que atacantes manipulem caminhos do lado do cliente para realizar ações não intencionais, como Cross-Site Request Forgery (CSRF). Ao contrário do traversal de caminho do lado do servidor, que visa o sistema de arquivos do servidor, o CSPT foca em explorar mecanismos do lado do cliente para redirecionar solicitações de API legítimas para endpoints maliciosos.
**Exemplo de Código Vulnerável:**
@ -466,7 +466,7 @@ Next.js permite a criação de endpoints de API como funções serverless. Essas
**Implementação:**
Com a introdução do diretório `app` no Next.js 13, o roteamento e o manuseio de APIs se tornaram mais flexíveis e poderosos. Essa abordagem moderna se alinha de perto com o sistema de roteamento baseado em arquivos, mas introduz capacidades aprimoradas, incluindo suporte para componentes de servidor e cliente.
Com a introdução do diretório `app` no Next.js 13, o roteamento e o manuseio de API se tornaram mais flexíveis e poderosos. Essa abordagem moderna se alinha de perto com o sistema de roteamento baseado em arquivos, mas introduz capacidades aprimoradas, incluindo suporte para componentes de servidor e cliente.
#### Manipulador de Rota Básico
@ -511,7 +511,7 @@ body: JSON.stringify({ name: 'John Doe' }),
<details>
<summary>Manipulação de Métodos HTTP Específicos</summary>
<summary>Manipulando Métodos HTTP Específicos</summary>
@ -612,7 +612,7 @@ Antes que o Next.js 13 introduzisse o diretório `app` e melhorasse as capacidad
#### Rota de API Básica
**Estrutura de Arquivos:**
**Estrutura de Arquivo:**
```go
goCopy codemy-nextjs-app/
├── pages/
@ -735,7 +735,7 @@ headers: {
});
}
```
Note que **CORS também pode ser configurado em todas as rotas da API** dentro do arquivo **`middleware.ts`**:
Observe que **CORS também pode ser configurado em todas as rotas da API** dentro do arquivo **`middleware.ts`**:
```javascript
// app/middleware.ts
@ -785,7 +785,7 @@ Os atacantes podem criar sites maliciosos que fazem solicitações à sua API, p
[cors-bypass.md](../../pentesting-web/cors-bypass.md)
{% endcontent-ref %}
## Exposição de código do servidor no lado do cliente
### Exposição de código do servidor no lado do cliente
É fácil **usar código usado pelo servidor também no código exposto e usado pelo lado do cliente**, a melhor maneira de garantir que um arquivo de código nunca seja exposto no lado do cliente é usando esta importação no início do arquivo:
```js
@ -941,7 +941,7 @@ NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL, // Correctly prefixed for
**Como os atacantes abusam disso:**
Se variáveis sensíveis forem expostas ao cliente, os atacantes podem recuperá-las inspecionando o código do lado do cliente ou solicitações de rede, obtendo acesso não autorizado a APIs, bancos de dados ou outros serviços.
Se variáveis sensíveis forem expostas ao cliente, os atacantes podem recuperá-las inspecionando o código do lado do cliente ou as requisições de rede, obtendo acesso não autorizado a APIs, bancos de dados ou outros serviços.
</details>