Ensure the security of React variable import-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

Ensure the security of React variable import

P粉610028841 2023-09-16 15:11:12

717

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?

P粉610028841

reply all(1)

P粉8521147522023-09-17 12:32:39 1 floor

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.)