Estrutura de Arquivos:

my-nextjs-app/
├── app/
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

Arquivos Chave:

• app/page.tsx: Manipula solicitações para o caminho raiz /.
• app/layout.tsx: Define o layout para a aplicação, envolvendo todas as páginas.

Implementação:

tsxCopy code// app/page.tsx

export default function HomePage() {
return (
<div>
<h1>Welcome to the Home Page!</h1>
<p>This is the root route.</p>
</div>
);
}

Explicação:

• Definição de Rota: O arquivo page.tsx diretamente sob o diretório app corresponde à rota /.
• Renderização: Este componente renderiza o conteúdo da página inicial.
• Integração de Layout: O componente HomePage é envolto pelo layout.tsx, que pode incluir cabeçalhos, rodapés e outros elementos comuns.

Exemplo: Rota /about

Estrutura de Arquivos:

arduinoCopy codemy-nextjs-app/
├── app/
│   ├── about/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

Implementação:

// app/about/page.tsx

export default function AboutPage() {
return (
<div>
<h1>About Us</h1>
<p>Learn more about our mission and values.</p>
</div>
)
}

Explicação:

• Definição de Rota: O arquivo page.tsx dentro da pasta about corresponde à rota /about.
• Renderização: Este componente renderiza o conteúdo da página sobre.

Rotas dinâmicas permitem o manuseio de caminhos com segmentos variáveis, permitindo que aplicações exibam conteúdo com base em parâmetros como IDs, slugs, etc.

Exemplo: Rota /posts/[id]

Estrutura de Arquivo:

arduinoCopy codemy-nextjs-app/
├── app/
│   ├── posts/
│   │   └── [id]/
│   │       └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

Implementação:

tsxCopy code// app/posts/[id]/page.tsx

import { useRouter } from 'next/navigation';

interface PostProps {
params: { id: string };
}

export default function PostPage({ params }: PostProps) {
const { id } = params;
// Fetch post data based on 'id'

return (
<div>
<h1>Post #{id}</h1>
<p>This is the content of post {id}.</p>
</div>
);
}

Explicação:

• Segmento Dinâmico: [id] denota um segmento dinâmico na rota, capturando o parâmetro id da URL.
• Acessando Parâmetros: O objeto params contém os parâmetros dinâmicos, acessíveis dentro do componente.
• Correspondência de Rota: Qualquer caminho que corresponda a /posts/*, como /posts/1, /posts/abc, etc., será tratado por este componente.

Next.js suporta roteamento aninhado, permitindo estruturas de rota hierárquicas que refletem o layout do diretório.

Exemplo: Rota /dashboard/settings/profile

Estrutura de Arquivos:

arduinoCopy codemy-nextjs-app/
├── app/
│   ├── dashboard/
│   │   ├── settings/
│   │   │   └── profile/
│   │   │       └── page.tsx
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

Implementação:

tsxCopy code// app/dashboard/settings/profile/page.tsx

export default function ProfileSettingsPage() {
return (
<div>
<h1>Profile Settings</h1>
<p>Manage your profile information here.</p>
</div>
);
}

Explicação:

• Aninhamento Profundo: O arquivo page.tsx dentro de dashboard/settings/profile/ corresponde à rota /dashboard/settings/profile.
• Reflexão de Hierarquia: A estrutura de diretórios reflete o caminho da URL, melhorando a manutenibilidade e clareza.

Rotas catch-all lidam com múltiplos segmentos aninhados ou caminhos desconhecidos, proporcionando flexibilidade no manuseio de rotas.

Exemplo: Rota /*

Estrutura de Arquivos:

my-nextjs-app/
├── app/
│   ├── [..slug]/
│   │   └── page.tsx
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── next.config.js
└── ...

Implementação:

// app/[...slug]/page.tsx

interface CatchAllProps {
params: { slug: string[] }
}

export default function CatchAllPage({ params }: CatchAllProps) {
const { slug } = params
const fullPath = `/${slug.join("/")}`

return (
<div>
<h1>Catch-All Route</h1>
<p>You have navigated to: {fullPath}</p>
</div>
)
}

Explicação:

• Segmento Catch-All: [...slug] captura todos os segmentos de caminho restantes como um array.
• Uso: Útil para lidar com cenários de roteamento dinâmico, como caminhos gerados por usuários, categorias aninhadas, etc.
• Correspondência de Rota: Caminhos como /anything/here, /foo/bar/baz, etc., são tratados por este componente.

Os ataques XSS ocorrem quando scripts maliciosos são injetados em sites confiáveis. Os atacantes podem executar scripts nos navegadores dos usuários, roubando dados ou realizando ações em nome do usuário.

Exemplo de Código Vulnerável:

// Dangerous: Injecting user input directly into HTML
function Comment({ userInput }) {
return <div dangerouslySetInnerHTML={{ __html: userInput }} />
}

Por que é vulnerável: Usar dangerouslySetInnerHTML com entrada não confiável permite que atacantes injetem scripts maliciosos.

Ocorre quando as entradas do usuário são manipuladas de forma inadequada em templates, permitindo que atacantes injetem e executem templates ou expressões.

Exemplo de Código Vulnerável:

import React from "react"
import ejs from "ejs"

function RenderTemplate({ template, data }) {
const html = ejs.render(template, data)
return <div dangerouslySetInnerHTML={{ __html: html }} />
}

Por que é vulnerável: Se template ou data incluir conteúdo malicioso, isso pode levar à execução de código não intencional.

É 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 pontos finais maliciosos.

Exemplo de Código Vulnerável:

Uma aplicação Next.js permite que os usuários façam upload e download de arquivos. O recurso de download é implementado no lado do cliente, onde os usuários podem especificar o caminho do arquivo a ser baixado.

// pages/download.js
import { useState } from "react"

export default function DownloadPage() {
const [filePath, setFilePath] = useState("")

const handleDownload = () => {
fetch(`/api/files/${filePath}`)
.then((response) => response.blob())
.then((blob) => {
const url = window.URL.createObjectURL(blob)
const a = document.createElement("a")
a.href = url
a.download = filePath
a.click()
})
}

return (
<div>
<h1>Download File</h1>
<input
type="text"
value={filePath}
onChange={(e) => setFilePath(e.target.value)}
placeholder="Enter file path"
/>
<button onClick={handleDownload}>Download</button>
</div>
)
}

Cenário de Ataque

1. Objetivo do Atacante: Realizar um ataque CSRF para deletar um arquivo crítico (por exemplo, admin/config.json) manipulando o filePath.
2. Explorando CSPT:

• Entrada Maliciosa: O atacante cria uma URL com um filePath manipulado, como ../deleteFile/config.json.
• Chamada de API Resultante: O código do lado do cliente faz uma solicitação para /api/files/../deleteFile/config.json.
• Tratamento pelo Servidor: Se o servidor não validar o filePath, ele processa a solicitação, potencialmente deletando ou expondo arquivos sensíveis.

3. Executando CSRF:

• Link Criado: O atacante envia à vítima um link ou incorpora um script malicioso que aciona a solicitação de download com o filePath manipulado.
• Resultado: A vítima executa a ação sem saber, levando ao acesso não autorizado ou exclusão de arquivos.

Por Que É Vulnerável

• Falta de Validação de Entrada: O lado do cliente permite entradas arbitrárias de filePath, possibilitando a travessia de caminho.
• Confiando nas Entradas do Cliente: A API do lado do servidor confia e processa o filePath sem sanitização.
• Ações Potenciais da API: Se o endpoint da API realiza ações que alteram o estado (por exemplo, deletar, modificar arquivos), pode ser explorado via CSPT.

Next.js 13+ permite que você defina manipuladores para métodos HTTP específicos dentro do mesmo arquivo route.js ou route.ts, promovendo um código mais claro e organizado.

Exemplo:

// app/api/users/[id]/route.js

export async function GET(request, { params }) {
const { id } = params
// Fetch user data based on 'id'
return new Response(JSON.stringify({ userId: id, name: "Jane Doe" }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

export async function PUT(request, { params }) {
const { id } = params
// Update user data based on 'id'
return new Response(JSON.stringify({ message: `User ${id} updated.` }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

export async function DELETE(request, { params }) {
const { id } = params
// Delete user based on 'id'
return new Response(JSON.stringify({ message: `User ${id} deleted.` }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

Explicação:

• Múltiplas Exportações: Cada método HTTP (GET, PUT, DELETE) tem sua própria função exportada.
• Parâmetros: O segundo argumento fornece acesso aos parâmetros de rota via params.
• Respostas Aprimoradas: Maior controle sobre objetos de resposta, permitindo gerenciamento preciso de cabeçalhos e códigos de status.

Next.js 13+ suporta recursos avançados de roteamento, como rotas catch-all e rotas de API aninhadas, permitindo estruturas de API mais dinâmicas e escaláveis.

Exemplo de Rota Catch-All:

// app/api/[...slug]/route.js

export async function GET(request, { params }) {
const { slug } = params
// Handle dynamic nested routes
return new Response(JSON.stringify({ slug }), {
status: 200,
headers: { "Content-Type": "application/json" },
})
}

Explicação:

• Sintaxe: [...] denota um segmento abrangente, capturando todos os caminhos aninhados.
• Uso: Útil para APIs que precisam lidar com profundidades de rota variadas ou segmentos dinâmicos.

Exemplo de Rotas Aninhadas:

// app/api/posts/[postId]/comments/[commentId]/route.js

export async function GET(request, { params }) {
const { postId, commentId } = params
// Fetch specific comment for a post
return new Response(
JSON.stringify({ postId, commentId, comment: "Great post!" }),
{
status: 200,
headers: { "Content-Type": "application/json" },
}
)
}

Explicação:

• Aninhamento Profundo: Permite estruturas de API hierárquicas, refletindo relacionamentos de recursos.
• Acesso a Parâmetros: Acesso fácil a múltiplos parâmetros de rota via o objeto params.

Rotas de API no Diretório pages (Next.js 12 e versões anteriores)

Antes que o Next.js 13 introduzisse o diretório app e melhorasse as capacidades de roteamento, as rotas de API eram definidas principalmente dentro do diretório pages. Essa abordagem ainda é amplamente utilizada e suportada no Next.js 12 e versões anteriores.

Rota de API Básica

Estrutura de Arquivos:

goCopy codemy-nextjs-app/
├── pages/
│   └── api/
│       └── hello.js
├── package.json
└── ...

Implementação:

javascriptCopy code// pages/api/hello.js

export default function handler(req, res) {
res.status(200).json({ message: 'Hello, World!' });
}

Explicação:

• Localização: As rotas da API residem no diretório pages/api/.
• Exportação: Use export default para definir a função manipuladora.
• Assinatura da Função: O manipulador recebe os objetos req (requisição HTTP) e res (resposta HTTP).
• Roteamento: O nome do arquivo (hello.js) mapeia para o endpoint /api/hello.

Rotas de API Dinâmicas

Estrutura de Arquivos:

bashCopy codemy-nextjs-app/
├── pages/
│   └── api/
│       └── users/
│           └── [id].js
├── package.json
└── ...

Implementação:

javascriptCopy code// pages/api/users/[id].js

export default function handler(req, res) {
const {
query: { id },
method,
} = req;

switch (method) {
case 'GET':
// Fetch user data based on 'id'
res.status(200).json({ userId: id, name: 'John Doe' });
break;
case 'PUT':
// Update user data based on 'id'
res.status(200).json({ message: `User ${id} updated.` });
break;
case 'DELETE':
// Delete user based on 'id'
res.status(200).json({ message: `User ${id} deleted.` });
break;
default:
res.setHeader('Allow', ['GET', 'PUT', 'DELETE']);
res.status(405).end(`Method ${method} Not Allowed`);
}
}

Explicação:

• Segmentos Dinâmicos: Colchetes ([id].js) denotam segmentos de rota dinâmicos.
• Acessando Parâmetros: Use req.query.id para acessar o parâmetro dinâmico.
• Tratando Métodos: Utilize lógica condicional para lidar com diferentes métodos HTTP (GET, PUT, DELETE, etc.).

Tratando Diferentes Métodos HTTP

Enquanto o exemplo básico de rota da API lida com todos os métodos HTTP dentro de uma única função, você pode estruturar seu código para lidar com cada método explicitamente para melhor clareza e manutenibilidade.

Exemplo:

javascriptCopy code// pages/api/posts.js

export default async function handler(req, res) {
const { method } = req;

switch (method) {
case 'GET':
// Handle GET request
res.status(200).json({ message: 'Fetching posts.' });
break;
case 'POST':
// Handle POST request
res.status(201).json({ message: 'Post created.' });
break;
default:
res.setHeader('Allow', ['GET', 'POST']);
res.status(405).end(`Method ${method} Not Allowed`);
}
}

Melhores Práticas:

• Separação de Preocupações: Separe claramente a lógica para diferentes métodos HTTP.
• Consistência de Resposta: Garanta estruturas de resposta consistentes para facilitar o manuseio do lado do cliente.
• Tratamento de Erros: Lide graciosamente com métodos não suportados e erros inesperados.

Headers de segurança aumentam a segurança da sua aplicação, instruindo os navegadores sobre como lidar com o conteúdo. Eles ajudam a mitigar vários ataques, como Cross-Site Scripting (XSS), Clickjacking e sniffing de tipo MIME:

• Content Security Policy (CSP)
• X-Frame-Options
• X-Content-Type-Options
• Strict-Transport-Security (HSTS)
• Referrer Policy

Exemplos:

// next.config.js

module.exports = {
async headers() {
return [
{
source: "/(.*)", // Apply to all routes
headers: [
{
key: "X-Frame-Options",
value: "DENY",
},
{
key: "Content-Security-Policy",
value:
"default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval';",
},
{
key: "X-Content-Type-Options",
value: "nosniff",
},
{
key: "Strict-Transport-Security",
value: "max-age=63072000; includeSubDomains; preload", // Enforces HTTPS
},
{
key: "Referrer-Policy",
value: "no-referrer", // Completely hides referrer
},
// Additional headers...
],
},
]
},
}

Next.js otimiza imagens para desempenho, mas configurações incorretas podem levar a vulnerabilidades de segurança, como permitir que fontes não confiáveis injetem conteúdo malicioso.

Exemplo de Configuração Ruim:

// next.config.js

module.exports = {
images: {
domains: ["*"], // Allows images from any domain
},
}

Problema:

• '*': Permite que imagens sejam carregadas de qualquer fonte externa, incluindo domínios não confiáveis ou maliciosos. Ataque pode hospedar imagens contendo cargas úteis maliciosas ou conteúdo que engana os usuários.
• Outro problema pode ser permitir um domínio onde qualquer um pode fazer upload de uma imagem (como raw.githubusercontent.com)

Como os atacantes abusam disso:

Ao injetar imagens de fontes maliciosas, os atacantes podem realizar ataques de phishing, exibir informações enganosas ou explorar vulnerabilidades em bibliotecas de renderização de imagens.

Gerencie informações sensíveis como chaves de API e credenciais de banco de dados de forma segura, sem expô-las ao cliente.

a. Expondo Variáveis Sensíveis

Exemplo de Configuração Ruim:

// next.config.js

module.exports = {
env: {
SECRET_API_KEY: process.env.SECRET_API_KEY, // Exposed to the client
NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL, // Correctly prefixed for client
},
}

Problema:

• SECRET_API_KEY: Sem o prefixo NEXT_PUBLIC_, o Next.js não expõe variáveis para o cliente. No entanto, se prefixado por engano (por exemplo, NEXT_PUBLIC_SECRET_API_KEY), torna-se acessível no lado do cliente.

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 as requisições de rede, obtendo acesso não autorizado a APIs, bancos de dados ou outros serviços.

Gerencie redirecionamentos e reescritas de URL dentro de sua aplicação, garantindo que os usuários sejam direcionados adequadamente sem introduzir vulnerabilidades de redirecionamento aberto.

a. Vulnerabilidade de Redirecionamento Aberto

Exemplo de Configuração Ruim:

// next.config.js

module.exports = {
async redirects() {
return [
{
source: "/redirect",
destination: (req) => req.query.url, // Dynamically redirects based on query parameter
permanent: false,
},
]
},
}

Problema:

• Destino Dinâmico: Permite que os usuários especifiquem qualquer URL, possibilitando ataques de redirecionamento aberto.
• Confiando na Entrada do Usuário: Redirecionar para URLs fornecidas pelos usuários sem validação pode levar a phishing, distribuição de malware ou roubo de credenciais.

Como os atacantes abusam disso:

Os atacantes podem criar URLs que parecem originar do seu domínio, mas redirecionam os usuários para sites maliciosos. Por exemplo:

https://yourdomain.com/redirect?url=https://malicious-site.com

Os usuários que confiam no domínio original podem, sem saber, navegar para sites prejudiciais.

Personalize as configurações do Webpack para sua aplicação Next.js, que podem inadvertidamente introduzir vulnerabilidades de segurança se não forem tratadas com cautela.

a. Expondo Módulos Sensíveis

Exemplo de Configuração Ruim:

// next.config.js

module.exports = {
webpack: (config, { isServer }) => {
if (!isServer) {
config.resolve.alias["@sensitive"] = path.join(__dirname, "secret-folder")
}
return config
},
}

Problema:

• Expondo Caminhos Sensíveis: Alias de diretórios sensíveis e permitindo acesso do lado do cliente pode vazar informações confidenciais.
• Agrupando Segredos: Se arquivos sensíveis forem agrupados para o cliente, seu conteúdo se torna acessível através de mapas de origem ou inspecionando o código do lado do cliente.

Como os atacantes abusam disso:

Os atacantes podem acessar ou reconstruir a estrutura de diretórios da aplicação, potencialmente encontrando e explorando arquivos ou dados sensíveis.