Session 4 — Chaos Scripting complet & Renommage domaines¶
Durée : ~4 heures (réparties sur 2 conversations Claude)
Objectif initial : Résoudre l'enregistrement VuGen sur la SPA React multi-domaines
Objectif final : Chaos Scripting 3 niveaux implémenté + domaines renommés + Grafana corrigé
🎯 Réalisations¶
1. Chaos Scripting — implémentation complète 3 niveaux¶
Temps : ~2h
Difficulté : ⭐⭐⭐⭐
Système de tokens progressifs sur le parcours POST /api/auth/login → POST /api/cart/add → POST /api/orders.
Architecture¶
ChaosScriptingService.java— logique centrale (génération, validation, expiration tokens)ChaosScriptingController.java— endpointGET /api/chaos/config- Interceptor dans
AuthController,CartController,OrderController
Niveaux¶
| Niveau | Nom | Headers requis | Expiration | Particularités |
|---|---|---|---|---|
| 0 | Désactivé | — | — | Pass-through total |
| 1 | Junior | X-Session-Token + X-Request-ID |
Aucune | Tokens persistants |
| 2 | Confirmé | + X-Action-Token |
30 secondes | Expiration stricte |
| 3 | Expert | + X-CSRF-Token + X-Step-Token + X-Signature |
15 secondes | HMAC-SHA256, rotation après chaque appel |
| #### Niveau Expert — détails techniques | ||||
- Signature HMAC-SHA256 : sessionToken:csrfToken:stepToken |
||||
- Clé : perfshop-chaos-expert-secret-2025 |
||||
- Codes erreur spécifiques : E-CSRF-01, E-STEP-04, E-SIG-07, E-TKN-99 |
||||
| - Rotation obligatoire des tokens à chaque requête réussie | ||||
| Difficulté : ⭐⭐⭐⭐ — Gestion des états entre requêtes, timing d'expiration, HMAC côté client VuGen | ||||
| ### 2. Renommage des domaines de production | ||||
| Temps : ~30 min | ||||
| Difficulté : ⭐ | ||||
Renommage pour uniformiser la convention perfshop-* : |
||||
| Avant | Après | |||
| ------- | ------- | |||
perfshop-front.perfshop.io |
perfshop.perfshop.io |
|||
grafana.perfshop.io |
perfshop-grafana.perfshop.io |
|||
Fichier modifié : .env.production |
||||
| ### 3. Résolution enregistrement VuGen — SPA React multi-domaines | ||||
| Temps : ~1h | ||||
| Difficulté : ⭐⭐⭐⭐ | ||||
| #### Problème 1 — Script vide (aucun appel API capturé) | ||||
Cause : React SPA fait des fetch() cross-domain. VuGen en mode Proxy intercepte uniquement le Target Server. Les requêtes vers perfshop-api.perfshop.io partent en direct sans être capturées. |
||||
| Solution : VuGen → Recording Options → Port Mapping : | ||||
| Source Host | Source Port | Protocol | Destination Host | Destination Port |
| ------------- | ------------- | ---------- | ----------------- | ----------------- |
| perfshop.perfshop.io | 443 | HTTPS | perfshop.perfshop.io | 443 |
| perfshop-api.perfshop.io | 443 | HTTPS | perfshop-api.perfshop.io | 443 |
| #### Problème 2 — Script vide après enregistrement (certificat SSL) | ||||
| Cause : VuGen intercepte le trafic HTTPS mais ne peut pas le déchiffrer — son certificat racine n'est pas reconnu par Chrome → capture les connexions TLS mais pas le contenu en clair. | ||||
| Solution : Installer le certificat racine VuGen dans Windows : | ||||
- Win+R → certmgr.msc → Autorités de certification racines de confiance → Certificats |
||||
| - Si absent : VuGen → Tools → Install Root Certificate | ||||
| - VuGen → Recording Options → HTTPS/SSL → activer "Import CA certificate to browser" | ||||
| Difficulté : ⭐⭐⭐⭐ — Problème silencieux, le script se génère mais reste vide | ||||
### 4. Correction Grafana 403 — domaine GF_SERVER_ROOT_URL |
||||
| Temps : ~15 min | ||||
| Difficulté : ⭐⭐ | ||||
| Symptôme : Toutes les requêtes Grafana → Prometheus retournaient 403 en production. En local Docker Desktop, tout fonctionnait. | ||||
Cause : GF_SERVER_ROOT_URL (dérivé de PUBLIC_GRAFANA_URL) pointait encore vers https://grafana.perfshop.io après le renommage. Grafana utilise cette valeur pour valider les cookies de session — si le domaine ne correspond pas à l'URL d'accès, toutes les requêtes authentifiées sont rejetées. |
||||
| Fix : | ||||
| --- | ||||
| ## 🎢 Chronologie Détaillée | ||||
| ### Phase 1 (2h) : Chaos Scripting 🟢 | ||||
| - Architecture des 4 niveaux définie | ||||
- Implémentation ChaosScriptingService.java |
||||
| - Intégration dans les 3 controllers (Auth, Cart, Order) | ||||
| - Tests API Postman des 4 niveaux | ||||
| - Ressenti : 🟢 Conception claire, implémentation méthodique | ||||
| ### Phase 2 (30 min) : Renommage domaines 🟢 | ||||
| - Identification des fichiers impactés | ||||
- Mise à jour .env.production |
||||
| - Ressenti : 🟢 Rapide, changement ciblé | ||||
| ### Phase 3 (1h) : Debug VuGen 🟡 | ||||
| - Diagnostic script vide → Port Mapping manquant | ||||
| - Configuration Port Mapping pour les 2 domaines | ||||
| - Découverte problème SSL → certificat VuGen non installé | ||||
| - Ressenti : 🟡 Problèmes non évidents, diagnostic progressif | ||||
| ### Phase 4 (15 min) : Fix Grafana 403 🟢 | ||||
| - Corrélation rapide : renommage domaine → GF_SERVER_ROOT_URL obsolète | ||||
- Fix .env.production + docker compose up -d --force-recreate grafana |
||||
| - Ressenti : 🟢 Diagnostic immédiat une fois le lien établi | ||||
| --- | ||||
| ## 🧠 Moments Clés d'Apprentissage | ||||
| ### 1. VuGen Proxy ne capture pas le trafic cross-domain par défaut | ||||
Une SPA React qui appelle une API sur un sous-domaine différent (perfshop-api.*) bypass le proxy VuGen. |
||||
| Solution : Port Mapping explicite pour chaque domaine à intercepter. | ||||
| ### 2. Script VuGen vide = problème SSL, pas d'absence de trafic | ||||
Si le script se génère mais est vide (juste Action(){ return 0; }), c'est que VuGen capture les connexions TLS mais ne peut pas les déchiffrer. |
||||
| Solution : Installer le certificat racine VuGen dans le magasin Windows. | ||||
| ### 3. GF_SERVER_ROOT_URL = domaine de validation des cookies Grafana | ||||
Grafana refuse toutes les requêtes authentifiées si GF_SERVER_ROOT_URL ne correspond pas au domaine d'accès réel. |
||||
Symptôme trompeur : Fonctionne en local (pas de GF_SERVER_ROOT_URL custom) mais casse en production après un renommage de domaine. |
||||
| ### 4. HMAC côté client VuGen : calcul à implémenter en C | ||||
| Le niveau Expert nécessite de recalculer la signature HMAC-SHA256 dans le script VuGen. Cela implique d'utiliser les librairies OpenSSL disponibles dans LR/VuGen. | ||||
| --- | ||||
| ## 📊 Métriques de la Session | ||||
| Métrique | Valeur | |||
| ---------- | -------- | |||
| Durée totale | ~4 heures | |||
| Conversations Claude | 2 | |||
| Fichiers Java créés | 4 (ChaosScriptingService, ChaosScriptingController + modifs 3 controllers) | |||
| Niveaux Chaos implémentés | 4 (0, 1, 2, 3) | |||
| Domaines renommés | 2 | |||
| Bugs résolus | 2 (VuGen script vide × 2 causes, Grafana 403) | |||
| Lignes de code | ~400 (Java) | |||
| --- | ||||
| ## 🎯 Difficultés Rencontrées | ||||
| ### 🟡 Difficile (⭐⭐⭐⭐) | ||||
| Problème : VuGen script vide — double cause (Port Mapping + SSL) | ||||
| Temps perdu : ~45 min | ||||
| Solution : Port Mapping multi-domaines + installation certificat VuGen | ||||
| Leçon : Un script VuGen vide peut avoir deux causes distinctes — tester dans l'ordre : capture trafic → déchiffrement SSL | ||||
| ### 🟡 Difficile (⭐⭐⭐⭐) | ||||
| Problème : Grafana 403 après renommage domaine | ||||
| Temps perdu : ~10 min | ||||
Solution : PUBLIC_GRAFANA_URL mis à jour + --force-recreate grafana |
||||
Leçon : Après tout renommage de domaine, vérifier GF_SERVER_ROOT_URL dans la config Grafana |
||||
| --- | ||||
| ## ✅ Ce Qui a Bien Fonctionné | ||||
| ### Architecture Chaos Scripting pensée pour la pédagogie | ||||
Niveaux progressifs avec des codes d'erreur explicites (E-CSRF-01, E-SIG-07...) — le stagiaire comprend immédiatement pourquoi sa requête est rejetée. |
||||
| ### Diagnostic VuGen méthodique | ||||
| Progression logique : "le frontend charge ?" → "VuGen voit-il les requêtes ?" → "le contenu est-il déchiffré ?" — chaque étape isole une couche du problème. | ||||
| ### Fix Grafana ciblé | ||||
--force-recreate sur Grafana uniquement — pas besoin de redémarrer toute la stack. |
||||
| --- |
🎓 Conclusion¶
Cette session de ~4 heures en vibe coding a permis de :
✅ Concevoir et implémenter le Chaos Scripting complet — 4 niveaux progressifs, tokens HMAC, codes d'erreur pédagogiques ✅ Résoudre le double problème VuGen (Port Mapping multi-domaines + certificat SSL) — deux causes indépendantes, un seul symptôme ✅ Corriger le Grafana 403 en production — effet de bord silencieux d'un simple renommage de domaine ✅ Poser les bases du scripting VuGen pour les sessions suivantes
Ratio temps productif / temps total : ~80% Objectifs atteints : 100% (+ bonus : fix Grafana et diagnostic VuGen documentés pour la postérité)
Le vibe coding a particulièrement brillé sur la conception du Chaos Scripting : partir d'une intention pédagogique claire ("le stagiaire doit comprendre pourquoi ça échoue") et laisser émerger l'architecture des 4 niveaux naturellement. Le niveau Expert avec HMAC-SHA256 est sorti d'un seul bloc, cohérent du premier coup.
Le moment le plus instructif reste le double diagnostic VuGen : même symptôme (script vide), deux causes techniques totalement différentes à des couches réseau différentes. Un rappel que débugger c'est d'abord choisir le bon niveau d'abstraction avant de chercher la solution.
Leçon transverse des 4 sessions : les erreurs les plus coûteuses ne viennent jamais du code métier — elles viennent des hypothèses implicites sur l'environnement (JIT Java, busybox, CORS multi-beans, domaines dans les cookies). La règle d'or : toujours vérifier l'environnement avant de blâmer la logique.
🤖 Erreurs imputables à Claude AI — Session 4¶
❌ Erreur S4-1 — VuGen Port Mapping non configuré pour les domaines cross-origin¶
Ce que j'ai proposé : Démarrer l'enregistrement VuGen en mode Proxy sans configurer le Port Mapping pour les domaines additionnels.
Ce qui s'est passé : Script vide généré. React SPA fait des fetch() cross-domain vers perfshop-api.* — ces requêtes bypassent le proxy VuGen car elles ne passent pas par le Target Server.
Pourquoi c'était une erreur : Pour une SPA multi-domaines, VuGen ne capture pas automatiquement les requêtes vers les sous-domaines non déclarés. J'aurais dû anticiper et indiquer la configuration Port Mapping dès le début.
Temps perdu : ~25 min | Sévérité : ⭐⭐⭐⭐
❌ Erreur S4-2 — Script VuGen vide : certificat SSL non diagnostiqué en premier¶
Ce que j'ai proposé : Après le Port Mapping, annoncer que l'enregistrement devrait fonctionner.
Ce qui s'est passé : Script toujours vide. Deuxième cause distincte : VuGen interceptait le TLS mais ne pouvait pas le déchiffrer — son certificat racine n'était pas installé dans Windows.
Pourquoi c'était une erreur : Un script VuGen vide peut avoir deux causes indépendantes. J'aurais dû les présenter ensemble : (1) capture du trafic → Port Mapping, (2) déchiffrement SSL → certificat racine. Les diagnostiquer dans l'ordre aurait évité un second aller-retour.
Temps perdu : ~20 min | Sévérité : ⭐⭐⭐
📊 Récapitulatif Session 4¶
| # | Erreur | Temps perdu | Sévérité |
|---|---|---|---|
| S4-1 | VuGen Port Mapping absent pour SPA multi-domaines | ~25 min | ⭐⭐⭐⭐ |
| S4-2 | Certificat SSL VuGen non diagnostiqué simultanément | ~20 min | ⭐⭐⭐ |
| TOTAL | ~45 min |
📊 Récapitulatif Cumulatif — Sessions 1 à 4¶
| ID | Session | Erreur | Temps perdu | Sévérité |
|---|---|---|---|---|
| S1-1 | 1 | Augmentation interceptor sans analyse trafic | ~15 min | ⭐⭐⭐⭐ |
| S1-2 | 1 | Fibonacci sans anticiper l'optimisation JIT | ~45 min | ⭐⭐⭐⭐⭐ |
| S1-3 | 1 | Boucle temporelle sans micro-benchmark | ~30 min | ⭐⭐⭐⭐ |
| S1-4 | 1 | process_cpu_usage sans vérification threads background |
~20 min | ⭐⭐⭐ |
| S1-5 | 1 | Iterations trop élevées sans test progressif | ~25 min | ⭐⭐⭐⭐ |
| S1-6 | 1 | Métriques Grafana non vérifiées | ~20 min | ⭐⭐⭐ |
| S1-7 | 1 | Pas de version calibration proposée en premier | ~40 min | ⭐⭐⭐⭐ |
| S2-1 | 2 | CORS fix symptôme par symptôme sans audit global | ~2h | ⭐⭐⭐⭐⭐ |
| S2-2 | 2 | allowedOrigins + allowCredentials=true |
~20 min | ⭐⭐⭐ |
| S2-3 | 2 | ${cors.allowed.origins} au lieu de ${CORS_ALLOWED_ORIGINS} |
~15 min | ⭐⭐ |
| S3-1 | 3 | Script bash non-POSIX sur NAS Synology busybox | ~45 min | ⭐⭐⭐⭐⭐ |
| S3-2 | 3 | Nombre d'images estimé sans extraction depuis SQL | ~30 min | ⭐⭐⭐ |
| S3-3 | 3 | chmod uniquement sur dossier terminal |
~20 min | ⭐⭐⭐ |
| S3-4 | 3 | CRLF sur script shell (même erreur que S2) | ~10 min | ⭐⭐ |
| S4-1 | 4 | VuGen Port Mapping absent pour SPA multi-domaines | ~25 min | ⭐⭐⭐⭐ |
| S4-2 | 4 | Certificat SSL VuGen non diagnostiqué simultanément | ~20 min | ⭐⭐⭐ |
| TOTAL | ~8h25 |
🔁 Pattern Récurrent Global¶
En analysant les 16 erreurs sur 4 sessions, un seul pattern les explique presque toutes :
"Proposer une solution avant d'avoir audité le contexte d'exécution réel."
Trois manifestations récurrentes :
1. Hypothèse d'environnement non vérifiée — S1-2 (JIT), S1-3 (durée itération), S1-4 (métriques JVM), S3-1 (busybox), S3-3 (permissions nginx) : du code calibré pour un environnement supposé sans mesure terrain préalable.
2. Fix symptomatique sans inventaire global — S2-1 (CORS obstacle par obstacle) : répondre aux erreurs une par une au lieu de cartographier l'ensemble avant de toucher quoi que ce soit.
3. Non-application des leçons précédentes — S3-4 (CRLF) est la répétition exacte d'une erreur documentée en Session 2.
Règle corrective : avant tout fix, poser une question d'environnement. Si la réponse est connue dans le contexte → la citer explicitement. Si elle n'est pas connue → demander avant de coder. Une minute de diagnostic vaut mieux que 45 minutes de tentatives ratées.