What If Your API key is Stolen -

4 September 2026

Building a project is as important as keeping in mind what to do and what not to do.

There are certain files that must be kept private, as they contain user credentials and other sensitive information.

If that information gets leaked, it can lead to user impersonation, financial losses etc.

Recently, in March attackers stole a single API key belonging to METR and used $600k worth AI of inference credits. Just a recent example, but overall losses from stolen API keys adds up to millions of dollars.

Even if it's a small scale project, if API key is accessible through the code, the application is always at risk.

I made the same mistake some days back. I was building a project which had a part where if a user connects his wallet, he gets his transaction history as the output.

For fetching a user's transaction history from his address, I needed Indexing. So, I used Etherscan for this and my code had a variable assigned to Etherscan API.

And that stored API was a part of my frontend code, I dumbed down the API keys at config.js file and the main indexing code in transaction.js.

let etherscanAPIkey = 'your_Etherscan_API'
let etherscanBaseUrl = 'https://api.etherscan.io/api';

let etherscanAPIkey = 'your_Etherscan_API'
let etherscanBaseUrl = 'https://api.etherscan.io/api';

Now, this Etherscan API key, is right there in plain JS and ships directly to the frontend. Anyone who opens dev tools or views the github repo can easily copy it and use it.

Now, the important question is how to store the API keys so that they should remain hidden and can be used by our main project. We saw this before while storing Alchemy API URL, but that was stored in an env file as we were building the server.

But, we are building a browser/frontend. Even if we store API in an .env file, frontend build tools can substitute those environmental variable like this process.env.your_Etherscan_API . So, the API key would still be exposed at the time it is shipped.

The right approach is the "API key should not reach the browser", but how is that possible?

It is possible when we build a backend, which connects both Etherscan and the frontend. And the code should run on the server, not on the browser.

The browser can only see the URL, but not the Etherscan API key. Here the backend is the middleware between the frontend and Etherscan.

Your Node.js server has -

ETHERSCAN_API_KEY = ABC123

ETHERSCAN_API_KEY = ABC123

And in the next file -

app.get("/api/transactions", async (req, res) => {
  const { address } = req.query;

const etherscanUrl =
    `https://api.etherscan.io/v2/api` +
    `?chainid=1` +
    `&module=account` +
    `&action=txlist` +
    `&address=${address}` +
    `&apikey=${process.env.ETHERSCAN_API_KEY}`;
  const response = await fetch(etherscanUrl);
  const data = await response.json();
  res.json(data);
});

app.get("/api/transactions", async (req, res) => {
  const { address } = req.query;

const etherscanUrl =
    `https://api.etherscan.io/v2/api` +
    `?chainid=1` +
    `&module=account` +
    `&action=txlist` +
    `&address=${address}` +
    `&apikey=${process.env.ETHERSCAN_API_KEY}`;
  const response = await fetch(etherscanUrl);
  const data = await response.json();
  res.json(data);
});

Your .gitignore should contain the .env file.

And on your hosting provider, you can add the environment variables. The .env ,.gitignore file should not be comitted.

After this, if someone has your frontend code, devTools access, downloaded JS, etc, they can understand how your application works and can use it, but can never access the API keys.