@mostajs/schema-form 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog — @mostajs/schema-form
 
+## 0.4.1 — 2026-10-09
+
+**Corrigé** (audit du 09/10/2026) : `name`, `opts.id`, `opts.action`, `min`, `max`, `step`, `rows` sont échappés —
+une valeur d'attribut ne peut plus fermer la balise. Essai T-STY-5.
+
 ## 0.4.0 — 08/10/2026
 
 **L'habillage devient malléable** (demande du fondateur) : un style imposé en ligne ne se surchargeait qu'à

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mostajs/schema-form",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Interface de SAISIE g\u00e9n\u00e9rique pilot\u00e9e par sch\u00e9ma (z\u00e9ro-d\u00e9p) : sections + champs typ\u00e9s (text/textarea/number/boolean/select/color/date/localized/repeater), chemins imbriqu\u00e9s, multilingue AR/FR/EN. Rendu HTML (renderForm) + relecture (readValues). R\u00e9utilisable par toute app @mostajs.",
   "author": "Dr Hamid MADANI <drmdh@msn.com>",
   "license": "AGPL-3.0-or-later",

package/src/index.js

@@ -112,11 +112,11 @@ function renderControl(f, value, name, mode = 'inline', locale = 'fr') {
   const ph = f.placeholder ? ` placeholder="${escapeHtml(label(f.placeholder, locale))}"` : '';
   switch (f.type) {
     case 'textarea':
-      return `<textarea name="${name}"${req}${ph} rows="${f.rows || 4}"${at(mode, 'textarea')}>${escapeHtml(value ?? '')}</textarea>`;
+      return `<textarea name="${escapeHtml(name)}"${req}${ph} rows="${escapeHtml(f.rows || 4)}"${at(mode, 'textarea')}>${escapeHtml(value ?? '')}</textarea>`;
     case 'number':
-      return `<input type="number" name="${name}"${req}${ph} value="${escapeHtml(value ?? '')}"${f.min != null ? ` min="${f.min}"` : ''}${f.max != null ? ` max="${f.max}"` : ''}${f.step != null ? ` step="${f.step}"` : ''}${at(mode, 'input')}>`;
+      return `<input type="number" name="${escapeHtml(name)}"${req}${ph} value="${escapeHtml(value ?? '')}"${f.min != null ? ` min="${escapeHtml(f.min)}"` : ''}${f.max != null ? ` max="${escapeHtml(f.max)}"` : ''}${f.step != null ? ` step="${escapeHtml(f.step)}"` : ''}${at(mode, 'input')}>`;
     case 'boolean':
-      return `<label${at(mode, 'check')}><input type="checkbox" name="${name}" value="true"${value ? ' checked' : ''}> ${escapeHtml(label(f.help, locale) || label(MOTS.oui, locale))}</label>`;
+      return `<label${at(mode, 'check')}><input type="checkbox" name="${escapeHtml(name)}" value="true"${value ? ' checked' : ''}> ${escapeHtml(label(f.help, locale) || label(MOTS.oui, locale))}</label>`;
     // ── LE CHAMP FICHIER (0.3.0) ──────────────────────────────────────────
     //
     // ⚠️ `capture` ouvre l'APPAREIL PHOTO sur mobile, au lieu de la galerie. C'est ce qu'on veut
@@ -127,12 +127,12 @@ function renderControl(f, value, name, mode = 'inline', locale = 'fr') {
     // décide quel fichier est sélectionné (ce serait une exfiltration). Un formulaire de
     // modification doit donc afficher la pièce DÉJÀ envoyée à côté du champ, pas dedans.
     case 'fichier':
-      return `<input type="file" name="${name}"${req}`
+      return `<input type="file" name="${escapeHtml(name)}"${req}`
         + `${f.accept ? ` accept="${escapeHtml(f.accept)}"` : ''}`
         + `${f.capture ? ` capture="${escapeHtml(f.capture)}"` : ''}`
         + `${f.multiple ? ' multiple' : ''}${at(mode, 'input')}>`;
     case 'select':
-      return `<select name="${name}"${req}${at(mode, 'input')}>${(f.options || []).map((o) => `<option value="${escapeHtml(o.value)}"${String(value) === String(o.value) ? ' selected' : ''}>${escapeHtml(label(o.label ?? o.value, locale))}</option>`).join('')}</select>`;
+      return `<select name="${escapeHtml(name)}"${req}${at(mode, 'input')}>${(f.options || []).map((o) => `<option value="${escapeHtml(o.value)}"${String(value) === String(o.value) ? ' selected' : ''}>${escapeHtml(label(o.label ?? o.value, locale))}</option>`).join('')}</select>`;
     case 'montant': {
       // Un texte, PAS un `number` : le contrôle numérique du navigateur rend un flottant, et un
       // flottant n'est pas un montant. La conversion en unités mineures se fait à la relecture,
@@ -140,17 +140,17 @@ function renderControl(f, value, name, mode = 'inline', locale = 'fr') {
       const dec = f.decimales ?? 2;
       const aff = value === undefined || value === null || value === '' ? '' : affichageMontant(value, dec);
       return `<div${at(mode, 'montant')}>
-        <input type="text" inputmode="decimal" name="${name}"${req} value="${escapeHtml(aff)}" placeholder="${escapeHtml(label(f.placeholder, locale) || (dec ? '0,00' : '0'))}"${at(mode, 'input')}>
+        <input type="text" inputmode="decimal" name="${escapeHtml(name)}"${req} value="${escapeHtml(aff)}" placeholder="${escapeHtml(label(f.placeholder, locale) || (dec ? '0,00' : '0'))}"${at(mode, 'input')}>
         ${f.devise ? `<span${at(mode, 'devise')}>${escapeHtml(f.devise)}</span>` : ''}</div>`;
     }
     case 'color':
-      return `<input type="color" name="${name}" value="${escapeHtml(value || '#000000')}"${at(mode, 'couleur')}>`;
+      return `<input type="color" name="${escapeHtml(name)}" value="${escapeHtml(value || '#000000')}"${at(mode, 'couleur')}>`;
     case 'date':
-      return `<input type="date" name="${name}"${req} value="${escapeHtml(value ?? '')}"${at(mode, 'input')}>`;
+      return `<input type="date" name="${escapeHtml(name)}"${req} value="${escapeHtml(value ?? '')}"${at(mode, 'input')}>`;
     case 'localized': {
       const locs = f.locales || LOCALES;
       return `<div${at(mode, 'localized')}>${locs.map((lc) =>
-        `<div${at(mode, 'loc')}><span${at(mode, 'loc-tag', 'locTag')}>${lc}</span><input name="${name}.${lc}" dir="${lc === 'ar' ? 'rtl' : 'ltr'}" value="${escapeHtml((value && value[lc]) ?? '')}"${at(mode, 'input')}></div>`).join('')}</div>`;
+        `<div${at(mode, 'loc')}><span${at(mode, 'loc-tag', 'locTag')}>${lc}</span><input name="${escapeHtml(`${name}.${lc}`)}" dir="${lc === 'ar' ? 'rtl' : 'ltr'}" value="${escapeHtml((value && value[lc]) ?? '')}"${at(mode, 'input')}></div>`).join('')}</div>`;
     }
     case 'repeater': {
       const arr = Array.isArray(value) ? value : [];
@@ -159,10 +159,10 @@ function renderControl(f, value, name, mode = 'inline', locale = 'fr') {
       // rien à cloner, et une liste qu'on ne peut pas allonger n'est pas une liste — c'est un
       // formulaire figé qui en a l'air.
       const gabarit = `<template class="sf-tpl">${renderRepeaterItem(f, {}, `${name}[__i__]`, 0, mode, locale)}</template>`;
-      return `<div class="sf-repeater" data-name="${name}">${items}${gabarit}<button type="button"${at(mode, 'add')}>${escapeHtml(label(f.addLabel, locale) || label(MOTS.ajouter, locale))}</button></div>`;
+      return `<div class="sf-repeater" data-name="${escapeHtml(name)}">${items}${gabarit}<button type="button"${at(mode, 'add')}>${escapeHtml(label(f.addLabel, locale) || label(MOTS.ajouter, locale))}</button></div>`;
     }
     default: // text
-      return `<input type="text" name="${name}"${req}${ph} value="${escapeHtml(value ?? '')}"${at(mode, 'input')}>`;
+      return `<input type="text" name="${escapeHtml(name)}"${req}${ph} value="${escapeHtml(value ?? '')}"${at(mode, 'input')}>`;
   }
 }
 function renderRepeaterItem(f, item, prefix, i, mode = 'inline', locale = 'fr') {
@@ -248,7 +248,7 @@ export function renderForm(schema, values = {}, opts = {}) {
   // schéma — y compris DANS un répéteur — l'attribut est posé.
   const aUnFichier = JSON.stringify(schema).includes('"fichier"');
   const classe = `sf-form${opts.classe ? ` ${escapeHtml(opts.classe)}` : ''}`;
-  return `<form class="${classe}"${opts.id ? ` id="${opts.id}"` : ''}${opts.action ? ` method="post" action="${opts.action}"` : ''}${aUnFichier ? ' enctype="multipart/form-data"' : ''}${locale === 'ar' ? ' dir="rtl"' : ''}>
+  return `<form class="${classe}"${opts.id ? ` id="${escapeHtml(opts.id)}"` : ''}${opts.action ? ` method="post" action="${escapeHtml(opts.action)}"` : ''}${aUnFichier ? ' enctype="multipart/form-data"' : ''}${locale === 'ar' ? ' dir="rtl"' : ''}>
     ${schema.title ? `<h2${at(mode, 'title')}>${escapeHtml(label(schema.title, locale))}</h2>` : ''}${body}${submit}</form>`;
 }