[Dúvida] Salvar o token no SessionStorage é a melhor opção?

Salve, João!

Caraca, que pergunta incrível.

Vamos lá!

Até hoje eu não vi um consenso sobre isso, e as soluções acabam variando um pouco de empresa para empresa. A minha especialidade não é segurança, então vou te passar a visão do assunto a partir de uma pessoa desenvolvedora frontend, beleza?

Vou começar falando sobre o que podemos fazer para mitigar o CSRF com cookies:

• Enviar um token adicional ao cliente, fazendo sempre a verificação dupla de cookie + token (custa um pouco fazer isso, mas pode ajudar a validar que somente o cliente real pode fazer requisições)

• Alterrar a opção sameSite do cookie, para uma das seguintes:

  1. "Lax" – com tal configuração os navegadores não enviarão cookies para imagens e frames, portanto evitará ataques CSRF. Se o usuário clicar na URL do nosso site em um site (ou e-mail) completamente diferente, serão adicionados cookies, para que tudo funcione corretamente.
  2. A opção mais recente é "strict": nesse caso, os cookies entre sites são completamente bloqueados É a opção mais segura, mas em alguns casos um pouco limitada.

A configuração padrão de sameSite para os cookies é "none", e não bloqueia nada, então permite cross-site (também com possibilidade de CSRF).

Vantagem aqui é a adição do token ao cabeçalho das requisições fica transparente para o nosso frontend.

Mas como eu disse que não é um consenso, há quem diga para não abandonarmos a localStorage / sessionStorage.

Nesse caso, temos que levar em conta o que temos de opções. Uma delas é configurar corretamente o CSP (Content Security Policy) da página, indicando de onde os scripts podem ser carregados.

Falando especificamente do React, ele já vem com alguma segurança por padrão, como você consegue acompanhar aqui na documentação.

Mas nunca é fácil, temos de fazer uma revisão de código pesada para garantir que não estamos vulneráveis a XSS. É uma missão daquelas que são mega difíceis.

Mas, usando cookies ou storages, precisamos ter isso feito. Existem umas listas famosas que você encontra na internet procurando por "React Security CheatSheet" que são um bom ponto de partida.

Espero que tenha ajudado a diminuir suas dúvidas, João!

Segurança é sempre um assunto muito importante.