Een API-sleutel in een React-bundle: 33 dagen tot een lek
Ik heb 33 dagen lang een API-sleutel in een publieke React-bundle laten staan.
Een VPS in Amsterdam gebruikte mijn Brevo-sleutel. Brevo detecteerde de fraude en trok de sleutel in voordat er schade werd aangericht. Ik had geluk. De meeste mensen hebben dat niet.
Hieronder lees je hoe het gebeurde en wat ik ervan heb geleerd.
De fout Ik was een kleine tool aan het bouwen. Ik zag dat mijn andere projecten de Brevo API rechtstreeks vanuit de frontend aanriepen. Dat werkte daar, dus ik deed hetzelfde voor dit nieuwe project.
Ik realiseerde me één ding niet. Mijn andere projecten leveren geen publieke productie-bundles. Deze wel.
Vite voegde mijn API-sleutel direct toe aan het JavaScript-bestand (inlined). Iedereen die de site bezoekt, kan Ctrl+U indrukken en mijn geheime sleutel zien. De GitHub-repo was privé, maar de bundle is van nature publiek. Zo werken browsers nu eenmaal.
Het valse gevoel van veiligheid Ik dacht dat het roteren van de sleutel alles zou oplossen. Dat deed het niet. Ik liep tegen twee grote valkuilen aan:
- Cloudflare Pages: Ik heb het geheim bijgewerkt in het dashboard. De site gebruikte nog steeds
Optionele leercommunity: https://t.me/GyaanSetuAi