如何在公共站点中处理 Angular 代码中的客户端机密

Question

我有一个问题试图解决几天，仍然没有得到任何严格的解决方案。

我有一个 Angular 应用程序，该应用程序将公开可用，因此无需登录或凭据即可打开网站，并且用户可以将 Id 作为查询参数。让我们说www.mysite.com/123

要检索 123 的数据，我有一个后端，需要使用 clientId 和 clientSecret 进行身份验证，以获取 access_token，然后使用 access_token 调用 api 以获取信息。

如果我将 clientId 和 clientSecret 放入代码中，黑客可以窃取并使用它。

有人建议在后端启用 CORS，以确保只处理来自我网站的请求。我已经这样做了，但是知道 clientId 和 clientSecret 即使启用了 CORS，黑客也可以通过添加 origin 和 referrer 作为标头来从 postaman 发送请求。

我尝试使用 Angular Universal 进行服务器端渲染，希望 api 调用将在服务端运行并且对用户隐藏，但 api 调用仍在前端发生。

真的陷入了这个问题，感谢任何形式的帮助。

由于应用程序很小，它只托管一个由 stencilJs 开发的 Web 组件，如果其他语言如 react 或 vue 可以支持我的场景，我可以切换

Answer 1

您可以通过多种方式在前端客户端构建中对静态插入的令牌进行模糊处理，但它仍然会存在，并且它会添加唯一的东西——攻击者需要额外的步骤来反转它，至少据我所知。

所以要探索解决问题的方法，我想您想以更狭义的方式定义它，即您要保护什么：

• 需要权限的资源（管理面板）

  • 那么您的答案将是动态身份验证。

• 保护您的 api 免受外部使用/ddos

  • CORS、速率限制、动态令牌发行（请注意该策略仍将在前端客户端代码中可用）

我也认为 owasp 指南将是一个很好的主题阅读： https://cheatsheetseries.owasp.org/cheatsheets/REST_Security_Cheat_Sheet.html

我想我应该澄清一下，在我看来，在“保护 api”的情况下，您最终要实施的解决方案将是建立围栏以跳过，而不是完全密封 api第三方使用。