No treinamento, a instrutora comenta sobre o thymeleaf ja implementar a a dinamica de geração de um input para o CSRF. No caso de tecnologias como React e Angular, como isso funcionaria?
Solucionado
No treinamento, a instrutora comenta sobre o thymeleaf ja implementar a a dinamica de geração de um input para o CSRF. No caso de tecnologias como React e Angular, como isso funcionaria?
Olá Avner! Tudo bem?
Ótima pergunta! Quando trabalhamos com frameworks como React e Angular, que são focados em aplicações single-page (SPA), a abordagem para lidar com CSRF é um pouco diferente em comparação ao uso de templates como o Thymeleaf.
Em aplicações React ou Angular, o token CSRF geralmente é gerenciado através de um serviço centralizado que se comunica com o back-end. Aqui está uma abordagem comum:
Token CSRF no Back-end: O back-end, como o Spring Security, ainda é responsável por gerar o token CSRF. Esse token é enviado ao cliente (navegador) junto com a resposta HTTP inicial, geralmente como um cookie.
Armazenamento do Token no Cliente: No lado do cliente, você pode capturar esse token CSRF e armazená-lo em algum lugar seguro, como o estado da aplicação ou um contexto global.
Envio do Token nas Requisições: Sempre que você fizer uma requisição que altera o estado do servidor (como POST, PUT, DELETE), você precisa incluir o token CSRF no cabeçalho da requisição. Por exemplo, em React, você pode usar a biblioteca Axios para configurar um interceptor que automaticamente adiciona o token CSRF a todas as requisições relevantes.
Aqui está um exemplo simples de como você poderia configurar isso usando Axios em uma aplicação React:
import axios from 'axios';
// Configure Axios para incluir o token CSRF em todas as requisições
axios.defaults.headers.common['X-CSRF-TOKEN'] = getCsrfTokenFromCookie();
function getCsrfTokenFromCookie() {
// Função para pegar o token CSRF do cookie
const name = 'XSRF-TOKEN=';
const decodedCookie = decodeURIComponent(document.cookie);
const ca = decodedCookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1);
}
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
Em Angular, você pode configurar o HttpClient para incluir o token CSRF em todas as requisições de forma semelhante, usando interceptors.
Essa abordagem garante que o token CSRF seja incluído automaticamente em todas as requisições que precisam dele, ajudando a proteger sua aplicação contra ataques CSRF.
Espero ter ajudado e bons estudos!
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
Muito obrigado!!! Consegui compreender bem, e obrigado pelo exemplo de codigo