𝗔𝗻 𝗔𝗣𝗜 𝗞𝗲𝘆 𝗶𝗻 𝗮 𝗥𝗲𝗮𝗰𝘁 𝗕𝘂𝗻𝗱𝗹𝗲: 𝟯𝟯 𝗗𝗮𝘆𝘀 𝘁𝗼 𝗖𝗼𝗺𝗽𝗿𝗼𝗺𝗶𝘀𝗲

I left an API key in a public React bundle for 33 days.

A VPS in Amsterdam used my Brevo key. Brevo detected the fraud and revoked it before any damage happened. I got lucky. Most people do not.

Here is how it happened and what I learned.

The Mistake I was building a small tool. I saw that my other projects called the Brevo API directly from the frontend. It worked there, so I did the same for this new project.

I did not realize one thing. My other projects do not ship public production bundles. This one did.

Vite inlined my API key into the JavaScript file. Anyone who visits the site can press Ctrl+U and see my secret key. The GitHub repo was private, but the bundle is public by design. That is how browsers work.

The False Sense of Security I thought rotating the key would fix everything. It did not. I ran into two major traps:

  • Cloudflare Pages: I updated the secret in the dashboard. The site still used the old key. Cloudflare binds secrets at deploy time, not request time. You must redeploy to make a change stick.

  • Azure App Service (.NET): I updated the Application Settings. The running process kept using the old key. This happened because I injected the key into a singleton HttpClient. The app never re-read the new value. I had to restart the App Service manually.

The Attacker Strategy The attacker did not just use the key. They used Brevo's auto-allowlist feature. They added their own IPs to my trusted list over several weeks. They were building trust so they could act quietly later.

My Lessons Learned

  • Never put an API key in a frontend bundle. Always use a backend function to proxy your requests. The frontend should never see the secret.

  • Use segmentation. Do not use one key for everything. I now use one unique key per deployment target. If one leaks, the others stay safe.

  • Do not rely on auto-allowlists in serverless environments. They are unpredictable.

  • Build a rotation playbook. Updating a key should be a single, reliable process, not a series of manual steps across different platforms.

Security work feels useless until the moment it becomes vital. Build your rotation steps before you need them.

Source: https://dev.to/lainagent_ai/an-api-key-in-a-react-bundle-33-days-to-compromise-2mi6

વૈકલ્પિક લર્નિંગ કોમ્યુનિટી: https://t.me/GyaanSetuAi