ReactJs安全

Question

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

我在网上搜索了一些资源和教程来解决这个巨大的问题，但没有找到我所找到的只是如何设置身份验证或保护路由器的方法，就像我所做的那样，但没有得到很好的保护。

因此，是否有人推荐付费的课程或教程，或免费学习更多关于安全性和认证的知识？

Answer 1

由于React应用程序是单页应用程序(如果您正在进行客户端呈现)，整个应用程序(所有html/css/js文件)都会在初始请求中发送给客户端。通常，身份验证的工作方式是您已经说明用户的身份验证状态存储在应用程序状态的位置。当然，这意味着熟悉web应用程序的人可以将变量isAuthenticated设置为true。如果您有静态保存的敏感信息(用html/css/js逐字书写)，那么这将是一个问题。

这种情况之所以不被普遍视为一个问题，是因为React应用程序通常不保存任何数据。而数据通常是应用程序中敏感的部分。数据可以绑定到用户，不应该公开给那些没有经过正确身份验证或没有所需权限的用户。数据由服务器保存，服务器可以控制它通过API向应用程序发送的内容(检查验证的JWT)。因此，您的服务器应该在任何返回敏感信息的请求上检查有效的JWT --通常情况下，除了对应用程序本身的请求和身份验证请求之外，所有请求都是这样。

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

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

如果您想阻止未经身份验证的用户访问应用程序的认证端的可能性，您可以将登录页面作为自己的应用程序或HTML文档，并且只向经过身份验证的用户发送该应用程序的完整/认证版本。