保護建立在react/react-router上的單頁應用程序

我一直在使用React和React-Router將單頁應用程序放在一起，我似乎無法理解如何保護這些應用程序。保護建立在react/react-router上的單頁應用程序

我發現了一個很好的清除blog post，它顯示了一種方法，但它對我來說看起來並不太安全。基本上，該文章中介紹的方法是限制用戶未被授權訪問的組件的渲染。作者寫了幾個更多的帖子，這些帖子是這個想法的變體，將其擴展到React-Router路由和其他組件，但在他們的心中，所有這些方法似乎都依賴於相同的有缺陷的想法：客戶端代碼決定要做什麼根據構成組件時商店中的數據。這對我來說似乎是一個問題 - 如何阻止一個有進取心的黑客從代碼中搞亂訪問內容？

我想到了三種不同的方法，其中沒有一個我很高興：

我肯定會寫我的授權碼以這樣的方式將客戶端代碼是不斷檢查與服務器進行授權，但這似乎是浪費。
我可以設置應用程序，以便只有在服務器驗證客戶端有權訪問該代碼後，模塊纔會從服務器推送到客戶端。但是，這似乎涉及將我的代碼打包成一百萬個小模塊，而不是一個很好的單一包（我正在使用browserify）。
某些服務器端渲染系統可能會工作，這將確保用戶只能看到服務器已決定有權查看的頁面。但是這看起來很複雜，而且看起來像是倒退了一步（如果我想讓服務器完成所有工作，我可以編寫一個傳統的Web應用程序）。

那麼，什麼是最好的方法？其他人如何解決這個問題？

來源

2016-04-15 Kryten

如果你想保護代碼本身，似乎任何的辦法，或者發送代碼到客戶端，或發送代碼能夠加載代碼，將是一個問題。因此，即使傳統的簡單代碼分割方法在這裏也可能存在問題，因爲它們會顯示分發包的文件名。你可以通過在服務器上要求一個cookie來保護它，但是這看起來像是一個大驚小怪。

如果隱藏未經授權的用戶的內部代碼是您的應用程序的要求，我建議將它分成兩個單獨的應用程序與單獨的捆綁包。從一個到另一個需要一個單獨的請求，但這似乎與你想要完成的一致。

來源

2016-04-16 01:22:30

只要商店不包含用戶未被授權擁有的數據，即使黑客檢查源並看到他不應該擁有的模塊/鏈接，也不應該有太多問題進入。

商店內部的狀態以及關鍵邏輯將來自服務和需要保護的服務，無論是否爲SPA;但特別是在SPA。

另外：使用Redux的服務器端渲染不是太複雜。你可以在這裏讀到它：

http://redux.js.org/docs/recipes/ServerRendering.html

它基本上只能用於爲HTML根與預定義的狀態。這進一步提高了安全性和加載速度，但並不違背SPA背後的想法。

來源

2016-04-16 01:23:55 FunkyPeanut

偉大的問題。我不知道的，似乎超過其他任何絕對最佳實踐漂浮在那裏，所以我就提供一些提示/想法在這裏：

遠程API應該處理的實際身份驗證，當然。
會話需要共享，所以像redis這樣的商店通常是一個好主意，尤其是，快速讀取。
如果您正在進行涉及水合的服務器端渲染，則需要一種方法來在服務器和客戶端之間共享會話狀態。你可以發送一個會話cookie或JWT令牌，將它讀入內存（可能使用redux並將它保存在狀態樹中？），也可以使用中間件（la redux？）將其設置爲請求頭。
在客戶端上，您還可以依靠localStorage來保存cookie/JWT
也許將代碼拆分爲兩個捆綁包，一個用於身份驗證，一個用於實際應用邏輯？

參見：

來源

2016-04-16 01:24:17 markthethomas

保護建立在react/react-router上的單頁應用程序

回答

相關問題