React e Node.js sao as tecnologias mais usadas no desenvolvimento web em 2026. Proteger aplicacoes construidas com esse stack contra XSS e CSRF e essencial. Este guia mostra vulnerabilidades especificas dessas tecnologias e como corrigi-las.
Cross-Site Scripting (XSS) em aplicacoes React
React tem protecao nativa contra XSS na maioria dos casos. O JSX faz escape automatico de strings renderizadas, convertendo caracteres especiais em entidades HTML. Isso significa que renderizar uma variavel com chaves dentro de um paragrafo e seguro por padrao.
Porem existem situacoes perigosas. A propriedade dangerouslySetInnerHTML injeta HTML diretamente no DOM sem sanitizacao. Nunca use com dados do usuario. Se for absolutamente necessario, sanitize primeiro com bibliotecas como DOMPurify.
URLs tambem sao vetores de ataque. Links com href dinnamico podem executar JavaScript se o valor comecar com javascript seguido de dois pontos. Sempre valide URLs antes de usa-las verificando se comecam com https ou http.
Renderizacao no servidor (SSR) com Next.js requer cuidado extra. Dados injetados no HTML durante SSR nao passam pelo escape automatico do React. Serialize dados com bibliotecas seguras e nunca use JSON.stringify direto em templates HTML.
XSS em APIs Node.js Express
No backend Node.js, configure headers de seguranca usando o middleware Helmet. Helmet configura automaticamente Content-Security-Policy, X-Content-Type-Options, X-Frame-Options e outros headers que mitigam XSS.
Sanitize todo input recebido nas APIs. Use bibliotecas como express-validator para validar e sanitizar dados. Valide tipo, formato e tamanho de cada campo recebido. Nunca confie em dados vindos do cliente mesmo que a interface tenha validacao no frontend.
Content Security Policy (CSP) e uma das defesas mais eficazes contra XSS. Configure via header HTTP para especificar quais fontes de scripts sao permitidas. Uma CSP restritiva bloqueia scripts inline e permite apenas scripts de dominios especificos.
Cross-Site Request Forgery (CSRF)
CSRF forca um usuario autenticado a executar acoes indesejadas. O atacante cria uma pagina que faz requisicoes para sua aplicacao aproveitando os cookies de sessao do navegador da vitima.
Exemplo: a vitima esta logada no internet banking. O atacante envia um link para uma pagina maliciosa que contem um formulario oculto que faz uma transferencia bancaria. Quando a vitima acessa a pagina, o navegador envia automaticamente os cookies de sessao e a transferencia e realizada sem o conhecimento da vitima.
Protecao CSRF em Node.js
Token CSRF: gere um token unico por sessao e inclua em todo formulario. No servidor, valide o token antes de processar a requisicao. Use a biblioteca csurf ou csrf-csrf para Express.
SameSite Cookies: configure cookies de sessao com SameSite=Strict ou SameSite=Lax. Isso impede que o navegador envie cookies em requisicoes cross-origin. Em Express configure o cookie de sessao com a opcao sameSite definida como strict.
Double Submit Cookie: uma alternativa ao token CSRF. Gere um valor aleatorio, armazene em um cookie e envie tambem como header. O servidor valida que ambos os valores sao iguais. Como o atacante nao pode ler cookies de outro dominio, nao consegue forjar o header.
Checklist de seguranca para React com Node.js
No frontend React: nunca use dangerouslySetInnerHTML com dados do usuario, valide URLs antes de usa-las em href ou src, use CSP restritiva, sanitize dados com DOMPurify quando necessario, nao armazene tokens em localStorage e prefira httpOnly cookies.
No backend Node.js: use Helmet para headers de seguranca, implemente rate limiting com express-rate-limit, valide e sanitize todo input com express-validator, use HTTPS exclusivamente, configure CORS corretamente especificando origens permitidas, proteja contra CSRF com tokens e SameSite cookies, use bcrypt para hashing de senhas com custo minimo de 12.
Em ambos: mantenha dependencias atualizadas, execute npm audit regularmente, use ferramentas de SAST como ESLint com plugins de seguranca, implemente logging de eventos de seguranca, faca code review com foco em seguranca.
Tem um projeto em mente?
Somos especialistas em transformar ideias em produtos digitais. Apps, sites, automações e IA — vamos construir juntos.
