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

Question

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?

I think it should be in the javascript file – Vigen Mar 13 '22 at 10:44 — Vigen, Mar 13 '22 at 10:44

score 0 · Answer 1 · answered Aug 19 '22 at 05:20

0

That DOM element with nnn is never rendered so you won’t find it there.

answered Aug 19 '22 at 05:20

user19799276

1

Also the compiled Javascript in prod uglifies the file so you won’t be able to find anything in there as well – user19799276 Aug 19 '22 at 05:22
The process of compiling JS wouldn't hide it. While bundlers do minify JS, they only affect variable names, whitespace, and other syntax items, but not string literals like the content of a JSX element. See https://www.cloudflare.com/learning/performance/why-minify-javascript-code/ for more details on minification. – Eric Pedley Aug 19 '22 at 05:37

Eric Pedley · Answer 2 · 2022-08-19T05:45:17.870

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.

score 0 · Answer 3 · answered Aug 19 '22 at 05:51

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.

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

3 Answers3