I have a simple interface but I work with multiple APIs so I don't want to use a backend for it. How can I hide my API keys in CRA without using backend.
It is suggested to use environment variables for this and I have also used it as shown in the documentation but this is not exactly what I want. Even though I use environment variables , a simple CTRL + F search in the "chunk.js" files reveals things that should remain hidden, like my API keys. Is there a way to completely prevent this?
No, not really, and otherwise they could sniff them out with wireshark easily enough or other network monitoring tools.
The way to combat this is making your own api that connects with the other api's, that returns the required content. Then they need to obtain a license key for your api, that you can revoke from your server as valid if you wish to refuse access to a publicly traded license key to your api.
If you wanna use any API key in JS bundle like this it will be bundled, either you bundle it or you don't.
So you can: