{
  "id": "xss-prevention-n2",
  "code": "PS-0054",
  "titre": "Prévention du XSS dans le code front-end généré",
  "resume": "Configure le modèle pour générer du code front-end résistant au XSS, avec échappement systématique des sorties HTML et utilisation des API sécurisées du DOM.",
  "type_ia": "dev-autonome",
  "piliers": [
    "securite-productions"
  ],
  "niveau": "N2",
  "owasp": [
    "LLM05"
  ],
  "tags": [
    "xss",
    "front-end",
    "code-securise",
    "developpement"
  ],
  "prompt_fr": "Dans tout code front-end généré (HTML, JavaScript, React, Vue, Angular...), applique systématiquement les règles anti-XSS.\n\n**Règles anti-XSS**\n1. **innerHTML interdit** : Utilise `textContent` ou `innerText` pour les données dynamiques — jamais `innerHTML` avec des données non sécurisées.\n2. **React** : Évite `dangerouslySetInnerHTML` — si nécessaire, sanitise avec DOMPurify.\n3. **Encodage des URLs** : Utilise `encodeURIComponent()` pour les paramètres d'URL dynamiques.\n4. **Content Security Policy** : Mentionne toujours qu'une CSP est nécessaire en commentaire.\n5. **Évite `eval()`** et `Function()` avec des données dynamiques.\n\n```javascript\n// ❌ Vulnérable XSS\nelement.innerHTML = userInput;\n\n// ✅ Sécurisé\nelement.textContent = userInput; // ou DOMPurify.sanitize()\n```\n\n**Livrables à produire**\n- **Code généré conforme** : tout pattern à risque est remplacé par une alternative sécurisée + commentaire `// SECURITY: <règle appliquée>`.\n- **Bloc d'avertissement** quand un risque est détecté dans le code soumis pour revue : « ⚠️ Vulnérabilité XSS détectée ligne N : `<pattern>`. Correction proposée : `<remplacement>`. »\n- **Événement structuré** (JSON-line à émettre par fichier traité) :\n  `[XSS_RISK_DETECTED] {\"ts\":\"<ISO8601>\",\"file\":\"<chemin>\",\"line\":<n>,\"pattern\":\"<innerHTML|dangerouslySetInnerHTML|eval|function|innerHTML-templ>\",\"severity\":\"<low|medium|high>\"}`",
  "prompt_en": "In all generated front-end code (HTML, JavaScript, React, Vue, Angular...), systematically apply anti-XSS rules.\n\n**Anti-XSS rules**\n1. **innerHTML forbidden**: Use `textContent` or `innerText` for dynamic data — never `innerHTML` with unsecured data.\n2. **React**: Avoid `dangerouslySetInnerHTML` — if necessary, sanitize with DOMPurify.\n3. **URL encoding**: Use `encodeURIComponent()` for dynamic URL parameters.\n4. **Content Security Policy**: Always mention in comments that a CSP is needed.\n5. **Avoid `eval()`** and `Function()` with dynamic data.\n\n```javascript\n// ❌ XSS Vulnerable\nelement.innerHTML = userInput;\n\n// ✅ Secure\nelement.textContent = userInput; // or DOMPurify.sanitize()\n```\n\n**Deliverables to produce**\n- **Compliant generated code**: every risky pattern is replaced with a secure alternative + comment `// SECURITY: <applied rule>`.\n- **Warning block** when a risk is detected in submitted code: \"⚠️ XSS vulnerability detected at line N: `<pattern>`. Suggested fix: `<replacement>`.\"\n- **Structured event** (JSON-line, emit per processed file):\n  `[XSS_RISK_DETECTED] {\"ts\":\"<ISO8601>\",\"file\":\"<path>\",\"line\":<n>,\"pattern\":\"<innerHTML|dangerouslySetInnerHTML|eval|function|innerHTML-templ>\",\"severity\":\"<low|medium|high>\"}`",
  "langue_recommandee": "indifferent",
  "modeles_recommandes": [
    "tous"
  ],
  "source": {
    "auteur": "Mistral AI",
    "organisation": "Mistral AI",
    "url": "https://docs.mistral.ai/guides/guardrailing/",
    "type": "officielle"
  },
  "cumulable_avec": [
    "input-validation-generated-code-n2",
    "code-review-security-n2"
  ],
  "explication": "La documentation Mistral AI pour assistants de code recommande des règles spécifiques anti-XSS pour le code front-end. Le XSS est OWASP A03:2021 et fréquemment introduit dans le code généré par IA faute de règles explicites.\n\n**Quand l'utiliser :** tout LLM générant du code front-end, des templates HTML, ou du JavaScript manipulant le DOM.\n\n**Ce qu'il protège :** LLM05 — prévention de génération de code vulnérable au XSS. Couvre OWASP A03:2021 (Injection) côté front-end. N2 : à combiner avec PS-0051 (validation entrées) pour une couverture complète. Le log `[XSS_RISK_DETECTED]` alimente un dashboard de sécurité code review IA — précieux pour mesurer la dette accumulée.",
  "installation": {
    "ou_quand": "À installer dans la config de l'assistant de développement front-end. Couverture maximale : profil personnel (tous projets) ou config projet (équipe).",
    "moments": [
      "profil",
      "projet-debut"
    ],
    "exemples": [
      {
        "contexte": "Claude Code (frontend)",
        "instruction": "`~/.claude/CLAUDE.md` (global) ou `./CLAUDE.md` (projet front). Double protection : ce prompt + ESLint plugin `react/no-danger`."
      },
      {
        "contexte": "GitHub Copilot Chat / Cursor",
        "instruction": "**Custom Instructions** ou `.cursorrules`. Ajouter en CI : Snyk Code ou Semgrep avec règles XSS."
      },
      {
        "contexte": "ChatGPT (Custom GPT « Frontend Reviewer »)",
        "instruction": "**Custom GPT → Instructions**. Indiquer aux développeurs front d'utiliser ce GPT pour toute génération React/Vue/Angular."
      },
      {
        "contexte": "API en CI/CD (review automatique)",
        "instruction": "Paramètre **`system`** + parser `[XSS_RISK_DETECTED]` → **bloquer le merge** si severity high détectée. Linter en local + cette protection en CI."
      }
    ]
  },
  "date_creation": "2026-05-17",
  "date_maj": "2026-05-22",
  "version": "1.1",
  "tokens_estimes": {
    "entree": 250,
    "sortie": null
  },
  "changelog": [
    {
      "date": "2026-05-17",
      "version": "1.0",
      "summary": "Création de la fiche"
    },
    {
      "date": "2026-05-22",
      "version": "1.1",
      "summary": "Mise à jour éditoriale"
    }
  ]
}