Membangun jawaban prufrofro dan Frank van Puffelen di sini , saya membuat pengaturan ini yang tidak mencegah pengikisan, tetapi dapat membuatnya sedikit lebih sulit untuk menggunakan kunci API Anda.
Peringatan: Untuk mendapatkan data Anda, bahkan dengan metode ini, misalnya, cukup buka konsol JS di Chrome dan ketik:
firebase.database().ref("/get/all/the/data").once("value", function (data) {
console.log(data.val());
});
Hanya aturan keamanan basis data yang dapat melindungi data Anda.
Namun demikian, saya membatasi penggunaan kunci API produksi saya untuk nama domain saya seperti ini:
- https://console.developers.google.com/apis
- Pilih proyek Firebase Anda
- Kredensial
- Di bawah kunci API, pilih kunci Browser Anda. Seharusnya terlihat seperti ini: " Kunci browser (otomatis dibuat oleh Layanan Google) "
- Dalam " Terima permintaan dari referer HTTP ini (situs web) ", tambahkan URL dari aplikasi Anda (contoh:
projectname.firebaseapp.com/*
)
Sekarang aplikasi hanya akan bekerja pada nama domain spesifik ini. Jadi saya membuat Kunci API lain yang akan bersifat pribadi untuk pengembangan localhost.
- Klik Buat kredensial> Kunci API
Secara default, seperti yang disebutkan oleh Emmanuel Campos, daftar putih hanya Firebase localhost
dan domain hosting Firebase Anda .
Untuk memastikan saya tidak mempublikasikan kunci API yang salah secara tidak sengaja, saya menggunakan salah satu metode berikut untuk secara otomatis menggunakan yang lebih terbatas dalam produksi.
Pengaturan untuk Buat-Bereaksi-Aplikasi
Dalam /env.development
:
REACT_APP_API_KEY=###dev-key###
Dalam /env.production
:
REACT_APP_API_KEY=###public-key###
Di /src/index.js
const firebaseConfig = {
apiKey: process.env.REACT_APP_API_KEY,
// ...
};
Pengaturan saya sebelumnya untuk Webpack:
Saya menggunakan Webpack untuk membangun aplikasi produksi saya dan saya meletakkan kunci API dev saya di dalam saya index.html
seperti yang biasa Anda lakukan. Kemudian, di dalam webpack.production.config.js
file saya , saya mengganti kunci setiap kali index.html
disalin ke build produksi:
plugins: [
new CopyWebpackPlugin([
{
transform: function(content, path) {
return content.toString().replace("###dev-key###", "###public-key###");
},
from: './index.html'
}
])
]