React 通过条件渲染隐藏在客户端的信息存储在哪里？答案

【问题标题】：Where is information stored on the client that React hides with conditional rendering?React 通过条件渲染隐藏在客户端的信息存储在哪里？
【发布时间】：2022-08-19 13:20:32
【问题描述】：

我正在尝试确定在 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 中实际包含哪些数据时，这些数据也不存在：

未登录的黑客必须做什么才能找到文本“nnn”？该文本在被条件渲染隐藏时保存在客户端的什么位置？

我认为它应该在javascript文件中

标签： reactjs security conditional-rendering

【解决方案1】：

带有 nnn 的 DOM 元素永远不会被渲染，所以你不会在那里找到它。

【讨论】：

此外，在 prod 中编译的 Javascript 会使文件变得丑陋，因此您也无法在其中找到任何内容