如何使用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 dev tools-> sources-> page-> app.js时，我可以在那里看到api密钥（仅在dev模式下进行了测试）！

Answer 1

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

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

对于＃2，您可以检查其是否包含在客户端js源中。还有更多其他方式可以使黑客获得任何东西，例如xss，但它的基本功能与代码无关。

Answer 2

  

如何保护API密钥。例如，调用MailChimp API

这里残酷的事实是不……在客户端，至少在Web应用程序中，您无法保护任何秘密。

只需让您了解可用于保护API的技术以及如何绕过它们，您可以阅读this series的文章。虽然它是在Api为移动应用程序提供服务的情况下进行的，但其中大多数也适用于为Web应用程序提供服务的API。您将学习如何使用和绕过api-key，ouath令牌，hmac和证书固定。

对第三方服务的访问必须始终在后端完成，而不要在客户端进行。使用这种方法，您只有一个地方可以保护，而这一切都在您的控制之下。

例如，在访问Mailchimp API的情况下...如果您的后端是代表您的Web应用程序负责的后端，则可以采取安全措施来检测和缓解使用情况Web应用程序对Mailchimp的使用，例如用户行为分析（UBA）解决方案，但是将Mailchimp API的访问权限留给Web应用程序意味着您仅在Mailchimp提醒您或您在其仪表板中看到它时才知道有人在滥用它。

  

我不熟悉如果实施了不良解决方案，黑客将如何看待这一点。如何验证他们无法访问它？

您可能已经知道F12是访问开发人员工具的一种方式。

使用OWASP安全工具Zed Attack Proxy (ZAP)并使用其文字的另一种方式ID：

  

OWASP Zed攻击代理（ZAP）是世界上最受欢迎的免费安全工具之一，并由数百名国际志愿者积极维护。它可以帮助您在开发和测试应用程序时自动查找Web应用程序中的安全漏洞。它也是经验丰富的渗透测试人员用于手动安全性测试的一个很好的工具。

Answer 3

您可以使用带有环境变量的Netlify函数作为代理来通信您的API，而无需透露您的私钥。