Sulla base delle risposte di prufrofro e Frank van Puffelen qui , ho messo insieme questa configurazione che non impedisce raschiando, ma può rendere leggermente più difficile da usare la tua chiave API.
Attenzione: per ottenere i tuoi dati, anche con questo metodo, puoi ad esempio semplicemente aprire la console JS in Chrome e digitare:
firebase.database().ref("/get/all/the/data").once("value", function (data) {
console.log(data.val());
});
Solo le regole di sicurezza del database possono proteggere i tuoi dati.
Tuttavia, ho limitato l'uso della mia chiave API di produzione al mio nome di dominio in questo modo:
- https://console.developers.google.com/apis
- Seleziona il tuo progetto Firebase
- Credenziali
- Sotto Chiavi API, seleziona la tua chiave del browser. Dovrebbe apparire così: " Chiave del browser (creata automaticamente dal servizio Google) "
- In " Accetta le richieste da questi referrer HTTP (siti web) ", aggiungere l'URL della tua app (Esempio:
projectname.firebaseapp.com/*
)
Ora l'app funzionerà solo su questo nome di dominio specifico. Quindi ho creato un'altra chiave API che sarà privata per lo sviluppo di localhost.
- Fai clic su Crea credenziali> Chiave API
Per impostazione predefinita, come menzionato da Emmanuel Campos, Firebase solo le whitelist localhost
e il dominio di hosting Firebase .
Per essere sicuro di non pubblicare la chiave API errata per errore, utilizzo uno dei seguenti metodi per utilizzare automaticamente quello più limitato in produzione.
Impostazione per Create-React-App
In /env.development
:
REACT_APP_API_KEY=###dev-key###
In /env.production
:
REACT_APP_API_KEY=###public-key###
In /src/index.js
const firebaseConfig = {
apiKey: process.env.REACT_APP_API_KEY,
// ...
};
La mia configurazione precedente per Webpack:
Uso Webpack per creare la mia app di produzione e inserisco la mia chiave API dev all'interno della mia index.html
esattamente come faresti normalmente. Quindi, all'interno del mio webpack.production.config.js
file, sostituisco la chiave ogni volta che index.html
viene copiata nella build di produzione:
plugins: [
new CopyWebpackPlugin([
{
transform: function(content, path) {
return content.toString().replace("###dev-key###", "###public-key###");
},
from: './index.html'
}
])
]