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?