É seguro guardar dados do usuário no localStorage?

Ao desenvolver aplicações web, muitas vezes surge a necessidade de armazenar dados do usuário no navegador para melhorar a experiência ou manter a persistência de estado. Mas será que é seguro usar o localStorage para isso? Vamos explorar os riscos, melhores práticas e alternativas seguras.

O que é o localStorage?
O localStorage é uma API do navegador que permite armazenar dados de forma simples e persistente no lado do cliente. Diferente do sessionStorage, os dados salvos no localStorage permanecem acessíveis mesmo após o usuário fechar e reabrir o navegador.

Embora seja uma ferramenta prática, sua simplicidade vem com algumas limitações de segurança.

O Cenário: Autenticação de Usuário
Imagine que você tem uma aplicação que usa o Supabase para autenticar usuários. Após o login, você deseja armazenar as informações do usuário no navegador, como neste exemplo:

async function checkAuth() {
  try {
    const { data, error } = await supabase.auth.getUser()
    if (error) throw error

    if (data.user) {
      user.value = data.user
      localStorage.setItem('user', JSON.stringify(data.user)) // Armazenando o usuário
      console.log('Usuário autenticado:', data.user)
    } else {
      localStorage.removeItem('user')
    }
  } catch (error) {
    console.error('Erro ao verificar autenticação:', (error as Error).message)
  }
}

A ideia parece simples: salvar o objeto do usuário no localStorage para usá-lo posteriormente. Mas essa abordagem é segura?

Riscos de Usar localStorage

1. Exposição a Scripts Maliciosos (XSS) O maior problema de segurança ao usar localStorage é que ele pode ser acessado por qualquer script executado na página. Isso inclui scripts maliciosos que possam ser injetados no site por meio de ataques de XSS (Cross-Site Scripting).

Por exemplo, se um atacante conseguir injetar o seguinte código em sua página:

console.log(localStorage.getItem('user'))

Eles terão acesso aos dados armazenados, incluindo informações sensíveis sobre o usuário.

1. Dados Não São Criptografados
   O localStorage armazena dados como texto puro. Isso significa que qualquer pessoa com acesso ao dispositivo do usuário pode abrir o console do navegador e visualizar diretamente as informações salvas.

2. Sem Expiração Automática
   Ao contrário de cookies, o localStorage não possui um mecanismo integrado para expirar dados automaticamente. Isso pode levar ao armazenamento desnecessário de informações antigas ou desatualizadas.

Alternativas Mais Seguras

1. Confie nas Sessões do Supabase O Supabase já gerencia as sessões de autenticação por meio de cookies seguros e tokens JWT. Não é necessário salvar o objeto do usuário no localStorage.

Você pode verificar a sessão do usuário a qualquer momento usando o método:

const { data, error } = await supabase.auth.getUser()

1. Use sessionStorage
   Se você precisar armazenar dados no navegador, considere usar o sessionStorage. Ele mantém os dados apenas enquanto a aba ou janela do navegador está aberta. Isso reduz o risco de exposição em caso de roubo físico do dispositivo, mas não protege contra XSS.

2. Salve Apenas Dados Não Sensíveis
   Caso você precise de persistência no localStorage, evite armazenar informações sensíveis como tokens de acesso ou dados pessoais. Salve apenas informações genéricas, como um identificador de usuário:
   

localStorage.setItem('userId', data.user.id)

1. Implemente Proteções Contra XSS Para mitigar os riscos de XSS, implemente as seguintes práticas de segurança:

Use uma Content Security Policy (CSP) rigorosa para impedir scripts não autorizados.
Valide e sanitize todas as entradas do usuário.
Mantenha dependências e bibliotecas sempre atualizadas.

1. Criptografe os Dados Se for indispensável usar o localStorage, você pode criptografar os dados antes de armazená-los. Isso adiciona uma camada extra de segurança, embora não elimine completamente os riscos.

Exemplo com CryptoJS:

import CryptoJS from 'crypto-js'

const secretKey = 'sua-chave-secreta'

// Para salvar no localStorage
const encryptedUser = CryptoJS.AES.encrypt(JSON.stringify(data.user), secretKey).toString()
localStorage.setItem('user', encryptedUser)

// Para recuperar do localStorage
const decryptedUser = CryptoJS.AES.decrypt(localStorage.getItem('user') || '', secretKey)
const user = JSON.parse(decryptedUser.toString(CryptoJS.enc.Utf8))

Atenção: Certifique-se de proteger a chave de criptografia, pois se ela for exposta, a segurança será comprometida.

Conclusão
Embora o localStorage seja uma ferramenta prática para armazenar dados no navegador, ele não é ideal para dados sensíveis. Aqui estão as principais recomendações:

Confie nas sessões gerenciadas pelo Supabase.
Evite salvar informações sensíveis no localStorage.
Implemente boas práticas de segurança, como proteção contra XSS.
Com essas práticas, você pode garantir que a experiência do usuário seja fluida e, ao mesmo tempo, proteger seus dados contra ataques.

O que você acha? Você utiliza o localStorage no seu projeto? Compartilhe suas experiências nos comentários!