如何防止从 chrome 控制台或其他方法访问 firebase db

Question

所以我只有一个单页前端应用程序。现在我有这样的东西

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

var firebaseConfig = {
...
};


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

在 main.js 中，我尝试将 db 实例放在全局窗口范围内，只是为了看看是否可以转到 chrome Web 控制台并访问它以提交文档，并且确实可以

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

然后从 chrome 控制台

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

如果没有真正的后端来检查身份验证，我如何防止有人这样做？我喜欢 vue + firebase 的反应性。如果我不将 db 变量公开到全局范围就足够了吗？我正在阅读这篇文章：

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

因为您在 main.js 字段中创建的任何变量仍将由于 webpack 的方式而无法全局使用

Answer 1

Firestore 的一大优点是您可以直接从网页中访问它。这意味着在该网页中，您必须拥有所有配置数据才能找到相关的 Google 服务器，并在这些服务器上找到您的 Firebase 项目。在您的示例中，该数据是 firebaseConfig 的一部分。

由于您的应用需要此配置，因此任何恶意用户也可以从您的应用中获取此数据。没有办法隐藏这一点：如果您的应用需要，有足够动机的恶意用户将能够找到它。一旦有人有了配置，他们就可以使用它来访问您的数据库。

控制对数据库的访问的方法是使用 Firebase 的server-side security rules。由于这些是在服务器上强制执行的，因此无论您的代码还是恶意用户编写的代码都无法绕过它们。

您可以使用这些安全规则来确保所有数据都有效，例如确保所有必填字段都存在，并且没有您的应用未使用的数据。

但常见的方法是还确保所有数据访问都得到授权。这要求您的用户使用Firebase Authentication 进行身份验证。您可以要求用户使用他们的凭据登录，也可以anonymously sign them in。在后一种情况下，他们不需要输入任何凭据，但您仍然可以确保例如每个用户只能将数据写入他们自己的数据区域，并且他们只能读取自己的数据。