如何使用 Nuxt 保护 API 密钥并验证
How to secure API Key with Nuxt and verify
我正在使用 Nuxt（与 SSR/PWA/Vuejs/Node.js/Vuex/Firestore）并且想对以下内容有一个大概的了解或一个例子：
- 如何保护 API 密钥。例如调用 MailChimp API
- 我不熟悉如果实施了糟糕的解决方案，黑客会如何看待这一点。我如何验证他们无法访问它？
我发现许多 "solutions" 建议使用环境变量，但对于每个解决方案，都有人指出它不安全。参见：
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 and https://www.youtube.com/watch?v=j-3RwvWZoaU (@11:30)。我只需要在输入后向邮件黑猩猩帐户添加一封电子邮件，似乎开销很大。
我还看到我已经将我的 Firestore api 密钥存储为环境变量。这安全吗？当我打开 chrome dev tools-> sources-> page-> app.js 时，我可以看到 api 键就在那里（仅在开发模式下测试过）！
您可以使用服务器中间件或 https://github.com/nuxt-community/separate-env-module
中间件本身不会工作，因为它也可以在客户端上执行，中间件中使用的代码将在客户端上可用
对于 #2，您可以检查它是否包含在客户端 js 源中。还有更多其他方式黑客可以得到任何东西，例如xss，但它是一般性的东西，与您的代码关系不大。
How can I secure an API key. For example to call MailChimp API
这里的残酷事实是不...在客户端，您无法保护任何类型的秘密，至少在网络应用程序中是这样。
为了让您了解可用于保护 API 的技术以及如何绕过它们，您可以阅读 this series 文章。虽然它是在为移动应用程序提供服务的 Api 上下文中，但其中大部分也适用于为 Web 应用程序提供服务的 API。您将了解如何使用和绕过 api-密钥、ouath 令牌、hmac 和证书固定。
对第三方服务的访问必须始终在后端进行，绝不能在客户端进行。使用这种方法，您只有一个地方需要保护，那就是在您的控制之下。
例如，在您访问 Mailchimp 的情况下 API...如果您的后端负责代表您的网络应用程序执行此操作，那么您可以采取安全措施检测和减轻 Web 应用程序对 Mailchimp 的使用，例如用户行为分析 (UBA) 解决方案，但是为 Web 应用程序保留对 Mailchimp API 的访问权限意味着您只知道有人在滥用它Mailchimp 提醒您或您在他们的仪表板中看到它。
I am not familiar with how a hacker would see this if a poor solution is implemented. How can I verify it is not accessible to them?
您可能已经知道 F12 访问开发人员工具是其中一种方式。
id 使用 OWASP 安全工具 Zed Attack Proxy (ZAP) 的另一种方式，并使用他们的话：
The OWASP Zed Attack Proxy (ZAP) is one of the world’s most popular free security tools and is actively maintained by hundreds of international volunteers*. It can help you automatically find security vulnerabilities in your web applications while you are developing and testing your applications. Its also a great tool for experienced pentesters to use for manual security testing.
在前端存储秘密在安全方面是一个很大的禁忌。
如果您的网站正在使用服务器端渲染（又名 SSG 或静态网站）并托管在 Netlify 上，那么对于 Netlify 函数（服务器端逻辑）和环境变量来说，这听起来是一个完美的工作。
您可以在此处找到一些文档：Netlify functions。
Netlify 函数由 AWS Lambda 提供支持。
您通常会在项目目录中创建一个函数文件夹并在其中编写您的函数。函数是在每次部署后构建的，但您可以使用 Netlify Dev
在本地测试您的函数
这是一个使用 Mailchimp 服务并注入秘密的函数示例：
https://github.com/tobilg/netlify-functions-landingpage/blob/169de175d04b165b5d4801b09cb250cd9a740da5/src/lambda/signup.js
我正在使用 Nuxt（与 SSR/PWA/Vuejs/Node.js/Vuex/Firestore）并且想对以下内容有一个大概的了解或一个例子：
- 如何保护 API 密钥。例如调用 MailChimp API
- 我不熟悉如果实施了糟糕的解决方案，黑客会如何看待这一点。我如何验证他们无法访问它？
我发现许多 "solutions" 建议使用环境变量，但对于每个解决方案，都有人指出它不安全。参见：
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 and https://www.youtube.com/watch?v=j-3RwvWZoaU (@11:30)。我只需要在输入后向邮件黑猩猩帐户添加一封电子邮件，似乎开销很大。
我还看到我已经将我的 Firestore api 密钥存储为环境变量。这安全吗？当我打开 chrome dev tools-> sources-> page-> app.js 时，我可以看到 api 键就在那里（仅在开发模式下测试过）！
您可以使用服务器中间件或 https://github.com/nuxt-community/separate-env-module
中间件本身不会工作，因为它也可以在客户端上执行，中间件中使用的代码将在客户端上可用
对于 #2，您可以检查它是否包含在客户端 js 源中。还有更多其他方式黑客可以得到任何东西，例如xss，但它是一般性的东西，与您的代码关系不大。
How can I secure an API key. For example to call MailChimp API
这里的残酷事实是不...在客户端，您无法保护任何类型的秘密，至少在网络应用程序中是这样。
为了让您了解可用于保护 API 的技术以及如何绕过它们，您可以阅读 this series 文章。虽然它是在为移动应用程序提供服务的 Api 上下文中，但其中大部分也适用于为 Web 应用程序提供服务的 API。您将了解如何使用和绕过 api-密钥、ouath 令牌、hmac 和证书固定。
对第三方服务的访问必须始终在后端进行，绝不能在客户端进行。使用这种方法，您只有一个地方需要保护，那就是在您的控制之下。
例如，在您访问 Mailchimp 的情况下 API...如果您的后端负责代表您的网络应用程序执行此操作，那么您可以采取安全措施检测和减轻 Web 应用程序对 Mailchimp 的使用，例如用户行为分析 (UBA) 解决方案，但是为 Web 应用程序保留对 Mailchimp API 的访问权限意味着您只知道有人在滥用它Mailchimp 提醒您或您在他们的仪表板中看到它。
I am not familiar with how a hacker would see this if a poor solution is implemented. How can I verify it is not accessible to them?
您可能已经知道 F12 访问开发人员工具是其中一种方式。
id 使用 OWASP 安全工具 Zed Attack Proxy (ZAP) 的另一种方式，并使用他们的话：
The OWASP Zed Attack Proxy (ZAP) is one of the world’s most popular free security tools and is actively maintained by hundreds of international volunteers*. It can help you automatically find security vulnerabilities in your web applications while you are developing and testing your applications. Its also a great tool for experienced pentesters to use for manual security testing.
在前端存储秘密在安全方面是一个很大的禁忌。
如果您的网站正在使用服务器端渲染（又名 SSG 或静态网站）并托管在 Netlify 上，那么对于 Netlify 函数（服务器端逻辑）和环境变量来说，这听起来是一个完美的工作。
您可以在此处找到一些文档：Netlify functions。 Netlify 函数由 AWS Lambda 提供支持。
您通常会在项目目录中创建一个函数文件夹并在其中编写您的函数。函数是在每次部署后构建的，但您可以使用 Netlify Dev
在本地测试您的函数这是一个使用 Mailchimp 服务并注入秘密的函数示例： https://github.com/tobilg/netlify-functions-landingpage/blob/169de175d04b165b5d4801b09cb250cd9a740da5/src/lambda/signup.js