0

I am a bit of confused about env variables in the production build. Simply i have a .env file which contains some variables like

REACT_APP_ALG=A128CBC-HS256
REACT_APP_K=RvIm6UTHG0wqXWLvkSmRqQhS97NvW_IwYw0CKYhEF_0

and accessing then in code like

        "alg": process.env.REACT_APP_ALG,
        "k": process.env.REACT_APP_K

But when I build my project then in bundle files i found some like

                    alg: "A128CBC-HS256",
                    k: "RvIm6UTHG0wqXWLvkSmRqQhS97NvW_IwYw0CKYhEF_0"

which is a security issue for me. Is there any way to hide them I'm well aware about that it's not a bug it's just I could not find any suitable solutions

ANIK ISLAM SHOJIB
  • 3,002
  • 1
  • 27
  • 36
  • You shouldn't use then the process variables directly: https://stackoverflow.com/questions/46838015/using-api-keys-in-a-react-app/46839021#46839021 – Maciej Trojniarz Aug 05 '19 at 10:47
  • Possible duplicate of [Using API keys in a react app](https://stackoverflow.com/questions/46838015/using-api-keys-in-a-react-app) – Maciej Trojniarz Aug 05 '19 at 10:49

1 Answers1

1

You have several choices:

1 - Obfuscate/encode your data (but decryption will still be in your code...)

2 - Once logged, retrieve the data you need from the backend, before bootstrapping the application.

Mosè Raguzzini
  • 15,399
  • 1
  • 31
  • 43
  • I have no other options cause I'm encrypting my payload so encryption key must be in the front end right ?? Just need a solution to make them unreadable – ANIK ISLAM SHOJIB Aug 05 '19 at 11:38
  • 1
    If browser can read it and send it, everyone can. First auth call should not be encrypted, then, retrieving encryption data upon auth, then you are secure – Mosè Raguzzini Aug 05 '19 at 12:33