CODEWITHSUNDEEP
reactjsapisecurityenvironment-variables
Blargian
Blargian

Reputation: 350

Is API key exposed through get request?

I am building a Node/React app in which I have placed my API keys in a .env file which is in my .gitignore. The frontend makes a get request to the API endpoint using Axios and the UseEffect hook with the API key provided via process.env. I understand why it is good practice to obscure the API key and not commit that information to git however my question is whether something still needs to be done (or can be done) about the API key getting exposed through inspection of the requests in chrome developer tools?

//on component mount fetch the images
    useEffect(async ()=>{
        const results = await axios(
            `https://pixabay.com/api/?key=${process.env.PIXA_API_KEY}`
        );
    },[])

For instance below if a user were to use chrome tools in the browser on my project they can still see my API key as part of the request. In my case it's not much of a concern as this particular API is free and the project is for personal use only, but I wondered how this problem is approached in a commercial project where a payed for API might be in use? What's to stop me using chrome dev tools on another persons app and stealing their API key to make my own requests?

Chrome inspect

Upvotes: 3

Views: 5357

Answers (1)

Jakub Judas
Jakub Judas

Reputation: 787

That is a very good observation. The truth is that you cannot have any secrets in your client code. No amount of obscuring, obfuscation or even encryption will prevent attackers from stealing your secrets. The client code is out there for anyone to read and needs to be approached as such.

If private APIs with keys you do not want to expose are involved, you need to call them from a server. So the flow would look something like this:

enter image description here

Upvotes: 5

Related Questions