在纯前端应用程序上的何处以及如何存储服务凭证

Where and how to store service credentials on pure front-end application

我希望在客户端(即浏览器)使用 JavaScript 运行 构建一个纯前端应用程序。我的应用程序应该向第三部分服务发出请求,这需要某种身份验证方法。

后端框架为这类事情提供配置文件,但由于 JS 代码全部在客户端机器上解释,配置文件不能成为 bundle 的一部分。

有没有什么方法可以在客户端安全地存储服务 API 密钥、凭据等,或者我是否也需要后端解决方案?

在最流行的框架(Angular 和 React)中搜索配置文件,结果只存储了特定于环境的 URL。我开始认为我已经走到了死胡同,这根本无法完成。

取决于...您不希望用户能够嗅出您必须发送给第三方的任何秘密,但在使用 OAuth2 的隐式授权的情况下,您实际上可以启动并完成它在浏览器中。

您将重定向到 login/authentication 的第 3 方,然后该用户将被发送回给您,并带有一段时间有效的访问令牌。

根据规范,该令牌实际上是在 URL 片段中发送的,因此它被发送到浏览器而不是您的服务器。如果您想获取服务器的访问令牌,您需要前端代码来解析 URL 片段并发送其内容。

如果 API 允许您从浏览器连接,您可以将所有内容保存在浏览器中,而不需要后端服务器来处理凭据。但并非每个 API 都允许纯粹的前端身份验证和 API 调用。

所以,这取决于...

您能否将服务 api 凭据存储在客户端缓存或 cookie 等中?是的。通过网络发送它们并存储在浏览器中会 secure 吗? 没有

如果保持凭据安全是要求的一部分,我会在后端进行身份验证或使用第三方服务为您完成这项工作。