如何使用 Nuxt 保护 API 密钥并进行验证

Question

我正在使用 Nuxt（使用 SSR/PWA/Vuejs/Node.js/Vuex/Firestore）并希望有一个大致的想法或有以下示例：

1. 如何保护 API 密钥。例如调用MailChimp API
2. 如果实施了一个糟糕的解决方案，我不熟悉黑客会如何看待这一点。我如何验证他们无法访问它？

我找到了许多推荐使用环境变量的“解决方案”，但是对于每个解决方案，有人都表示它不安全。看：

https://github.com/nuxt-community/dotenv-module/issues/7

https://github.com/nuxt/nuxt.js/issues/2033

也许服务器中间件就是答案？https://blog.lichter.io/posts/sending-emails-through-nuxtjs和https://www.youtube.com/watch?v=j-3RwvWZoaU (@11:30)。我只需要在输入后向邮件黑猩猩帐户添加一封电子邮件，这似乎是很多开销。

我还看到我已经将 Firestore api 密钥存储为环境变量。这安全吗？当我打开 chrome 开发工具-> 源代码-> 页面-> app.js 时，我可以在那里看到 api 密钥（仅在开发模式下测试）！

Answer 1

您可以使用服务器中间件或https://github.com/nuxt-community/separate-env-module

中间件本身不会工作，因为它也可以在客户端执行，并且中间件中使用的代码将在客户端可用

对于#2，您可以检查它是否包含在客户端 js 源中。黑客还有更多其他方式可以获得任何东西，例如xss，但它的一般事物与您的代码没有太大关系。