從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客戶端或可分解代碼中的祕密。
2. 在客戶端使用唯一的短期令牌。

總之，不要讓API祕密在客戶端

---

接聽註釋中討論的不是短暫的緣故：

然後我的問題是「那麼對於SPA和服務器端代碼（或數據庫訪問）而言，正確的架構是什麼？「。

沒有一個正確的架構，它取決於您的項目的大小和範圍。它還將取決於您選擇的前端和後端框架。這些選擇還取決於您要調用的其他API，或者您最熟悉的其他開發人員。

更具體地講安全性，理想情況下，您希望爲用戶設置一個會話，該會話由用戶用來標識自己的令牌組成。這通常是服務器在登錄時爲每個用戶生成的。通常，這是由您正在使用的框架提供的，但即使不是，構建起來也相當簡單。您將希望防止交叉來源請求（確保用戶實際位於您的前端）並擁有安全連接（設置SSL和https，儘管這可能會變得複雜）。你通常會想通過類似Uglify的方式來運行你的JS代碼，以防止它被查看太容易，但是這並不能保證人們不能採取這些代碼並且取消它。

Answer 2

請勿將API密鑰放入您的客戶端源代碼中。將它們保存在您的服務器上，讓您的客戶端向您的服務器發出請求，然後再向外部API調用數據。

Answer 3

正如其他答案所建議的，您不應該在客戶端源代碼中保留API密鑰或任何祕密。無法隱藏客戶端上的任何內容，並且混淆！=安全性。

如果您希望將安全身份驗證/授權構建到您的應用中，您需要將JWT返回給AngularJS應用。然後，您可以將此JWT作爲不記名令牌傳遞給您的API，以驗證令牌的有效性並允許API授權訪問AngularJS應用程序。

至於在哪裏存儲JWT令牌，可以將其存儲在本地存儲或Cookie中。在選擇是否將令牌存儲在這些位置中的任何一個位置之間存在認真的考慮。

如果您擔心安全問題，我會查看OAuth 2.0 Implicit Flow。