vue.js - 如何使用 Nuxt 保护 API key 并进行验证

Question

我正在使用 Nuxt(与 SSR/PWA/Vuejs/Node.js/Vuex/Firestore)，并且希望了解以下内容的总体思路或示例:

1. 如何确保 API key 的安全。例如调用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 key 存储为环境变量。这安全吗？当我打开 chrome 开发工具 -> 源 -> 页面 -> app.js 时，我可以看到 api key 就在那里(仅在开发模式下测试)!

Answer 1

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

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

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