保持API憑證在React應用程序中保密

Question

我有一個連接到幾個API服務的ReactJs前端應用程序。其中一些API服務要求我在首次登錄時通過我的appId和appSecret。

我目前有一個js文件，它被縮小和捆綁，但我覺得我仍然將我的應用憑據暴露給精明的入侵者。

保護它們的正確方法是什麼？

Answer 1

我閱讀了評論，看到你仍然感到困惑，但更詳細的解釋是在評論中允許的空間超出了允許的範圍，因此發佈了更詳細的解釋作爲答案。

這個想法是，您使用您的服務器作爲所有請求和響應的代理。

• 案例1：你需要對從前端的API請求 -前端會發出不API證書到你的服務器的請求（，因爲它們不是存儲在前端應用程序）。您的服務器將在必要時驗證請求（如檢查您的用戶是否已登錄到您的服務器），確保已登錄的用戶有權使用api服務（僅當您有多個用戶角色時），然後您的服務器將使用存儲在服務器上的憑證發出api請求。然後，服務器響應前端客戶端，該客戶端正在等待對其請求的響應，或者是API請求的直接結果，或者是您在服務器上執行了一些預處理/格式設置的那些客戶端的版本。通過這種方式，您的API憑證可以祕密存儲在您的服務器上，並且只有您想授予訪問權限的人才能夠使用您的API憑證（通過您的前端客戶端應用程序體驗）才能使用它。
• 案例2：您將您的API公開給經過身份驗證的用戶 - 實現此目的的常用方法是向想要提供訪問權限的人員頒發某種類型的密鑰。如果他們失敗了，他們要麼運氣不好，要麼讓他們以某種方式聯繫你/你的公司/爲你管理這件事的人，讓他們以某種方式向你證明他們是誰，他們是誰，他們應該可以訪問你的api。這與您在網站上忘記密碼的情況非常相似，您必須在重置密碼之前證明自己是您，通常通過點擊鏈接發送電子郵件至與您的帳戶相關聯的電子郵件帳戶正在說失去了密碼。無論如何，假設他們有他們的密碼，它應該隨每個請求一起發送給你的API，並且你需要確保它是你處理的每個請求的正確密鑰。

這些不是處理這些交互的唯一方法，但它們是一些更常見的方法。情況1和情況2不同，因爲在情況1中，有一個客戶端（前端）需要從API獲取數據。 API的憑據通過僅由您的服務器存儲和使用來進行保護。在這種情況下，您可以選擇限制使用您應用的每個人的訪問權限，以及在您的應用上進行身份驗證的每個人（您必須實現登錄系統），僅限於已登錄且具有特定權限級別的用戶（您必須實現角色）。在情況2中，沒有客戶端應用程序，並且有人直接訪問您的API。您仍然需要對其進行身份驗證，因此您只需向其發送一次密鑰，並且每次發出請求時都會傳遞該密鑰。