在React前端安全地存儲身份驗證令牌

Question

我目前正在開發一個單頁反應應用程序。 此應用程序不需要任何登錄，它將公開提供。 我正在向另一個我無法訪問的API的webhook發出POST請求，而我沒有維護。 此API要求我通過POST發送身份驗證令牌。 我想知道如何安全地存儲這個令牌，以便它不會在世界上出現。 我需要按原樣發送它，因此將其存儲在后端提供的cookie中不是一種選擇。 存儲在JWT中是行不通的，因為我可以在沒有秘密的情況下解碼它。

有沒有辦法存儲令牌而不將它暴露給世界？

我希望這個問題很清楚，如果不讓我知道，我會更好地解釋。

謝謝大家的時間！

Answer 1

我通常會運行本地Express服務器並通過它代理請求。

您將在Express應用程序中設置一條路徑，您將從React前端POST，這個Express路由處理程序然后從服務器端調用外部API，該外部API具有要放入標頭的令牌。 然后，響應將返回到您的React前端，而不會了解有關外部API或令牌的任何信息。

Answer 2

您無法將令牌存儲在前端。 要么您需要使用cookie / session來存儲令牌。 如果您想存儲令牌，則需要加密它並存儲它將是更好的選擇。

請在此處查看以了解JWT令牌機制

如果網絡應用程序沒有登錄。 沒有用戶詳細信息，您無法生成令牌。

令牌應該在最佳實踐請求的標頭中傳遞。

Answer 3

如果您使用create-react-app來實例化您的React項目，您是否考慮過使用環境變量來存儲令牌？ 它不是100％安全可靠，請在此處查看缺點，但可以快速修復，無需單獨的代理請求。 您可以在目錄的根目錄中創建一個.env文件（確保將其添加到.gitignore，如果使用git）並在那里定義變量。 他們需要從REACT_APP開始，比如REACT_APP_SECRET=1234 ，然后可以在您的應用中使用process.env.REACT_APP_SECRET引用它們。

在這里閱讀有關React環境的更多信息。