Importer et exporter un formulaire

FormBuilder fournit une interface officielle d’import/export dans la toolbar.

Depuis 0.1.13, deux formats d’export sont disponibles :

• Document complet : format recommandé et versionné contenant schéma, valeurs, réglages et thème ;
• Schéma uniquement : tableau historique compatible avec les intégrations existantes.

Export du document complet

Le bouton Exporter ouvre une boîte de dialogue contenant le document JSON canonique. Deux actions sont disponibles :

• copie dans le presse-papiers ;
• téléchargement d’un fichier .qform.json dont le nom est dérivé du formulaire.

L’événement document-export est émis après une copie, un téléchargement ou un appel de l’API publique :

<FormBuilder
  builder-id="forms-admin"
  @document-export="payload => auditExport(payload.document)"
/>

const builder = ref<FormBuilderPublicApi | null>(null)
const document = builder.value?.exportDocument({
  metadata: { source: 'admin-ui' },
})

Le document complet peut contenir des données saisies, y compris des données personnelles. Vérifiez ou anonymisez values avant de partager le fichier. Les objets File, Blob et FileList ne sont pas sérialisables : téléversez les fichiers séparément et stockez uniquement leur référence validée.

Le format expose documentVersion, schemaVersion et themeVersion. Consultez Versionnement et migrations.

Export du schéma historique

Le mode Schéma uniquement et l’API exportSchema() restent compatibles :

const schema = builder.value?.exportSchema() || []

L’événement schema-export reste inchangé.

Import

Le bouton Importer accepte :

• un document QForm Builder versionné ;
• un ancien état { schema, values, settings, savedAt } ;
• un tableau de nœuds ;
• une enveloppe { "schema": [...] } ;
• du JSON collé ou un fichier .json / .qform.json.

Une importation valide migre et assainit le contenu avant de l’appliquer.

<FormBuilder
  builder-id="forms-admin"
  @document-import="payload => auditMigration(payload)"
  @schema-import="schema => auditSchema(schema)"
  @error="handleBuilderError"
/>

Pour une source ne contenant que le schéma, les valeurs et réglages courants sont préservés. Pour un document complet, ils sont appliqués dans la même transaction.

builder.value?.importDocument(payload, {
  applyValues: true,
  applySettings: true,
})

importSchema() reste disponible pour remplacer explicitement le schéma uniquement.

Validation et sécurité

La même validation est appliquée à la boîte de dialogue, à importDocument() et aux helpers publics :

• limite de 2 Mo ;
• profondeur maximale et nombre maximal de valeurs ;
• rejet des objets non sérialisables et nombres non finis ;
• rejet des clés de pollution de prototype ;
• rejet des attributs événementiels on* ;
• rejet de $cmp, script, iframe, object, embed, style, link, meta, base et template ;
• rejet des URL javascript:, vbscript: et data: ;
• rejet des CSS contenant des expressions ou URL dangereuses ;
• ajout automatique de noopener noreferrer aux liens target="_blank" ;
• rejet explicite des versions futures inconnues ;
• normalisation du thème, des tailles, métadonnées et icônes.

Les helpers sont exposés côté application :

import {
  parseQFormBuilderDocument,
  migrateQFormBuilderDocument,
} from '@vevedh/qform-builder-layer/migrations'

import {
  parseQFormBuilderSchema,
  sanitizeQFormBuilderSchema,
} from '@vevedh/qform-builder-layer/schema-transfer'

Règle serveur

Ne jamais considérer le contrôle navigateur comme une frontière de sécurité. Le backend doit :

1. contrôler l’authentification et les droits d’écriture ;
2. limiter la taille du payload ;
3. revalider schema, values et settings ;
4. refuser les versions futures non prises en charge ;
5. protéger les champs système (ownerId, tenantId, dates, version) dans les hooks du service ;
6. appliquer un contrôle de concurrence optimiste ;
7. journaliser les imports, migrations et mises à jour sensibles.