reactjs - 客户端可以修改React组件状态吗？

Question

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

组件状态值是否不会被客户端篡改？基本上，如果客户端可以将我的“已验证”状态值修改为“true”，他们就可以跳过登录并直接进入管理面板(我显然不希望这样做)。

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

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

Answer 1

TL;DR:每个请求都需要身份验证 token ，或者需要通过 session 进行身份验证。

<小时/>

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

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

We'd never give administrative privileges to anyone who would want to delete everything... Because we'll never untrust someone. Right?

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

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

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

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