ReactJs 安全性

Question

I have just started learning authorization and authentication in react, and I'm writing this after finishing my first simple login system using JWT, as most of you know you store a token in the browser and then you compare it with the saved tokens in your backend now when that validation is done truly I set Authenticated Boolean to true and gain access to the website, after finishing that simple system I checked react dev tools and I found out that I can just change the boolean to true and bypass all of the authentication work!

And I have searched online for resources and tutorials to fix that massive problem but didn't find what was I looking for all I found is how to setup Authentication or protect a router similar to the way I did, but not deeply secured.

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

Answer 1

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

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

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

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

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