客户端可以修改react组件状态吗？

Question

我正在为应用程序构建一个管理页面，并且有一个状态值“已验证”，在成功登录（在服务器上进行身份验证）后从“假”翻转为“真”，然后显示实际的管理面板。

组件状态值是否不会被客户端篡改？基本上，如果客户端可以将我的“已验证”状态值修改为“真”，他们可以跳过登录并直接进入管理面板（我显然不想要）。

我读到 React Dev Tools 允许客户端修改值，但每个人都说“在服务器上验证”，但我正在服务器上验证并相应地更新我的状态，如果用户获得批准。如果让状态值来管理它是不明智的，那么在成功的服务器端身份验证登录后有条件地显示管理页面的正确方法是什么？

我认为这是一个重要的问题，因为篡改 React 应用程序中的状态值会对应用程序/数据库中的数据完整性产生巨大的负面影响。

Answer 1

前端的值总是有可能被篡改，你不可能仅仅依靠前端来保证安全。

最好的方法是在后端实施某种形式的身份验证和授权。这样，即使有些用户冒充管理员，当您向服务器发出下一个请求时，他们也会被阻止。

也许如果您可以发送有关您的问题的更多信息，我们可以想出更具体的解决方案。

Answer 2

TL;DR：每个请求都需要身份验证令牌，或者需要通过会话进行身份验证。

永远不要相信用户。一个潜在的大问题是，如果您将管理操作“隐藏”在管理员页面后面而不需要身份验证。

例如，假设后端服务器使用 REST API 来接受命令。在管理面板中，您可以获得管理操作的链接，例如“删除所有内容”按钮，该按钮server.net:8080/api/admin/everything无需任何身份验证即可发送删除请求。如果您是用户，您可以在代码中找到该内容，然后从任何地方向该地址发送 DELETE 请求，而不会产生任何影响（假设您没有通过 CORS 将 API 限制在网站上）。

我们永远不会向任何想要删除所有内容的人授予管理权限......因为我们永远不会不信任某人。正确的？

更糟糕的是，有人可能会找到服务器并模糊一些输入，然后哎呀！他们设法删除所有内容（或者更糟糕的是，获取数据库中存储的所有内容）。这并不难做到，特别是如果您用来进行身份验证的服务器与您用来发出命令的服务器是同一台服务器的话。历史已经证明“通过默默无闻实现安全”是一个非常糟糕的范例。每个操作都应该经过身份验证，即使这些操作看起来很难找到。

一般来说，提供JSON Web 令牌或某种其他形式的身份验证令牌并让用户在每个请求中发送该令牌至少是一个好的开始，尤其是在它有过期日期的情况下。该令牌将通过具有有效凭据的单独请求提供。

为每个请求发送令牌显然并不理想。还有其他一些事情可以尝试。对于使用 PHP 的服务器，您可能可以信任会话（尽管很多比我了解更多的人可能会不同意）。在更现代的情况下，您可以尝试使用Web Sockets，在连接后需要令牌。然后，只有在使用令牌进行身份验证后，您才允许用户发出管理请求。

这样，即使用户知道他们可以发送来执行任何操作的确切命令，服务器也不会在没有当前会话或令牌的情况下让他们执行。不幸的是，除非您已经在使用 Web Sockets 或依赖于会话，否则可能需要进行大量更改。但我认为这很关键。