Vuejs 安全 api 密钥

Question

我可能对这个概念仍然有点困惑。但。在这种情况下，我有一个联系表单，在发送时，它会调用我自己的 laravel 后端 api，它将为我处理发送电子邮件功能。

我想使用 api 密钥来保护它，但我不希望我的 api 密钥暴露在前端的任何地方。我的 Vue/Nuxt 应用程序正在服务器上运行。

所以环境变量应该是答案 - 我猜。不过，如果我这样做：

this.$axios.$post('http://localhost/someMailFunc?apk=' + process.env.API_KEY, {

                    name: name,

                    subject: subject,

                    email: email,

                    message: message,

                }).then(response => {

                    // somecomplete

                }).catch(e => {

                    // somecatch

                })

当然，在代码中它是隐藏的，但是在前端检查它，可见的地方都是 api 密钥。

如果密钥是当今的解决方案，那么推荐使用密钥进行安全保护的方法是什么？

Answer 1

我认为在这个用例（联系表单）中，API KEY 并不是保护您的 api/联系表单的方法。在联系表格中，您需要确保什么？提交机器人=>解决方案：Captcha（例如：Google Captcha）被邪恶的人重复提交 =>解决方案：在您的 API 中实现验证功能，以防止验证代理和 IP 源。直接通过 http 请求提交（不使用您的 Web 表单）=>解决方案：在您的 API 中实施域约束（仅允许从您的 Web 域提交）中间人喜欢邪恶代理（盗窃和数据操纵） =>解决方案在您的 API 中实施 HTTPS如果您的 API 需要 APIKEY，并且该 API 是由浏览器请求的，则您的 APIKEY 将始终对开发工具可见。