Ensure the security of React variable import

Question

Will it cause security issues if I import an object in a React file to use some of its values?

For example, if I have an object like this:

var data = {
     'name': 'Adam',
     'id': 12345,
     'secret': 98765
}

and I import it like this:

import { data } from 'db.js';
 
function Index(){
     return(
          <>
             {data.name}
             {data.id}
          </>
     );
}

Would I create a scenario where someone could call and view the "secret" value using the imported "data" object, or would React prevent this from happening?

Answer 1

You should treat any code you send to the client machine as public. Any developer who is dedicated enough can eventually reverse engineer (although the size and minification/obfuscation of the code may increase the difficulty).

The only way to keep the secret secret is to not send it to the client in the first place - this can be achieved by doing all the rendering work on the server and then sending the resulting HTML markup to the client. (That being said, due to the greater flexibility of client-side rendered components, it's often best practice to not include sensitive values ​​in the client's bundle.)