Fala pessoal blz? Então, desenvolvendo um app web mais complexo pude me deparar com segurança, já que o ReactJS não tem exatamente um ".env" da vida, onde eu posso esconder informações sensíveis tipo chaves de API do firebase, chave de cliente do captcha etc? Porque praticamente, qualquer user q entende um pouco do inspector do browser, pode ir lá, pegar o código do JavaScript e fuçar essas coisas e até catar essas infos. Como vcs lidam com isso? Grato.
Realmente nao é possível você esconder qualquer chave no React, mesmo colocando um .env no gitignore, isso nao seria seguro, pois as variáveis de ambiente são incorporadas na compilação e com isso elas são acessíveis publicamente.
Uma alternativa seria você ter um back-and onde você salvaria essas chaves e então você enviaria uma solicitação para sua API, sua API iria fazer a chamada real com a sua chave e você teria o retorno dos dados, onde você poderia fazer sua api mandar esses dados retornados para seu Front-end.
o grande ponto é o que vc faz com essas informações? por ex, a chave publica do Firebase, com essa chave, até onde consigo ir? para o firebase tem as regras no realtime database para limitar o que vc pode ler/escrever, levando em consideração o usuário logado por ex.
Também tenho o mesmo problema, tenho um API_KEY que fica exposta no front.
Não tem como, sobre o firebase você tem as regras de segurança e uma whitelist de domínios.
Agora uma API_KEY que não possui uma maneira de defende-la, você pode rodar no servidor e atrelar a um route/controller.
Como os amigos já disseram, não há problema dessas chaves estarem "visíveis" no código público, desde que suas regras de segurança estejam em dia. permitindo apenas que usuário autenticados possam consumir os documentos, ou ainda, criar um token para o usuário com setCustomUserClaims e criar mais uma camada de segurança pra usuário logados.
Corrigindo o que o outro amigo disse, não é possível bloquear ou permitir determinados domínios de consumir o Firestore. o Firebase conta exclusivamente com as regras de segurança.
Use o teste de regras dentro do firebase para se certificar que suas regras funcionam.
Você pode pré determinar o bloqueio de leitura e escrita para todos os documentos, e depois só ir permitindo o que você quer que um usuário logado ou com um determinado token possa ler ou escrever.
Exemplo que bloqueia todos os documentos para usuários não logados:
service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if request.auth != null; } } }
Para determinadas ações, como criaçao de usuário, e outros tipos de gerenciamento e processamento. É necessario criar funções no Firebase Functions.
Para integrações de plataformas de pagamentos por exemplo, que utilizam token. Em aplicações SPA como no React por exemplo. As plataformas de pagamentos oferecem dois token, o público e o privado. Com o público só é possível usar para ações que não são sensíveis a segurança. Para outras ações como receber webhooks e processar dados do pagamento é preciso criar uma função no Cloud Functions.
Seguindo essas regras a risca e implementando da maneira correta, não tem o que se preocupar.