React 通过条件渲染隐藏的信息存储在客户端的哪里？
我正在尝试确定在 React 中使用条件渲染隐藏信息的安全性。
在下面的 React 代码中，如果用户未登录，我会隐藏信息“nnn”。
import './App.scss';
const loggedIn = false;
function App() {
return (
<div className="App">
<h1>Website</h1>
<hr />
{loggedIn && (
<div>nnn</div>
)}
<hr />
</div>
);
}
export default App;
当我查看浏览器最初收到的 HTML（使用 CTRL-U）时，数据当然不存在：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>website</title>
<script defer src="/static/js/bundle.js"></script></head>
<body>
<div id="root"></div>
</body>
</html>
但即使我检查页面以查看当前 DOM 中实际包含哪些数据，但数据也不存在：
<图像src="https://i.sstatic.net/Tu7bo.png" alt="在此处输入图像描述">
未登录的黑客必须做什么才能找到文本“nnn “？当条件渲染隐藏该文本时，该文本保存在客户端的什么位置？
I'm trying to determine how secure it is to hide information with conditional rendering in React.
In the following React code, I hide the information "nnn" if the user is not logged in.
import './App.scss';
const loggedIn = false;
function App() {
return (
<div className="App">
<h1>Website</h1>
<hr />
{loggedIn && (
<div>nnn</div>
)}
<hr />
</div>
);
}
export default App;
When I look at the HTML (with CTRL-U) which the browser originally received, of course the data is not there:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>website</title>
<script defer src="/static/js/bundle.js"></script></head>
<body>
<div id="root"></div>
</body>
</html>
But even when I inspect the page to see what data is actually contained in the current DOM, the data is also not present:
What would a not-logged-in hacker have to do in order to find the text "nnn"? Where is this text being saved on the client while it is being hidden by conditional rendering?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
带有 nnn 的 DOM 元素永远不会被渲染，所以你在那里找不到它。
That DOM element with nnn is never rendered so you won’t find it there.
假设您没有使用框架来服务器端渲染代码，他们需要查看浏览器开发工具中的源选项卡。这是查看我现在正在处理的 React 项目源代码的示例（我在这里展示它并不重要，因为它无论如何都是开源的）： sstatic.net/ZITCd.png" rel="nofollow noreferrer">
IMO 最简单隐藏数据的方法是使用像 Next.js 这样的框架在服务器端渲染页面，这样浏览器客户端只接收渲染的页面而不是源。
使用客户端渲染时隐藏它的另一种方法是在用户登录后从服务器获取它并使用某种安全令牌生成系统来确保没有人可以在没有任何身份验证信息的情况下手动向服务器发出请求。与我合作过的所有开发人员都使用像 Auth0 这样的库来做这些事情，因为自己以真正安全的方式实现它非常复杂。
Assuming you aren't using a framework to server-side-render your code, they would need to look at the sources tab in your browser dev tools. Here is an example of viewing the source for a React project I'm working on right now (doesn't matter that I'm showing it here since it's open-source anyways):
IMO the easiest way to hide the data would be to use a framework like Next.js to server-side render your pages so the browser client only receives the rendered page instead of the source.
Another to hide it while using client-side rendering would be to fetch it from a server once the user is logged in and use some sort of secure token generation system to make sure nobody can just make the request to your server manually without any authentication info. All developers I've worked with use libraries like Auth0 for this stuff since it's pretty complicated to implement this in a truly secure way on your own.
在与“loggedIn”相同的条件下，“nnn”将存在于 javascript 文件中，并且一旦为真，就会将其呈现给 dom。查看编译后的 javascript 文件，您会发现其中有数据“nnn”。隐藏仅在登录后才能访问的数据的最佳方法是，如果“loggedIn”为 true，则从服务器获取数据。
That "nnn" will exist in javascript file under the same condition of "loggedIn" and will render it to dom once it is true. Looking into the compiled javascript file you will find the data "nnn" there. the best way to hide the data that is to be accessed only after loggined, is to fetch it from server if "loggedIn" is true.