Avancé · Construire avec l’IA · module 143 de 155
Construire un formulaire web sécurisé ou une petite application web
Construis avec l’aide de l’IA un formulaire ou une petite application web, et vérifie les règles de base en matière de sécurité, de confidentialité et d’accessibilité.
Après cette leçon
Tu reconnais les principales erreurs de sécurité dans une petite application web et tu fais vérifier le code de l’IA sur ces points avant sa mise en ligne.
En image · Voici comment cela est lié
Une petite application web avec une base sûre
Les clés ne figurent jamais dans le code que reçoit le navigateur.
Le serveur vérifie chaque champ ; les envois sont protégés par une connexion.
Entrées inhabituelles, messages d’erreur sans détails techniques et un deuxième relecteur.
Partie 1 de 3 · Les secrets sur le serveur
Ta préférence pour moins de mouvement est prise en compte. Choisis chaque partie toi-même.
Vite construit, pas encore sûr
L’IA peut créer en quelques minutes un formulaire, une petite base de données et une page web. Cela fonctionne souvent tout de suite, mais fonctionner n’est pas la même chose qu’être sûr. Erreurs typiques : une clé secrète dans le code de la page web, où tout le monde peut la lire ; des entrées que le serveur ne vérifie pas ; une page d’envois accessible à quiconque connaît le lien. Une telle erreur fait fuiter les données de vraies personnes. Pars donc du principe qu’une première version n’est pas encore prête pour des données réelles.
Les règles de base
Les secrets, comme les clés d’un service de paiement ou d’IA, ont leur place sur le serveur et jamais dans le code que reçoit le navigateur. Le serveur vérifie à nouveau chaque champ, même si la page l’a déjà fait, car un attaquant envoie simplement sa propre requête. Ne demande que les données dont tu as besoin, et indique sur la page ce que tu en fais (leçon 117). Ne montre les envois qu’aux personnes connectées et autorisées à les voir. En cas d’erreur, affiche un message ordinaire, pas de détails techniques sur ton serveur.
Faire vérifier et tester
Demande explicitement à l’IA de vérifier le code sur ces points, et lis la réponse d’un œil critique : une autovérification n’est pas une garantie. Teste toi-même avec des entrées bizarres, un formulaire vide et un texte très long. Vérifie si le formulaire est utilisable au clavier et si les champs ont une étiquette (leçon 124). Fais relire une application qui traite de vraies données personnelles par une personne expérimentée en sécurité avant sa mise en ligne.
Nouvel exemple d'exercice
De l'explication à un résultat utilisable.
Une petite application web qui fonctionne n’est pas encore sûre. Des secrets sur le serveur, des contrôles sur le serveur et des données protégées par une connexion en constituent la base.
Situation d'exercice fictiveFictif : un bénévole construit avec l’IA un formulaire pour inscrire des bénévoles à une course à pied. Le formulaire demande le nom, l’adresse e-mail, le numéro de téléphone, le numéro de registre national et la taille de T-shirt.
Voir une résolution possible
Voici comment faire
Le numéro de registre national n’est pas nécessaire pour cette tâche ; je supprime ce champ. Le serveur vérifie l’adresse e-mail et le numéro de téléphone. La liste des inscriptions est protégée par une connexion réservée aux deux organisateurs. Le formulaire indique à quoi nous utilisons les données et quand nous les supprimons.
Pourquoi cela fonctionne
Demander moins de données est la protection la plus simple. Ce qui reste n’est visible que par ceux qui en ont besoin.
Rends cela un peu plus difficile
Écris la phrase du formulaire qui explique ce qu’il advient des données et quand elles sont supprimées.
Entraîne-toi davantage, à ton rythme. Tu n'as rien à envoyer. Cela ne compte pas comme une évaluation automatique.
Ton lieu de travail · apprendre par la pratique
Crée quelque chose. Regarde ce qui change.
Vérification de la connexion IA en cours… Tu peux déjà consulter l'exemple écrit.
Présente ta mission à Ende.
Lis la réponse, change une seule chose et compare.
Version précédente
Nouvelle version
Tu gardes le contrôle
Que veux-tu améliorer dans ta prochaine tentative ?
Uniquement sur cet appareil. Les réponses de l’IA restent uniquement dans la mémoire de cette page. Il s'agit d'un auto-contrôle, pas d'une note.
Pourquoi cette approche fonctionne
Demander moins de données est la protection la plus simple. Ce qui reste n’est visible que par ceux qui en ont besoin.
Une étape de plus
Écris la phrase du formulaire qui explique ce qu’il advient des données et quand elles sont supprimées.
Essaie & découvre · sans engagement
Deviens toi-même le contrôleur de la source
Ne marque que les affirmations que la source ne soutient pas. Vérifie ensuite ta sélection.
Application d’inscription fictive pour une fête de quartier, construite avec l’aide de l’IA. Un bénévole décrit son fonctionnement.
Choisis ci-dessus quelles phrases tu corrigerais. La réponse reste cachée jusqu'à ce que tu vérifies ta sélection.
Cet essai fonctionne localement avec des données fictives et ne compte pas pour ta complétion de leçon. Elle recommencera lors d'une nouvelle leçon ou d'un rechargement.
Un prompt pour commencer
Vérifie la sécurité et la confidentialité de ce code fictif d’un formulaire d’inscription. Contrôle surtout : y a-t-il des secrets dans le code du navigateur, le serveur vérifie-t-il chaque champ, qui peut voir les envois, quelles données sont demandées et que voit un visiteur en cas d’erreur ? Pour chaque problème, indique la gravité et une modification concrète. [Colle le code ici]
Applique-le
Tu as fait créer par l’IA une petite application de réservation. Elle fonctionne bien et tu veux la partager aujourd’hui avec les membres de ton club. La liste des réservations se trouve sur une page sans identification.
Quelle approche correspond le mieux à cette situation ?
- Partager aujourd’hui ; personne ne trouvera la page avec la liste.
- Rendre le lien vers la liste un peu plus long, pour qu’il soit plus difficile à deviner.
- Protège la liste par une identification, vérifie les autres règles de base et teste avec quelques membres avant de partager largement l’application.
Avec JavaScript, tu peux contrôler ton approche et recevoir un feedback immédiat.
Teste ta compréhension
Le code de ton formulaire vérifie dans le navigateur si une adresse e-mail est valide. Une vérification sur le serveur est-elle encore nécessaire ?
- Non, le navigateur la vérifie déjà.
- Oui, car quelqu’un peut envoyer une requête au serveur sans utiliser ta page.
- Seulement si le formulaire traite des paiements.
S'entraîner davantage
Prends un petit formulaire ou une application d’exemple réalisés avec l’IA. Passe en revue les règles de base de cette leçon et note pour chaque règle si l’application la respecte.
Constat 1 : la clé du service d’e-mail se trouvait dans le JavaScript de la page ; elle est maintenant sur le serveur. Constat 2 : le serveur acceptait une adresse e-mail sans @ ; une vérification a été ajoutée. Constat 3 : la page des envois était accessible sans connexion ; elle demande maintenant une connexion. Constat 4 : le formulaire demandait aussi l’année de naissance, qui n’est pas nécessaire ; ce champ a été supprimé.
