ReactJs 安全性

Question

我刚刚开始学习 React 中的授权和身份验证，我在使用 JWT 完成我的第一个简单登录系统后编写了这篇文章，因为大多数人都知道您在浏览器中存储了一个 token ，然后将其与保存的进行比较现在，当验证真正完成后，我将在后端设置 token Authenticated Boolean至true并访问该网站，完成这个简单的系统后，我检查了 react 开发工具，发现我可以更改 boolean至true并绕过所有的身份验证工作!

我已经在线搜索了资源和教程来解决这个大问题，但没有找到我正在寻找的所有内容，我发现的是如何设置身份验证或保护路由器，类似于我所做的方式，但没有深度安全.

那么有人可以推荐付费或免费的类(class)或教程来了解有关安全和身份验证的更多信息吗？

Answer 1

由于 React 应用程序是单页应用程序(如果您正在进行客户端渲染)，因此整个应用程序(所有 html/css/js 文件)将在初始请求中发送到客户端。通常，身份验证的工作方式与您指定的用户身份验证状态存储在应用程序状态中的位置相同。当然，这意味着熟悉 Web 应用程序的人可以将变量 isAuthenticated 设置为 true。如果您有静态保存的敏感信息(用 html/css/js 字面意思编写)，那么这将是一个问题。

这种情况通常不被视为问题的原因是 React 应用程序通常不保存任何数据。数据通常是应用程序中的敏感内容。数据可以与用户绑定(bind)，并且不应暴露给未经过正确身份验证或不具备所需权限的人员。数据由服务器保存，服务器可以控制通过 API 向应用程序发送的内容(检查经过验证的 JWT)。因此，您的服务器应该检查任何返回敏感信息的请求(通常是除应用本身和身份验证请求之外的所有请求)上的有效 JWT。

简而言之:是的，有人可以访问您应用程序的“经过身份验证”的一侧，但此时应用程序向 API 发送的任何数据请求都将(或应该)被视为未经授权而被阻止(即状态 401) 。因此，他们可以看到经过身份验证的用户的应用是什么样子，但无法看到任何敏感信息。

(注意:如果您确实静态存储敏感信息(如上所述)，请考虑将其存储在服务器上，并让应用通过 API 请求该信息并需要有效的身份验证 token )。

如果您想阻止未经身份验证的用户访问您的应用程序经过身份验证的部分，您可以将登录页面设为自己的应用程序或 HTML 文档，并且仅将应用程序的完整/经过身份验证的版本发送到经过身份验证的用户用户。