在React前端应用程序中安全存储API令牌的最佳实践

Question

我正在React应用程序中用axios调用Pipedrive API，如下所示：

axios.post('https://api.pipedrive.com/v1/deals?api_token=123thisissometesttokenblablabla456', {
name: "test",
id: 1,
}).then((response) => {
console.log(response);
}).catch((error) => {
console.log(error);
});

由于这是一个前端应用程序，这种做法使api_token=123thisissometesttokenblablabla456向任何使用某些浏览器开发工具查看源代码的人公开，从而使他们能够完全访问我在Pipedrive中的数据。

有没有任何方法可以在前端应用程序中安全地使用API令牌/而无需设置自己的后端？

我希望Pipedrive允许我配置它允许从哪些域调用API，但不幸的是，这是不可能的。

Answer 1

不幸的是，在您的环境中，除了设置后端服务并将其存储在那里之外，没有其他安全的方法可以做到这一点。

即使你可以安全地存储价值，你面临的问题是，任何人都可以查看你网站上发生的网络活动，以获得代币。