Un SaaS consomme des APIs sans utilisateurs pour trois raisons : une route backend publique exploitée par des bots, une boucle de rendu React (useEffect) infinie côté client, ou l'absence de Rate Limiting. Les applications générées par IA (Cursor, Bolt) omettent systématiquement ces protections par défaut.
Vous lancez fièrement un micro-SaaS d'IA construit en une semaine grâce au "vibe coding". Et le lendemain matin, vous vous réveillez avec une facture OpenAI de 850€. Voici comment c'est techniquement possible.
Le danger des APIs facturées à l'usage
Les LLMs facturent au token, et non au forfait. L'absence totale de barrière de protection transforme une application en "open bar" pour les attaquants ou les web scrapers.
Raison 1 : Routes d'API publiques non protégées
Dans Next.js, si vous créez une route d'API /api/generate qui appelle GPT-4 et que vous ne vérifiez pas l'authentification côté backend, l'URL est publique. N'importe qui peut l'utiliser, même sans avoir de compte sur votre site.
La menace des web scrapers
Des bots automatisés parcourent internet en permanence à la recherche de terminaux (endpoints) d'API non sécurisés. S'ils détectent que votre URL monsite.com/api/generate leur répond avec de l'IA, ils l'exploiteront pour traiter leurs propres données... à vos frais.
La Solution : Toujours exiger et valider un jeton d'authentification valide (session, cookie sécurisé) directement dans vos Route Handlers ou Server Actions avant d'exécuter l'appel payant. Il est aussi impératif de s'assurer de ne pas commettre l'erreur inverse : exposer vos clés API directement dans le code Next.js.
Raison 2 : Les boucles infinies de useEffect (L'erreur Vibe Coding)
C'est le grand classique du code généré par l'IA. Un LLM a tendance à générer un hook React useEffect mal paramétré qui s'auto-déclenche indéfiniment.
// ❌ DANGER CRITIQUE : Boucle infinie React
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/generate-ai-content')
.then(res => res.json())
.then(result => setData(result)); // Le changement de state déclenche un re-render
}, [data]); // 👈 La dépendance inclut "data" : le re-render relance le fetch !
Si ce composant se charge dans votre navigateur, il va appeler votre backend en boucle fermée, potentiellement des dizaines de fois par seconde. OpenAI ou Anthropic vous facturera pour chaque appel avant même que vous ne réalisiez que l'onglet de votre navigateur a planté.
"Un mauvais tableau de dépendances dans React ne ralentit pas seulement votre site : s'il est couplé à une API payante, il ruine votre entreprise en quelques heures."
Raison 3 : L'absence de Rate Limiting (Limitation de débit)
Même si votre route est protégée par une authentification stricte, un utilisateur légitime (malveillant ou juste maladroit) pourrait cliquer frénétiquement sur un bouton "Générer", déclenchant l'action coûteuse 50 fois de suite.
La Solution : Implémentez un Rate Limiter (par exemple via Upstash Redis ou Vercel KV). Bloquez les requêtes à "5 requêtes par utilisateur par minute" pour lisser vos coûts et décourager les abus.
Foire aux questions (FAQ)
Est-ce que je peux plafonner les dépenses directement chez OpenAI ?
Comment détecter les appels abusifs en temps réel ?
Sécuriser son budget : Express vs Audit Complet
Les fuites financières liées aux APIs externes sont la deuxième cause de mortalité des petits projets générés par IA.
L'Analyse Express de GVO peut vérifier publiquement si vos routes d'API front-end exposent des clés, mais ne peut pas lire votre code source. Pour détecter les boucles React infinies liées à des appels fetch ou l'absence de middlewares sur vos routes privées, seul l'Audit Complet (qui analyse le code de votre repository) peut sécuriser vos finances. Faites auditer votre code avant de retirer vos limites budgétaires.