Protegendo sua Aplicação com CSRF no Lithe

Neste tutorial, vamos aprender a implementar proteção CSRF (Cross-Site Request Forgery) no Lithe, para evitar que requisições indesejadas sejam feitas na sua aplicação. Este guia é pensado para iniciantes, então vamos por partes!

O que é CSRF?

CSRF, ou Cross-Site Request Forgery, é um tipo de ataque onde um usuário é enganado para executar uma ação não autorizada em um site no qual está autenticado. Esse ataque é perigoso pois o invasor pode manipular dados ou acessar áreas restritas. Para evitar isso, adicionamos uma camada de segurança que impede que requisições suspeitas sejam processadas.

Estrutura do Tutorial

1. Configurar o Lithe
2. Instalar o Middleware CSRF
3. Adicionar o Token CSRF no Backend
4. Verificar o Token no Backend
5. Enviar o Token pelo Frontend
6. Testar a Proteção CSRF

Vamos começar!

Passo 1: Configurando o Lithe

Se você ainda não tem o Lithe configurado, comece instalando o framework com o comando abaixo:

composer create-project lithephp/lithephp nome-do-projeto
cd nome-do-projeto

Isso cria uma estrutura básica para o seu projeto com Lithe.

Passo 2: Instalando o Middleware CSRF

O middleware CSRF ajuda a gerar e validar tokens CSRF. Para instalar, execute o seguinte comando no terminal dentro do seu projeto:

composer require lithemod/csrf

Passo 3: Configurando o Middleware CSRF

Agora, precisamos dizer ao Lithe que queremos usar o middleware CSRF. Abra o arquivo principal src/App.php e adicione o middleware CSRF.

use Lithe\Middleware\Security\csrf;
use function Lithe\Orbis\Http\Router\router;

$app = new \Lithe\App;

// Configura o middleware CSRF com verificação automática no corpo da requisição
$app->use(csrf([
    'expire' => 600, // Expiração do token após 10 minutos
    'checkBody' => true, // Habilita a verificação automática no corpo
    'bodyMethods' => ['POST', 'PUT', 'DELETE'], // Define os métodos para verificar o CSRF no corpo
]));

$app->use(router(__DIR__ . '/routes/web'));

$app->listen();

Com isso, o middleware CSRF está ativo em nossa aplicação, e toda requisição que precise de proteção deverá incluir um token válido.

Passo 4: Gerando o Token CSRF

Para usar a proteção CSRF, precisamos gerar um token único e incluí-lo nas requisições. Vamos criar uma rota para enviar um formulário que inclui automaticamente o token CSRF.

1. Crie um arquivo chamado src/routes/web.php, e adicione a rota do formulário com um campo para o token CSRF.

use Lithe\Http\{Request, Response};
use function Lithe\Orbis\Http\Router\get;

get('/form', function (Request $req, Response $res) {
    // Gera o campo de token CSRF
    $tokenField = $req->csrf->getTokenField();

    // Envia o HTML com o token incluído no formulário
    return $res->send("
        <form method='POST' action='/submit'>
            $tokenField
            <input type='text' name='data' placeholder='Digite algo' required>
            <button type='submit'>Enviar</button>
        </form>
    ");
});

1. Essa rota cria um formulário que inclui o campo do token CSRF. O campo é obrigatório para que o Lithe verifique a autenticidade da requisição.

Passo 5: Verificando o Token no Backend

Quando o formulário for enviado, o Lithe verificará automaticamente se o token é válido. Agora, vamos criar a rota que vai receber e processar o formulário.

1. No mesmo arquivo src/routes/web.php, adicione a rota para processar o envio do formulário.

use function Lithe\Orbis\Http\Router\post;

post('/submit', function (Request $req, Response $res) {
    // O Lithe verifica automaticamente o token, então só precisamos processar os dados
    $data = $req->input('data');
    return $res->json([
        'message' => 'Dados recebidos com sucesso!',
        'data' => $data,
    ]);
});

Se o token for inválido ou estiver ausente, o Lithe automaticamente bloqueará a requisição e retornará um erro.

Passo 6: Enviando Requisições com o Token CSRF

No frontend, sempre que precisar enviar uma requisição POST (ou outro método de alteração de dados), é importante incluir o token CSRF no corpo da requisição ou no cabeçalho, dependendo de como configurou seu middleware.

Exemplo com JavaScript Fetch API

Para quem usa JavaScript, aqui está um exemplo de como enviar o token com uma requisição fetch:

fetch('/submit', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: '_token=' + document.querySelector('input[name="_token"]').value + '&data=exemplo'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Erro:', error));

Passo 7: Testando a Proteção CSRF

1. Acesse a rota /form no navegador. Você verá o formulário com o token CSRF incluído.
2. Preencha o campo e envie o formulário.
3. Se tudo estiver funcionando, você verá uma mensagem de sucesso com os dados enviados.

Resumo e Considerações Finais

Neste tutorial, aprendemos:

• O que é e por que o CSRF é importante.
• Como configurar um middleware CSRF no Lithe.
• Como gerar e verificar tokens CSRF no backend.
• Como enviar tokens CSRF com formulários e requisições AJAX.

Com essa proteção implementada, você torna sua aplicação mais segura contra ataques CSRF, ajudando a proteger a integridade dos dados dos seus usuários.

Para informações mais detalhadas, confira a Documentação Oficial do Lithe.