L'architecture proxy backend et le masquage des secrets
Le cas concret : le widget météo généré par l'IA
Imaginez la scène lors d'une session de vibe coding : vous demandez à votre agent IA (Cursor, Windsurf, Claude) :
« Ajoute un widget météo en haut à droite de mon tableau de bord avec l'API OpenWeather. »
En cinq secondes, l'IA génère un composant React complet. Vous lancez l'application : la température s'affiche, les icônes de soleil s'animent. Tout fonctionne parfaitement.
Où se trouve le piège mortel ?
Pour aller vite, l'IA a écrit la requête fetch('https://api.openweathermap.org/...&appid=VOTRE_CLE') directement à l'intérieur du fichier du composant client. Ce fichier est envoyé à chaque visiteur de votre site. N'importe qui effectuant un clic droit > Inspecter > onglet Réseau (Network) voit votre clé secrète défiler en toutes lettres lors de chaque rafraîchissement de page.
Votre clé est désormais publique : des scripts automatisés peuvent s'en emparer et épuiser votre forfait payant en quelques minutes.
Comprendre le proxy : Où, Pourquoi, Comment ?
1. Rappel de la frontière physique (Client vs Serveur)
- Côté client (Le navigateur) : C'est la machine de votre visiteur. Tout ce qui y transite (code JavaScript, requêtes réseau) est public et inspectable. Un secret ne doit jamais y résider.
- Côté serveur (Vercel, Node.js, votre hébergeur) : C'est un environnement privé et hermétique. L'internaute n'y a aucun accès direct. C'est l'unique sanctuaire pour lire vos variables d'environnement
.env.
2. Le proxy en action : le facteur de confiance
Comme nous l'avons défini dans le glossaire du Chapitre 1, le proxy agit comme un mandataire étanche qui évite tout contact direct entre le client et l'API tierce :
- Votre composant météo demande simplement à votre propre serveur : « Peux-tu me donner la météo de Paris ? » (zéro secret dans cet échange).
- Votre serveur prend le relais, lit la variable
OPENWEATHER_API_KEYdans son fichier.envprivé, interroge l'API OpenWeather, et ne retourne au navigateur que la donnée utile :19°C.
Bénéfice immédiat : La clé d'API ne transite jamais sur le réseau public et n'apparaît dans aucun bundle JavaScript.
Contenu premium
Abonnez-vous ou achetez la formation pour accéder à l'intégralité du contenu.
- Accès illimité à 1700 formations
Je m'abonne
Les pièges de l'IA et la sécurité des clés
Cacher ses clés avec un proxy backend
Cadrer son éditeur et auditer son code
Je m'abonne
