I am using REACT 18.2, and I have a .env file that has REACT_APP_API_URL and REACT_APP_API_SECRET so I can use them during API Calls.

After I do npm run build and run the app, the variables are successfully used within the application using process.env.REACT_APP_API_URL in JS API Calls.

I tried to take out that process.env.REACT_APP_API_URL code and run in the browser console, but null came up. I also searched the source files and did not find the actual value of that .env variable either.

So I guess the question, is it now okay to store secret variables in the project's root .env file without a risk of it being available in the source files accessible by user. If it is still an issue, how would one find that information in the browser inspection?

Note: I have the following packages in my package.json, but do not import them or have config files set up.

"webpack": "^5.64.4", "webpack-dev-server": "^4.6.0", "webpack-manifest-plugin": "^4.0.2", "workbox-webpack-plugin": "^6.4.1", "dotenv": "^10.0.0", "dotenv-expand": "^5.1.0",

CodePudding user response：

If the application runs on the frontend, and the frontend requires the process.env.REACT_APP_API_URL in order to function, then there's no way to keep it secret. Anything that runs on the frontend can be easily accessible to any interested party who cares enough to open up the devtools and wade through your code. The only way to definitely keep something secret from the client is to never send it to them in the first place. For example, in some circumstances, you could keep it secret by having clients make a request to your backend instead, and make the request to the other API call your backend instead, then echo the response to the client.

If it is still an issue, how would one find that information in the browser inspection?

By opening up the browser devtools, going to Sources, and browsing through the various scripts.

CodePudding user response：

You can use a package like https://www.npmjs.com/package/env-cmd and when you build your environmental variable in with a little bit more security. Environment variables are used to externalize data by moving it from source code into a .env file. Webpack bundles it to the build output.

There is no significant security increase or risk decrease by storing secrets in environmental variables. Using this technique will only keep sensitive data out of plain sight, since client-side data cannot be adequately secured in the browser just so understand.

Regardless here are a few solutions that I hope help you out:

1. Use secure-env to encrypt your variables https://www.npmjs.com/package/secure-env
2. use code splitting and break up your keys and API's store them in variable and bring them together at the endpoint
3. You can take it a step further and encrypt you split up keys and then use code splitting.

Your ENV variable:

   import CryptoJS from "crypto-js";


const REACT_APP_API_URL = "https://your_end_point.com";

let key = "12345678901234567890123456789012";
key = CryptoJS.enc.Utf8.parse(key);

let iv = "1234567890123456";
iv = CryptoJS.enc.Utf8.parse(iv);

let encrypted = CryptoJS.AES.encrypt(REACT_APP_API_URL , key, { iv: iv });
export const encrypted = encrypted.toString();


import const encrypted
let decrypted = CryptoJS.AES.decrypt(encrypted, key, { iv: iv });
decrypted = decrypted.toString(CryptoJS.enc.Utf8);

// user you decrypted  variable in your code to be called...

console.log("Criptografia AES256 com Base64");
console.log('Texto: "meuteste"');
console.log(`Criptografado: ${encrypted}`);
console.log(`Descriptografado: ${decrypted}`);

At the end of the day it bottlenecks where ever it is being consumed at ther endpoint. There are other packages available to on npm that might be worth checking out just depends on how far you are willing to take it?

Also depending on where you are deploying your app typically places like Versel, Heroku let you add .env variables form the admin panel so you might check with your host to before going through all the trouble.