保护基于 react/react-router 构建的单页应用程序答案

【问题标题】：Securing a single page application built on react/react-router保护基于 react/react-router 构建的单页应用程序
【发布时间】：2016-04-15 23:35:05
【问题描述】：

我一直在使用 React 和 React-Router 组合一个单页应用程序，但我似乎无法理解如何保护这些应用程序。

我发现了一个很清晰的blog post，它显示了一种方法，但对我来说它看起来不是很安全。基本上，该帖子中提出的方法是限制用户无权访问的组件的呈现。作者写了几篇关于这个想法的变体，将其扩展到 React-Router 路由和其他组件，但在他们的内心深处，所有这些方法似乎都依赖于同样有缺陷的想法：客户端代码决定做什么基于组成组件时存储中的数据。这对我来说似乎是个问题 - 有什么办法可以阻止一个有进取心的黑客弄乱代码来获取东西？

我想到了三种不同的方法，但我都不满意：

我当然可以编写我的授权代码，使客户端代码不断与服务器检查授权，但这似乎很浪费。
我可以设置应用程序，以便只有在服务器验证客户端有权访问该代码后，模块才会从服务器推送到客户端。但这似乎涉及将我的代码分解成一百万个小模块，而不是一个漂亮的整体包（我正在使用 browserify）。
某些服务器端渲染系统可能会工作，这将确保用户只能看到服务器已决定他们有权查看的页面。但这似乎很复杂，而且似乎是一种倒退（如果我希望服务器完成所有操作，我可以编写一个传统的 Web 应用程序）。

那么，最好的方法是什么？其他人是如何解决这个问题的？

【问题讨论】：

标签： reactjs single-page-application react-router redux

【解决方案1】：

如果您试图保护代码本身，似乎任何将代码发送到客户端或发送代码能够加载代码，将是一个问题。因此，即使是带有代码拆分的传统简单方法在这里也可能存在问题，因为它们会显示包的文件名。您可以通过要求服务器上的 cookie 来保护它，但这似乎很麻烦。

如果您的应用程序需要向未经授权的用户隐藏内部代码，我建议将其拆分为具有单独捆绑包的两个单独应用程序。从一个到另一个需要单独的请求，但这似乎与您想要完成的目标一致。

【讨论】：

请原谅我缺乏这方面的知识，但是最好的方法是什么？我认为自己对 ReactJS 有相当透彻的了解，但我不确定如何接近，这是我正在寻求实现的东西。我对 ReactJS .js 包的所有经验都是标准实现——将它们放在公共根目录中。撇开身份验证场景不谈，我该如何进行条件发布？用户通过身份验证后，我可以直接发送 bundle.js 文件吗？任何帮助都非常感谢（至少对我来说这是一个棘手的问题）。

【解决方案2】：

很好的问题。我不知道有任何绝对最佳实践似乎超越了其他人，所以我在这里只提供一些提示/想法：

当然，远程 API 应该处理实际的身份验证。
会话需要共享，所以像 redis 这样的存储通常是个好主意，尤其是。用于快速读取。
如果您正在执行涉及水合的服务器端渲染，您将需要一种在服务器和客户端之间共享会话状态的方法。请参阅下面的链接，了解一种进行通用反应的方法
在客户端，您可以发送会话 cookie 或 JWT 令牌，将其读入内存（可能使用 redux 并将其保存在您的状态树中？），也可能使用中间件（la redux？）将其设置为请求标头。
在客户端，您也可以依靠 localStorage 来保存 cookie/JWT
也许将代码分成两个包，一个用于身份验证，一个用于实际应用逻辑？

另见：

【讨论】：

【解决方案3】：

只要商店不包含用户无权拥有的数据，即使黑客检查源并看到他不应该访问的模块/链接，也不应该有太大的问题到。

商店内部的状态以及关键逻辑将来自服务，并且需要保护这些服务，无论它是否是 SPA；但尤其是在 SPA 上。

另外：使用 Redux 进行服务器端渲染并不太复杂。你可以在这里阅读：

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

它基本上只用于提供具有预定义状态的根 html。这进一步提高了安全性和加载速度，但并不违背 SPA 背后的理念。

【讨论】：