React/Redux 可以在前端操作存储状态吗？

Question

我有一些关于react（或者更确切地说redux）存储安全性的一般性问题：是否可以从前端以某种方式操纵存储状态？例如，从前端将某些“isLoggedIn”或“isAdmin”属性设置为 true ？

我想该商店位于客户端浏览器上的某个位置，并且可能保存在内存中。那么存储必须来自加载并注入到浏览器上的 html 中的 javascript 包，对吧？我可以像浏览器中的某些视图部分一样访问商店，然后对其进行操作吗？还是更复杂？

Answer 1

是的，它很容易被操纵。查看浏览器 DevTools 中的“应用程序”选项卡。根据您将其存储在 LocalStorage 还是 SessionStorage 中，您可以找到代表整个存储对象的 JSON 对象。您也可以编辑或删除它。您可以尝试向商店添加一些中间件来签署当前状态，但整个签名和验证代码必须发送到客户端并在那里执行。因此，这只会让攻击者的处境变得更加困难，但并非不可能。您可以在没有存储的情况下执行此操作并将其保存到 RAM，但是当用户刷新页面时存储将消失。

然而，在后端站点上，将每个客户端都视为骗子，并仔细检查任何身份验证/授权信息。在前端，您可以区分普通应用程序数据和安全信息。安全相关信息可以在每次页面刷新时重新加载，但服务器响应也可以被操纵。因此它可能会用一些 RSA 公钥/私钥进行签名来保存。然后，您可以将此信息存储在 React 中Context并将其提供给每个组件。

正常的应用程序数据可以保留在 Redux 存储中并以正常方式使用。