Question

好的，所以我有一个使用Nuxt JS构建的前端应用程序，使用Axios向我的REST API发出请求（单独）。

如果用户在网站上进行搜索，则API URL在XMLHttprequests中可见，因此每个人都可以根据需要使用API。

制作它的最佳方式是什么，以便只有通过我的网站搜索的用户才能访问API，而直接访问该网址的用户将被拒绝。我想使用某种令牌系统，但最好的方法是什么？智威汤逊？（用户从不登录，因此没有“身份验证”）

谢谢！

Answer 1

IMO，您无法阻止访问您的其他非法客户端后端，因为您描述了官方客户和其他非法人员对您的后端有相同的知识。
但是，您可以通过某种方法让非法客户更难以访问您的后端，例如 POST所有请求 ， 标头中的特殊键< / em> ， 标题中<30分钟更改的标记 和客户端IP 服务器端API限制 < /强>

如果搜索API的安全性非常重要，请通过登录进行身份验证;如果没有，那就放手吧，因为它不在你的关键路径上。让我们专注于其他重要的事情。

Answer 2

我和＃34;船＃34;我当前的设置实际上是在VueJs中，但在进入StackOverflow之前我开发了一种方法实际上，前端调用服务器然后服务器调用API，所以在浏览器中，你只会看到对服务器层的调用，唯一的限制是调用必须来自相同的主机名。

backend由expressJs和前端与VueJs

一起处理

// protect /api calls to only be originated from 'process.env.API_ALLOW_HOST'
app.use(api.allowOnlySameDomainRequests());

...

const allowHostname = process.env.API_ALLOW_HOST ||'localhost';

exports.api = {
    ...
    allowOnlySameDomainRequests: (req, res, next) => {
        if(req.url.startsWith('/api') && req.hostname === allowHostname) {
            // an /api call, only if request is the same
            return next();
        } else if (!req.url.startsWith('/api')) {
            // not an /api call
            return next();
        }

        return res.redirect('/error?code=401');
    },
    ...
};

在我们的案例中，我们使用Oauth2（Google通过passportJs签名）登录用户，我总是拥有OAuth2成功重定向给出的用户ID，并且该用户ID一起传递到API中的API使用apikey ...在服务器中我检查了该用户标识权限，我允许或不允许执行该操作。

但即使我试图找到更好的东西。我看过几个使用后端调用的javascript前端应用，但他们使用Bearer令牌。

作为一个好奇的用户，您会看到所有API的路径以及它们的组成方式，但在我的情况下，您只能看到对expressJs后端的调用，只有在那里我转发到真正的API ...我不知道这是否只是更多的工作＆＃34;，但似乎更多＆＃34;安全＆＃34;以这种方式解决问题。

处理来自前端的API调用的最佳方法

2 个答案: