3
respostas

Onde vocês armazenam geralmente suas API Keys em projetos Front Como React, Vue

Considerando que o projeto e todo seu código vai para o cliente, como vocês geralmente costumam armazenar essas informações ?

3 respostas

As keys eu armazeno geralmente no localStorage, ele é um armazenamento do navegador que é até bem grande. Eu geralmente guardo o token lá, feito com o JWT. Ele é útil pra informações que você precisa de versatilidade e persistência no computador do usuário e é como as Progressive Web Apps ( PWA ) trabalham atualmente.

Uma outra maneira de fazer isso são os cookies ( eu sou contra ), pois enquanto o Local Storage te permite guardar um JSON, o cookie guarda apenas uma string, tornando o processo de busca dele muito mais verboso.

Quando o cliente faz uma requisição para o servidor, eu mando o token no header ou no post da requisição e faço a verificação no servidor. O token contém as informações básicas; username, senha e codigo verificador. Depois que bate no servidor e é verificado, ele retorna apenas as informações que eu pedi

Esse método é bom pra API's restfull, já que em uma web app, você tem que mandar todo o código pro cliente, qualquer informação sensível a gente tem que proteger com encrypt e só mandar as informações que o cliente precisa.

Abaixo eu estou deixando pra você uma explicação do MDN sobre o local storage e a página do JWT pra você dar uma olhada

Na verdade, acho que não formatei bem minha dúvida, mas ela tem mais a ver com a questão segurança, gostaria de saber se existe uma forma segura de armazenar uma API Key, sem que qualquer usuário tenha acesso é assim possa fazer requisições paras minhas APis, sei que existem soluções que resolvem no lado do servidor, mas seria possível de algum modo fazer isso no lado cliente, sem nenhuma configuração no server

Agora entendi. Bom, o que você está pedindo precisaria de um terceiro source ( basicamente um terceiro servidor ou microserviço ) para retornar uma chave randômica.

Ou você ainda poderia usar o localStorage com uma criptografia mais complexa.

Não existe nenhuma implementação de algo que exista no lado do cliente que ele não possa acessar pelo devtools ( mesmo por que isso impediria mesmo o programador de fazer essas alterações )

Ainda assim, mesmo que queira usar uma API Key sem nenhuma configuração no servidor, você precisaria configurar ele para reconhecer essa API Key no lado servidor pra garantir segurança total.

O que você pode fazer é um Token Key e um Token. O token carregaria as informações do usuário criptografadas (username, senha, email) e o Token Key poderia ser uma chave randômica e única acessada apenas pelo cliente. Ainda assim, não deveria ser feito no front end, devido ao vasto controle que um usuário mal intencionado pode ter a sua chave, sendo necessário configurar no servidor um mecanismo de reconhecimento desse token key para não gerar duplicação ou liberação indevida.

Em suma: No front, qualquer questão relacionada a segurança é extremamente arriscado por que o usuário pode ter acesso fácil a essa informação. Atualmente não existe uma solução fechada e inacessível em algum lugar do navegador que impediria algum usuário mal intencionado de acessar e extrair alguma chave ou token de segurança, já que é apenas ler o código

A melhor solução seria criar um microsserviço separado do front e do back para fornecer as chaves, ainda assim, seria mais como um terceiro servidor, não uma solução front

Isso ajuda? Se n'ao, me dá um toque e eu tento elaborar mais