ReactJs 安全性答案

【问题标题】：ReactJs securityReactJs 安全性
【发布时间】：2023-03-12 06:46:01
【问题描述】：

我刚刚开始学习 React 中的授权和身份验证，我是在使用 JWT 完成我的第一个简单登录系统后写这篇文章的，因为大多数人都知道你在浏览器中存储了一个令牌，然后你将它与保存的比较现在，当验证真正完成时，您后端中的令牌我将Authenticated Boolean 设置为true 并获得对网站的访问权限，在完成那个简单的系统后，我检查了反应开发工具，我发现我可以更改boolean到true 并绕过所有的身份验证工作！

我已经在网上搜索了资源和教程来解决这个巨大的问题，但没有找到我要寻找的东西，我发现的只是如何设置身份验证或保护路由器，就像我所做的那样，但没有得到深度保护.

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

【问题讨论】：

这就是为什么您需要检查服务器上的所有内容。
@SLaks 你的意思是每次用户进入一个页面时我必须向服务器发送检查请求？这不会给服务器带来额外的负担吗？此外，如果有很多页面，将检查方法添加到所有这些页面会很耗时
一般我认为网页分为两部分：数据和展示。演示文稿（通常是您的 react/html/css 代码）不容易得到保护（通常也不需要），但数据可以而且应该得到保护。保护数据就像只发送您希望用户有权访问的数据一样简单，仅此而已。这是在服务器端完成的。 您应该假设您通过互联网发送的任何内容都可以被用户阅读，即使您没有将其显示在网页上。
@SimpleWebDesigner 您必须在每个请求中将 JWT 令牌发送到您的后端（即在访问/创建/更新/删除数据时）。然后，如果用户未通过身份验证，他将看到应用程序，但看不到任何数据，也无法对您的数据库执行任何操作。

标签： reactjs security web

【解决方案1】：

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

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

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

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

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

【讨论】：

对此也很陌生，但使用中间件实现Express 不能解决这个问题吗？我一直在研究这个主题，并且发现将令牌存储为 cookie 很容易受到攻击，reference。关于概述测试解决方案的教程或帖子有什么建议吗？
@Gʀɪᴍ 是的，服务器应该有一些中间件，可以根据附加的 JWT 验证（或拒绝）请求。我通常将 JWT 存储在 localStorage 中，这对于CSRF 攻击更安全，但更容易受到XSS 攻击，这意味着您需要格外小心以防止 XSS 攻击。然后，当应用发出 API 请求时，它可以将 JWT 放在“授权”标头中（而 cookie 会自动附加到请求中）。