Vuejs 安全 api 键

Question

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

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

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

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 / 联系表的方法。

在联系表中，您需要确保什么？

机器人提交=> 解决方案：验证码（例如：Google验证码）
被恶人重复提交=> 解决方案：在你的API中实施验证功能，以防止验证代理和ip来源。
直接通过 http 请求提交（不使用您的网络表单）=> 解决方案：在您的 API 中实施域限制（只允许提交来自您的网络域）
中间人就像邪恶的代理（盗窃和数据操纵）=> 解决方案 在你的 API
中实施 HTTPS

如果您的 API 需要一个 APIKEY，并且这个 API 是由浏览器请求的，您的 APIKEY 将始终对开发工具可见。

Vuejs 安全 api 键

Vuejs safely api keys

php

node.js

laravel

vue.js

nuxtjs