Neste artigo você aprenderá se é seguro salvar token JWT na localStorage em React ou não, uma dúvida muito comum
Fala programador(a), beleza? Bora aprender mais sobre React JS!
O armazenamento de informações sensíveis, como tokens JWT (JSON Web Tokens), é uma questão crítica em aplicações React JS.
Um dos métodos comuns para guardar tokens é utilizar a localStorage. No entanto, o debate sobre a segurança desse método é constante.
Neste artigo, vamos explorar se é seguro armazenar tokens JWT na localStorage e quais são as alternativas mais seguras.
O Que É o Token JWT?
Antes de avançar, é importante entender o que é um token JWT. Trata-se de uma cadeia de caracteres codificada que contém informações (chamadas de claims) sobre o usuário e que pode ser usada para autenticação e troca de informações seguras entre partes.
localStorage em React JS
A localStorage é uma interface que permite acessar um objeto de armazenamento local usado para guardar pares de chave/valor.
Ela é acessível via JavaScript no navegador e tem a vantagem de manter os dados armazenados mesmo depois de fecharmos a janela ou aba do navegador.
Exemplo Simples de Uso da localStorage
import React, { useState, useEffect } from 'react';
function App() {
const [token, setToken] = useState('');
useEffect(() => {
// Pegar o token da localStorage quando o componente é montado
const tokenSalvo = localStorage.getItem('meuToken');
if (tokenSalvo) {
setToken(tokenSalvo);
}
}, []);
const salvarToken = () => {
// Salvar o token na localStorage
localStorage.setItem('meuToken', 'abc123');
setToken('abc123');
};
return (
<div>
<p>O token é: {token}</p>
<button onClick={salvarToken}>Salvar Token</button>
</div>
);
}
Riscos de Segurança com localStorage
Cross-site Scripting (XSS)
Um dos maiores riscos de usar localStorage para armazenar tokens JWT é o ataque de Cross-site Scripting (XSS).
Se o seu site é vulnerável a XSS, um atacante pode injetar um script malicioso que pode acessar todas as informações armazenadas na localStorage.
Sem Política de Mesma Origem para Cookies
A localStorage não segue a política de mesma origem (Same-Origin Policy) que os cookies seguem. Isso significa que qualquer JavaScript executado na mesma origem terá acesso à localStorage.
Alternativas Mais Seguras
Cookies HttpOnly e Seguros
Uma abordagem mais segura é armazenar o token JWT em um cookie HttpOnly e seguro.
Os cookies HttpOnly não são acessíveis via JavaScript e são automaticamente enviados com cada solicitação HTTP para o mesmo domínio, tornando-os resistentes a ataques XSS.
Armazenamento em Memória
Outra alternativa é armazenar o token em uma variável JavaScript. Isso pode ser feito usando o estado em um componente React.
No entanto, essa abordagem tem a desvantagem de perder o token se a página for recarregada.
Quer aprender mais sobre programação? Conheça nosso canal no YouTube:
Conclusão
Chegamos ao fim do artigo sobre a segurança de salvar token JWT na localStorage em React!
Embora seja muito simples e conveniente usar a localStorage para armazenar tokens JWT em aplicações React JS, essa prática não é recomendada devido a riscos de segurança como ataques XSS.
Alternativas mais seguras incluem o uso de cookies HttpOnly e seguros ou o armazenamento em memória.
A escolha da melhor opção dependerá das necessidades específicas do seu projeto e do nível de segurança desejado.
Está buscando em evoluir como Programador? Confira o nossos cursos de programação.