Firebase 安全问题？使用 Vue.js + Firebase 的忍者反应游戏

Question

问题

我正在关注 youtube 上的 Vue.js 3 教程，并尝试实现 this video 中显示的应用程序。 然后我开始一点一点地改进它。你可以查看我的项目here。

我要添加的主要功能之一是名人堂组件，您可以在其中查看任何演奏者的前十名得分。您可以在完成游戏后提交您的分数。我决定使用 Firestore 来保存数据。

但是，假设我为生产构建应用程序并将其托管在服务器中。然后，我可以在我的笔记本电脑上下载整个项目，稍微改变一下逻辑，然后在我的电脑上本地播放。这样，我可以将任何类型的数据发送到我的 firestore 数据库（因为我的凭据是由 Vue 注入到 javascript 中的）。然后我可以发送 1 毫秒的理想分数来破解游戏（这确实是我的一个朋友设法做到的）。

问题

问题是：如何防止这种情况发生？ 我应该对有关 firebase 配置的代码进行一些更改吗？ 我应该使用其他方式来存储数据，而不是 Firestore？ 我应该正确配置 Firestore 安全规则吗？

另外，在 Vue.js（或 React，一般来说）等 JS 框架中，防止在客户端插入不需要的数据的最佳安全实践是什么？如何管理从此类前端框架到云数据库的连接？

免责声明

我通过观看 youtube 视频或谷歌搜索等方式自学了有关编程的所有知识。我不仅是 Vue 和 Firebase 的新手，而且是一般的 Web 开发新手。请在回答时考虑这一点。

Answer 1

TL;DR;

如果分数是在客户端（在浏览器中）计算的，则无法保护它。

任何人都可以看到从应用程序向服务器发出的 API 调用，并使用 postman 等其他 API 工具复制它，因此您甚至不需要在本地下载它来进行更改。

如果您的游戏依赖客户端作为数据源，则服务器无法确保其未被篡改。

您可以尝试混淆源代码并进行客户端数据加密，但这一切都在 javascript 中，所以一切都是可读的。

如果您要以更安全的方式实施它，您将让服务器触发一个操作（而不是脚本），但是由于数据周转时间，时间最终会更长。由于从服务器到客户端并返回的事件会被反映，但即使这样，自动响应也可以通过使用脚本处理来破解。