'Where is information stored on the client that React hides with conditional rendering?

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?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Where is information stored on the client that React hides with conditional rendering?

Sources

Related Questions