How to prevent firebase db access from chrome console or other methods

问题

So I have a single page frontend only app. Right now I have something like this

// db.js
import firebase from "firebase/app"
import "firebase/firestore";

var firebaseConfig = {
...
};


export const db = firebase
  .initializeApp(firebaseConfig)
  .firestore();

in main.js I was experimenting with putting the db instance in the global window scope just to see if I could go to the chrome web console and access it to submit a doc and indeed I can

// main.js
import { db } from './db'
window.db = db;

and then from chrome console

db.collection("test").add({'somekey': 'Can I add this doc?'})

How do I prevent someone from doing this without having a real backend to check auth? I like the reactivity of vue + firebase. If I don't expose the db variable to global scope is that enough? I was reading this post:

https://forum.vuejs.org/t/how-to-access-vue-from-chrome-console/3606/2

because any variable you create inside your main.js fiel will still not be globally available due to how webpack

回答1:

One of the great things about Firestore is that you can access it directly from within your web page. That means that within that web page, you must have all configuration data to find the relevant Google servers, and find your Firebase project on those servers. In your example, that data is part of firebaseConfig.

Since you app needs this configuration, any malicious user can also get this data from your app. There is no way to hide this: if you app needs, a sufficiently motivated malicious user will be able to find it. And once someone has the configuration, they can use it to access your database.

The way to control access to the database, is by using Firebase's server-side security rules. Since these are enforced on the server, there is no way to bypass them, neither by your code, nor by the code that a malicious user writes.

You can use these security rules to ensure that all data is valid, for example making sure that all the required fields are there, and that there's no data that your app doesn't use.

But the common approach is to also ensure that all data access is authorized. This requires that your users are authenticated with Firebase Authentication. You can either require your users to sign in with their credentials, or you can anonymously sign them in. In the latter case they don't need to enter any credentials, but you can still ensure for example that each user can only write data to their own area of the data, and that they can only read their own data.

来源：https://stackoverflow.com/questions/56619550/how-to-prevent-firebase-db-access-from-chrome-console-or-other-methods