É seguro salvar token JWT na localStorage em React JS?

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.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

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.