Executando verificação de segurança...
1

Como ocultar suas Chaves de API de uma aplicação React em ambiente de produção?

Bom dia/tarde/noite a todos!
Estou escrevendo este post para discutir e descobrir quais soluções vocês utilizam quando precisam proteger as chaves das APIs dos serviços que integram em suas aplicações.

Recentemente, realizei o deploy de uma aplicação React criada com o Vite. Para isso, optei por usar os serviços da AWS S3 e CloudFront.

Entretanto, surgiu uma dúvida que percebi. Como posso ocultar, por exemplo, a chave da API que uso para os serviços de Login Social e Recaptcha na aplicação?
Pesquisei algumas soluções e ouvi falar sobre o serviço da Amazon chamado AWS Secrets Manager, que permite armazenar suas chaves lá e recuperá-las a partir do NodeJS.

Resolvi fazer a pergunta ao Chat-GPT e a possível implementação que ele sugeriu foi essa, fazendo uso da lib AWS-SDK:

const AWS = require('aws-sdk');
const secretsManager = new AWS.SecretsManager();
async function getSecret() {
  try {
    const data = await secretsManager.getSecretValue({ SecretId: 'seu-nome-de-segredo' }).promise();
    const secretValue = JSON.parse(data.SecretString);
    return secretValue.suaChave; // Acesse a chave ou informações sensíveis
  } catch (error) {
    console.error('Erro ao recuperar o segredo:', error);
  }
}
// Em algum lugar do seu código, você pode chamar a função getSecret() para obter as chaves ou informações sensíveis.
getSecret().then(chave => {
  // Use a chave no seu aplicativo
  console.log('Chave:', chave);
});

Vocês já fizeram uso dessa abordagem ou existem outros tipos de formas de controlar isso? Os arquivos env. ao rodas o build deixa visível as chaves?

Carregando publicação patrocinada...
4

Não existe uma forma de ocultar 100% as suas chaves no front-end, você poderia por exemplo utilizar uma ferramenta como o burpsuite, monitorar as requisições feitas pelo site e descobrir qual a chave de api que aquele site está utilizando, isso é uma das múltiplas possíveis formas de conseguir ver essa informação no front-end.

Se caso realmente queira esconder 100%, a solução seria criar um tipo de “back-end proxy”. A estratégia seria que no lugar de você fazer a requisição diretamente do front-end, você faria a chamada para esse back-end e ele faria a requisição à api, lá no back-end sua chave estaria bem mais segura sem acesso direto do usuário.

Uma observação que eu queria colocar aqui também é que algumas apis esperam que a sua chave possa ficar exposta publicamente no front-end, claro que a equipe responsável pela api precisa tomar medidas de seguranças em relação a isso.

Um exemplo dessa discussão ta aqui, caso queira saber mais: https://stackoverflow.com/questions/37482366/is-it-safe-to-expose-firebase-apikey-to-the-public

Se quiser se aprofundar mais, recomendo este link: https://www.smashingmagazine.com/2023/05/safest-way-hide-api-keys-react/

1
1

Se por algum motivo vc precisar muito ocultar alguma key, recomendo criar um endpoint que chame a API ao invés de vc chamar diretamente. Sua API deve retornar apenas a resposta.
Eu só precisei fazer isso uma vez a pedido da empresa porque outro sistema estava em teste, e não era bom expor a chave nesse caso.

1

Quando um frontend precisa chamar um serviço que tenha credenciais que não podem ser expostas, você precisa ter um bff (backend for frontend).
Esse bff vai precisar de autenticação do usuário (ou alguma validação) pra que alguém com acesso ao endpoint não pegue os dados.
Se for possível parametrizar na aplicação node as credenciais dos serviços, não haveria necessidade do aws Secrets.
O bff deve ficar responsável por chamar os serviços de login social e recaptcha