É seguro armazenar um jwt no localStorage com reactjs?

Atualmente, estou criando um aplicativo de página única usando reactjs. Eu li que muitos dos motivos para não usar o localStorage são por causa das vulnerabilidades do XSS. Como o React escapa a todas as entradas do usuário, agora seria seguro usar o localStorage?

Na maioria dos aplicativos modernos de página única, precisamos armazenar o token em algum lugar do lado do cliente (caso de uso mais comum - para manter o usuário conectado após uma atualização da página).

Há um total de 2 opções disponíveis: Armazenamento na Web (armazenamento de sessão, armazenamento local) e um cookie do lado do cliente. Ambas as opções são amplamente usadas, mas isso não significa que elas são muito seguras.

Tom Abbott resume bem a segurança sessionStorage e localStorage do JWT :

O armazenamento na Web (localStorage / sessionStorage) pode ser acessado por meio de JavaScript no mesmo domínio. Isso significa que qualquer JavaScript em execução no seu site terá acesso ao armazenamento na Web e, por isso, pode ser vulnerável a ataques de script entre sites (XSS) . Em resumo, o XSS é um tipo de vulnerabilidade em que um invasor pode injetar JavaScript que será executado na sua página. Os ataques XSS básicos tentam injetar JavaScript através de entradas de formulário, onde o invasor o coloca <script>alert('You are Hacked');</script>em um formulário para ver se ele é executado pelo navegador e pode ser visualizado por outros usuários.

Para evitar o XSS, a resposta comum é escapar e codificar todos os dados não confiáveis. Reagir (principalmente) faz isso por você! Aqui está uma ótima discussão sobre a responsabilidade pela qual a proteção contra vulnerabilidades XSS é responsável pelo React .

Mas isso não cobre todas as vulnerabilidades possíveis! Outra ameaça em potencial é o uso de JavaScript hospedado em CDNs ou em infraestrutura externa .

Aqui está o Tom novamente:

Os aplicativos da Web modernos incluem bibliotecas JavaScript de terceiros para testes A / B, análise de funil / mercado e anúncios. Usamos gerenciadores de pacotes como o Bower para importar o código de outras pessoas em nossos aplicativos.

E se apenas um dos scripts que você usa estiver comprometido? JavaScript malicioso pode ser incorporado na página e o armazenamento na Web é comprometido. Esses tipos de ataques XSS podem obter o armazenamento na Web de todos que visitam seu site, sem o conhecimento deles. É provavelmente por isso que várias organizações aconselham a não armazenar nada de valor ou confiar em qualquer informação no armazenamento na web. Isso inclui identificadores de sessão e tokens.

Portanto, minha conclusão é que, como mecanismo de armazenamento, o Armazenamento na Web não impõe nenhum padrão seguro durante a transferência . Quem lê o Armazenamento da Web e o utiliza deve fazer a devida diligência para garantir que sempre envie o JWT por HTTPS e nunca por HTTP.

Eu sei que essa é uma pergunta antiga, mas de acordo com o que o @ mikejones1477 disse, as bibliotecas e estruturas modernas de front-end escapam do texto, oferecendo proteção contra o XSS. A razão pela qual os cookies não são um método seguro usando credenciais é que os cookies não impede CSRF quando localStorage não (também lembrar que os cookies são acessíveis por javascript também, então XSS não é o grande problema aqui), esta resposta currículo por isso .

O motivo para armazenar um token de autenticação no armazenamento local e adicioná-lo manualmente a cada solicitação protege contra CSRF é essa palavra-chave: manual. Como o navegador não envia automaticamente esse token de autenticação, se eu visitar evil.com e ele conseguir enviar um POST http://example.com/delete-my-account , ele não poderá enviar meu token de autenticação, portanto a solicitação é ignorada.

É claro que httpOnly é o santo graal, mas você não pode acessar a partir do reactjs ou de qualquer estrutura js ao lado de você ainda tem vulnerabilidade CSRF. Minha recomendação seria armazenamento local ou, se você quiser usar cookies, certifique-se de implementar alguma solução para o seu problema de CSRF, como o django .

Com relação às CDNs, verifique se você não está usando CDNs estranhas, por exemplo, CDNs como o google ou o bootstrap fornecem, são mantidas pela comunidade e não contêm código malicioso, se você não tiver certeza, pode revisar.

Basicamente, não há problema em armazenar seu JWT em seu localStorage.

E acho que esse é um bom caminho. Se estamos falando de XSS, XSS usando CDN, também é um risco potencial de obter o login / senha do seu cliente também. Armazenar dados no armazenamento local impedirá pelo menos ataques de CSRF.

Você precisa conhecer os dois e escolher o que deseja. Ambos os ataques não são tudo o que você precisa saber, lembre-se: SEU APLICATIVO INTEIRO É TÃO SEGURO COMO O PONTO MAIS SEGURO DO APLICATIVO.

Mais uma vez, o armazenamento está OK, seja vulnerável a XSS, CSRF, ... não

Não é seguro se você usar CDNs:

JavaScript malicioso pode ser incorporado na página e o armazenamento na Web é comprometido. Esses tipos de ataques XSS podem obter o armazenamento na Web de todos que visitam seu site, sem o conhecimento deles. É provavelmente por isso que várias organizações aconselham a não armazenar nada de valor ou confiar em qualquer informação no armazenamento na web. Isso inclui identificadores de sessão e tokens.

via stormpath

Qualquer script que você exija externamente pode ser comprometido e pode pegar qualquer JWTS do armazenamento do seu cliente e enviar dados pessoais de volta ao servidor do invasor.

O Localstorage foi projetado para ser acessível por javascript, portanto, não fornece nenhuma proteção XSS. Como mencionado em outras respostas, existem várias maneiras possíveis de realizar um ataque XSS, do qual o armazenamento local não é protegido por padrão.

No entanto, os cookies possuem sinalizadores de segurança que protegem contra ataques XSS e CSRF. O sinalizador HttpOnly impede que o javascript do lado do cliente acesse o cookie, o sinalizador seguro permite apenas que o navegador transfira o cookie por ssl, e o sinalizador SameSite garante que o cookie seja enviado apenas para a origem. Embora eu tenha acabado de verificar e o SameSite atualmente seja suportado apenas no Opera e no Chrome, para proteger do CSRF, é melhor usar outras estratégias. Por exemplo, enviando um token criptografado em outro cookie com alguns dados públicos do usuário.

Portanto, os cookies são uma opção mais segura para armazenar dados de autenticação.

Uma maneira de analisar isso é considerar o nível de risco ou dano.

Você está criando um aplicativo sem usuários, POC / MVP? Você é uma startup que precisa chegar ao mercado e testar seu aplicativo rapidamente? Se sim, eu provavelmente implementaria a solução mais simples e manteria o foco em encontrar o ajuste do produto ao mercado. Use localStorage como geralmente mais fácil de implementar.

Você está criando uma versão 2 de um aplicativo com muitos usuários ativos diários ou um aplicativo do qual as pessoas / empresas dependem bastante. Ser hackeado significaria pouco ou nenhum espaço para recuperação? Nesse caso, examinaria suas dependências e consideraria o armazenamento de informações de token em um cookie somente http.

O uso do localStorage e do armazenamento de cookies / sessões tem seus próprios prós e contras.

Conforme declarado pela primeira resposta: se o seu aplicativo tiver uma vulnerabilidade XSS, nenhum deles protegerá o usuário. Como a maioria dos aplicativos modernos tem uma dúzia ou mais de dependências diferentes, torna-se cada vez mais difícil garantir que uma das dependências do aplicativo não seja vulnerável ao XSS.

Se o seu aplicativo tiver uma vulnerabilidade XSS e um hacker puder explorá-lo, o hacker poderá executar ações em nome do seu usuário. O hacker pode executar solicitações GET / POST recuperando o token do localStorage ou pode executar solicitações POST se o token estiver armazenado em um cookie somente http.

A única desvantagem de armazenar seu token no armazenamento local é que o hacker poderá ler seu token.

O cookie localStorage ou httpOnly não é aceitável? No que diz respeito a uma biblioteca de terceiros comprometida, a única solução que eu conheço que reduzirá / impedirá que informações confidenciais sejam roubadas seria imposta à Integridade de Sub-recursos .

SRI (Subresource Integrity) é um recurso de segurança que permite que os navegadores verifiquem se os recursos que eles buscam (por exemplo, de uma CDN) são entregues sem manipulação inesperada. Ele funciona permitindo que você forneça um hash criptográfico ao qual um recurso buscado deve corresponder.

Enquanto a biblioteca de terceiros comprometida estiver ativa no seu site, um keylogger poderá começar a coletar informações como nome de usuário, senha e qualquer outra coisa que você inserir no site.

Um cookie httpOnly impedirá o acesso de outro computador, mas não fará nada para impedir que o hacker manipule o computador do usuário.

É seguro armazenar seu token no localStorage enquanto você o criptografar. Abaixo está um trecho de código compactado mostrando uma das muitas maneiras de fazer isso.

    import SimpleCrypto from 'simple-crypto-js';

    const saveToken = (token = '') => {
          const encryptInit = new SimpleCrypto('PRIVATE_KEY_STORED_IN_ENV_FILE');
          const encryptedToken = encryptInit.encrypt(token);

          localStorage.setItem('token', encryptedToken);
     }

Antes de usar seu token, decifre-o usando PRIVATE_KEY_STORED_IN_ENV_FILE