首頁猿問使用 Express API 和...

使用 Express API 和 React 前端防止 CSRF

JavaScript

慕田峪7331174 2024-01-18 14:59:43

在過去的幾天里，我一直在閱讀有關(guān) CSRF 的內(nèi)容，感覺我已經(jīng)很好地掌握了它是什么以及如何預(yù)防它。我正在構(gòu)建一個小型 Express/React 應(yīng)用程序，它將有一個用于更新應(yīng)用程序內(nèi)容的安全管理區(qū)域，并且我希望它能夠免受 CSRF 的影響。據(jù)我所知，服務(wù)器生成 CSRF 令牌然后將其與請求的視圖（頁面）一起發(fā)送到客戶端（然后可以將令牌隱藏在 HTML 表單輸入標(biāo)記中）是很常見的。但是，我的 Express API 不提供 HTML 服務(wù)，它是一個僅返回 JSON 數(shù)據(jù)的 REST API。UI 是用 React 構(gòu)建的，運行在與服務(wù)器不同的端口上。我的問題是；在哪里安全地存儲服務(wù)器上生成的令牌？例如，如果我通過點擊“/api/login”以管理員身份登錄，生成令牌，并在 API 響應(yīng)中將其發(fā)送回客戶端，那么我現(xiàn)在應(yīng)該如何處理它？最初的計劃是使用 Redux 來存儲 token，但是閱讀這篇文章Is Redux secure? ，這聽起來并不理想。我考慮過使用 React 環(huán)境變量，但也了解到這些變量在構(gòu)建中公開。顯然 localStorage 也是一個壞主意......我真的很難使用我正在實現(xiàn)的工具（即 Express/React）找到這個問題的解決方案任何幫助、鏈接、建議、批評將不勝感激，我想學(xué)習(xí)構(gòu)建考慮到安全性的應(yīng)用程序

查看完整描述

1 回答

一只甜甜圈

TA貢獻1836條經(jīng)驗獲得超5個贊

據(jù)我了解，服務(wù)器生成 CSRF 令牌是很常見的

服務(wù)器需要生成兩個CSRF令牌

然后將其與已請求的視圖（頁面）一起發(fā)送到客戶端（然后可以將令牌隱藏在 HTML 表單輸入標(biāo)記中）。

一個令牌通常作為 cookie 發(fā)送，另一個令牌可以作為 HTTP 標(biāo)頭發(fā)送。盡管可以通過這種方式發(fā)送，但不需要將其作為 HTML 表單輸入標(biāo)記（或正文的任何其他部分）發(fā)送到 HTML 正文內(nèi)。

我的問題是；在哪里安全地存儲服務(wù)器上生成的令牌？

您不必在服務(wù)器上存儲令牌。你可以，但你不需要。

原計劃是使用Redux來存儲token

Redux 存儲位于客戶端的瀏覽器內(nèi)存中。理論上，一個 React 組件（從服務(wù)器響應(yīng)中提取第二個 CSRF 令牌）可以臨時將令牌存儲在存儲中，以便另一個 React 組件可以從那里獲取它并在發(fā)送到服務(wù)器之前將其放入下一個請求中。

顯然 localStorage 也是一個壞主意......

是的

任何幫助、鏈接、建議、批評將不勝感激，我想學(xué)習(xí)構(gòu)建考慮到安全性的應(yīng)用程序

Links
With Express 使用這個中間件是很常見的。

批評
嚴格來說，這在 CSRF 相關(guān) Q/A 的背景下是偏離主題的，但是......

UI 是用 React 構(gòu)建的，運行在與服務(wù)器不同的端口上。

react-scripts這暗示了使用which start的可能性webpack-dev-server。它適合開發(fā)，但不適合生產(chǎn)中的部署。然而，這是一個單獨的主題，向 Web 客戶端提供 React 應(yīng)用程序的構(gòu)建工件（.html 文件、腳本包）與 CSRF 攻擊及其緩解措施無關(guān)。

我想學(xué)習(xí)構(gòu)建考慮安全性的應(yīng)用程序

那么您可能會考慮使用一臺網(wǎng)絡(luò)服務(wù)器而不是兩臺（前端為 React 應(yīng)用程序提供服務(wù)，后端為 API 響應(yīng)提供服務(wù)）。使用一臺服務(wù)器進行生產(chǎn)部署，不僅復(fù)雜性和成本更低，而且更安全，因為兩臺服務(wù)器具有更大的攻擊面，并且使用一臺服務(wù)器，您不需要通過使用 CORS 來削弱安全性。

反對回復(fù) 2024-01-18