ReactJs安全

Question

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

我在网上搜索了一些资源和教程来解决这个巨大的问题，但没有找到我想要的是什么。我找到的只是如何像我那样设置身份验证或保护路由器，但安全性不高。

那么，有人能推荐一个付费或免费的课程或教程来学习更多关于安全性和身份验证的知识吗？




Answer 1

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

这种情况通常不被视为问题的原因是React应用程序通常不保存任何数据。数据通常是应用程序中的敏感内容。数据可以绑定到用户，不应向未经正确身份验证或没有所需权限的用户公开。数据由服务器保存，服务器可以控制它通过API向应用程序发送的内容（检查已验证的JWT）。因此，您的服务器应该在任何返回敏感信息的请求上检查有效的JWT，通常是除应用程序本身和身份验证请求之外的所有请求。

简而言之：是的，有人可以访问您应用程序的“已验证”端，但此时应用程序对API的任何数据请求都会（或应该）被阻止为未经授权（即状态401）。因此，他们可以看到应用程序在经过身份验证的用户看来是什么样子，但无法看到任何敏感信息。

（注意：如果您静态存储敏感信息（如上所述），请考虑将其存储在服务器上，并让应用程序通过API请求该信息，并要求有效的身份验证令牌）。

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