隐藏AngualrJS应用程序的API访问凭据

Question

这是访问REST API的AngularJS网站的设计问题。由于可以从客户端查看所有AngularJS代码（假设混淆不完全安全），您如何隐藏API访问凭证（API密钥和密码甚至是JWT）？

这可以扩展到更广泛的问题，关于如何在AngularJS网站中隐藏其他应用程序逻辑？

我的研究让我得到了一些见解，其中一个是

http://billpatrianakos.me/blog/2016/02/15/securing-api-keys-in-a-javascript-single-page-app/

但是现在这让我更加困惑，因为帖子暗示连接到REST API的SPA不是一个好的架构。我认为是这样，现在无法确定正确的方法是什么。

Answer 1

我最接近答案的是这个资源：

  

https://developers.facebook.com/docs/facebook-login/security#appsecret

Facebook，他们的安全性非常好并且说：

1. 切勿在客户端或可分解代码中包含App Secret。
2. 在客户端使用独特的短期令牌。

简而言之，不要在客户端保留API秘密

为了不简短而在评论中回答讨论：

  

然后我的问题是“什么是SPA和服务器端代码（或数据库访问）的正确架构？”。

没有一个正确的架构，这取决于项目的规模和范围。它还取决于您选择的前端和后端框架。这些选择还取决于您调用的其他API的数量，或者您最熟悉的其他开发人员。

更具体地讲安全性，理想情况下，您希望为用户设置一个会话，该会话由用户用来标识自己的令牌组成。这通常是服务器在登录时为每个用户生成的。通常，这是由您正在使用的框架提供的，但即使不是这样，构建起来也相当简单。您需要防止跨源请求（确保用户实际上在您的前端）并具有安全连接（设置SSL和https，尽管这可能会变得复杂）。您通常希望通过类似Uglify之类的东西来运行JS代码，以防止它太容易查看，但这并不能保证人们不能接受该代码并使其不可理解。

Answer 2

正如其他答案所暗示的那样，您不应该在客户端源代码中保留API密钥或任何机密。没有办法在客户端上隐藏任何东西，并且混淆！=安全。

如果您希望在应用程序中构建安全身份验证/授权，则需要将JWT返回到AngularJS应用程序。然后，您可以将此JWT作为承载令牌传递给您的API，这将验证令牌的有效性并允许API授权访问AngularJS应用程序。

关于存储JWT令牌的位置，您可以将其存储在本地存储或cookie中。在选择是否将令牌存储在这些位置之一时，需要认真考虑。

如果您担心安全问题，我会调查OAuth 2.0 Implicit Flow。

Answer 3

不要将API密钥放在客户端源代码中。将它们保存在您的服务器上，让您的客户端向您的服务器发出请求，然后服务器调用外部API来获取数据。