electron-react-boilerplate / electron-react-boilerplate

A Foundation for Scalable Cross-Platform Apps
https://electron-react-boilerplate.js.org/
MIT License
23.29k stars 3.87k forks source link

environment variable values are appeared directly in production code #3574

Open Thesiva7 opened 10 months ago

Thesiva7 commented 10 months ago

Hi, I am using below code to load the environmental variables in production

new Dotenv({ path: path.join(webpackPaths.rootPath, '.env'), safe: false, silent: false, defaults: false, })

but in production files that environmental values are appearing directly. like below image :

production

but in development it is like below image :

development

how to hide environmental values in production code.

@amilajack @jooohhn

sanneh2 commented 10 months ago

This is part of the clientside bundle and therefore cannot be hidden from the client. React is responsible for this behavior. The client ID is ok to be seen in the public. You have to keep the SECRET_KEY secret. This is usually used on the server side. In this case inside the "main.js" process it will be hidden.

// main.js
const GOOGLE_SECRET = process.env.GOOGLE_SECRET
Thesiva7 commented 10 months ago

This is part of the clientside bundle and therefore cannot be hidden from the client. React is responsible for this behavior. The client ID is ok to be seen in the public. You have to keep the SECRET_KEY secret. This is usually used on the server side. In this case inside the "main.js" process it will be hidden.

// main.js
const GOOGLE_SECRET = process.env.GOOGLE_SECRET

Hi @sanneh2 , But in main.js also env variables visibling directly. I don't know how to hide the env variables from .env file in production application.

Please look below images of production main.js, i have marked encryptedkey field which have value from .env file

mainJS

store

sanneh2 commented 10 months ago

This is a security question.

The best and most reliable thing is authentication and servers. So for example, if your users are logging in to your app, you could share secrets over a secure connection,

Unpackaging will always expose the entire code to the hacker. You can obfuscate it, encrypt it, or compile it with v8 bytecode which I heard works great.

But security with an external server will always be the safest bet, because you can move the secrets and confidential information to a remote location outside of your app.

jooohhn commented 9 months ago

Hey @Thesiva7

What @sanneh2 said on security is correct, you shouldn't keep secrets on the client. electron-store also advises that encryptionKey is not intended for security purposes, only obfuscation.

I'm not sure what your what your app's codebase looks like, but maybe Google's OAuth javascript or server docs might help