Un mini-site à trois pages

LABO-U6-S2-05

Contexte — Vous travaillez pour la société qui reprend l'informatique de TechnoVert. Karim Benali, le responsable d'atelier, veut que ses techniciens saisissent leurs interventions sur une page web, et plus sur un tableur.

Un collègue a préparé le squelette du site : les adresses, les pages HTML et la feuille de style. Il reste à écrire le code Python qui fait tourner chaque page.

À la fin de ce labo, vous saurez écrire les vues d'un site Flask. Elles affichent une liste, traitent un formulaire et protègent une page. Vous saurez aussi lire une erreur serveur.

Comment ça se valide — à chaque point de contrôle, vous montrez votre résultat au formateur. Il valide, puis vous passez à la suite.

Les mots de la séance

Ce dont vous avez besoin

• Votre poste Windows, avec Python, Flask, VS Code et un navigateur.
• Annexe A1 : le mini-site de départ et son mode d'emploi. Le dossier se télécharge depuis l'annexe A1, dans le fichier A1_mini_site.zip.
• Annexe A2 : les gabarits du mini-site.
• Annexe A3 : les données de TechnoVert et les comptes de test.
• Annexe A4 : un extrait de la documentation de Flask, avec les conditions dans les gabarits.
• Annexe A2 : des gabarits complets, à prendre comme modèles.

En binôme — le pilote tape, le lecteur lit les consignes et les annexes à voix haute, et vérifie chaque résultat. On inverse à la partie C.

Le plan du labo

PARTIE A — Afficher la liste

Étapes 1 à 6, environ 25 min. À la fin, la page /chantiers affiche les six chantiers de TechnoVert.

Besoin d'un rappel ? Revoir le cours : « Route, vue, gabarit : le chemin d'une page ».

• Téléchargez A1_mini_site.zip depuis l'annexe A1.
• Faites un clic droit sur le fichier, puis « Extraire tout ». Avec « Parcourir », choisissez votre dossier « Documents ».

Vous devez voir : un dossier mini-site dans « Documents ». Il contient app.py, chantiers.json, donnees.py, et les dossiers static et templates.

VS Code sert à la fois à modifier le code et à lancer le serveur.

• Ouvrez VS Code. Menu « Fichier », puis « Ouvrir le dossier ». Choisissez Documents\mini-site.
• Ouvrez un terminal : menu « Terminal », puis « Nouveau terminal ». Tapez :

ls

Vous devez voir : la liste des fichiers du dossier, dont app.py et templates.

• Dans le terminal, tapez :

python -m flask --app app run --debug

Les options de cette commande sont expliquées dans l'annexe A1.

Vous devez voir : entre autres ces lignes.

 * Running on http://127.0.0.1:5000
 * Debugger is active!

• Dans votre navigateur, ouvrez http://127.0.0.1:5000/chantiers.

Vous devez voir : le texte « Page des chantiers : à écrire ». La route existe, mais sa vue n'est pas écrite.

Ce terminal reste ouvert jusqu'à la partie D. En mode développement, le serveur recharge seul le code à chaque enregistrement.

Un gabarit a des trous. La vue doit lui donner les bonnes données, sous le bon nom.

• Ouvrez l'annexe A2 et lisez le gabarit chantiers.html.
• Notez le nom de la liste que le gabarit parcourt dans sa boucle for :
• Notez les cinq clés que le gabarit lit pour chaque chantier :

Vous devez avoir : un nom de liste, et cinq clés. Vous les retrouverez dans le code de l'étape 5.

Voici la vue complète. Elle lit les chantiers, puis les passe au gabarit sous le nom attendu.

• Dans VS Code, ouvrez app.py depuis la liste des fichiers, à gauche.
• Remplacez le corps de liste_chantiers() par ces deux lignes, avec quatre espaces devant chacune :

    chantiers = donnees.lire_chantiers()
    return render_template("chantiers.html", chantiers=chantiers)

• Enregistrez avec Ctrl+S. Rechargez la page dans le navigateur.

Vous devez voir : le titre « Les chantiers », la phrase « 6 chantier(s). » et un tableau de six lignes. La première est « Arrosage du parc de la mairie ».

• Dans le navigateur, affichez le code source de la page : Ctrl+U.
• Cherchez le mot lire_chantiers dans le code source avec Ctrl+F.

Vous devez voir : aucun résultat. Le code source contient seulement du HTML, avec une balise <tr> par chantier.

PARTIE B — Recevoir un formulaire

Étapes 7 à 12, environ 30 min. À la fin, une intervention saisie dans la page est enregistrée par le serveur.

Besoin d'un rappel ? Revoir le cours : « Recevoir une saisie et la vérifier ».

La page /saisir reçoit deux sortes de requêtes. En GET, on affiche le formulaire vide. En POST, on reçoit la saisie.

• Ouvrez l'annexe A2 et lisez la liste des données qu'attend le gabarit saisir.html.
• Dans app.py, remplacez le corps de saisir() par :

    chantiers = donnees.lire_chantiers()
    if request.method == "GET":
        return render_template("saisir.html", chantiers=chantiers, services=donnees.SERVICES,
                               erreurs=[], saisie={}, message=None)

• Enregistrez, puis ouvrez /saisir dans le navigateur.

Vous devez voir : le formulaire, avec six chantiers dans le premier menu et trois services dans le second.

Il faut maintenant lire ce que le technicien a tapé. La méthode est dans la documentation.

• Ouvrez l'annexe A4.
• Trouvez l'objet qui contient les champs envoyés dans le corps d'une requête POST. Notez son nom :
• Trouvez l'objet qui contient les données envoyées dans l'adresse. Notez son nom :

Vous devez avoir : deux noms qui commencent par request.. Le premier sert à l'étape 9.

Pour l'instant, il n'y a pas de connexion. Le technicien s'appelle donc « test ». La partie C remplacera ce nom par le vrai.

• Ajoutez ces lignes à la fin de saisir(), sous le bloc if de l'étape 7 :

    saisie = request.form
    numero = donnees.ajouter_intervention(int(saisie["chantier"]), "test", saisie["service"],
                                          saisie["date"], float(saisie["duree"]),
                                          saisie["description"], saisie["blocage"])
    return render_template("saisir.html", chantiers=chantiers, services=donnees.SERVICES,
                           erreurs=[], saisie={}, message=f"Intervention n° {numero} enregistrée.")

• Enregistrez le fichier.

Vous devez voir : la page /saisir s'affiche toujours. Aucune trace d'erreur dans le premier terminal.

• Dans le formulaire, choisissez le chantier 3, le service « atelier », la date 2026-09-29, la durée 2.5 et la description « Contrôle des bornes ». Laissez le blocage vide. Cliquez sur « Enregistrer ».

Vous devez voir : le message vert « Intervention n° 13 enregistrée. ».

• Ouvrez un second terminal avec le bouton « + » du panneau Terminal. Le premier fait toujours tourner le serveur.
• Vérifiez que le fichier de données a changé :

Select-String "Contrôle des bornes" chantiers.json

Vous devez voir : une ligne qui contient "description": "Contrôle des bornes", précédée du nom du fichier et du numéro de la ligne.

• Regardez la barre d'adresse du navigateur, juste après votre envoi. Notez l'adresse affichée :
• Ouvrez maintenant /chantiers?service=atelier.
• Dans le premier terminal, cherchez dans le journal du serveur la ligne POST /saisir et la ligne GET /chantiers?service=atelier. Ignorez les lignes /static/style.css et /favicon.ico. Elles ressemblent à :

127.0.0.1 - - [29/Sep/2026 14:02:11] "POST /saisir HTTP/1.1" 200 -
127.0.0.1 - - [29/Sep/2026 14:03:40] "GET /chantiers?service=atelier HTTP/1.1" 200 -

Vous devez voir : la saisie n'apparaît nulle part dans l'adresse ni dans le journal. Le mot atelier, lui, apparaît dans les deux.

• Remplissez le formulaire avec le chantier 3, le service « atelier », la date 2026-09-29 et la durée deux heures. Cliquez sur « Enregistrer ».

Vous devez voir : une page d'erreur de Flask. Tout en bas, la ligne ValueError: could not convert string to float: 'deux heures'.

• Notez la ligne de app.py indiquée juste au-dessus de cette dernière ligne :

PARTIE C — Vérifier et protéger

Étapes 13 à 18, environ 40 min. À la fin, les saisies fausses sont refusées avec un message, et seuls les salariés connectés peuvent saisir.

Besoin d'un rappel ? Revoir le cours : « Se souvenir de l'utilisateur : la session ».

Changez de rôle : le lecteur devient pilote.

On vérifie chaque champ avant d'enregistrer. Chaque erreur trouvée va dans une liste. Voici les deux premières vérifications, écrites en entier.

• Dans saisir(), remplacez les lignes de l'étape 9, de saisie = request.form jusqu'à la fin, par :

    saisie = request.form
    erreurs = []

    chantier = None
    if saisie["chantier"].isdigit():
        chantier = donnees.lire_chantier(int(saisie["chantier"]))
    if chantier is None:
        erreurs.append("Choisissez un chantier.")
    elif chantier["statut"] == "cloture":
        erreurs.append("Ce chantier est clôturé : saisie refusée.")

    duree = 0
    try:
        duree = float(saisie["duree"])
        if duree <= 0 or duree > 12:
            erreurs.append("La durée doit être entre 0 et 12 heures.")
    except ValueError:
        erreurs.append("La durée doit être un nombre, par exemple 2.5.")

    # étape 14 : vos trois vérifications ici

    if erreurs:
        return render_template("saisir.html", chantiers=chantiers, services=donnees.SERVICES,
                               erreurs=erreurs, saisie=saisie, message=None)

    numero = donnees.ajouter_intervention(chantier["id"], "test", saisie["service"],
                                          saisie["date"], duree,
                                          saisie["description"], saisie["blocage"])
    return render_template("saisir.html", chantiers=chantiers, services=donnees.SERVICES,
                           erreurs=[], saisie={}, message=f"Intervention n° {numero} enregistrée.")

• Enregistrez, puis renvoyez la saisie fausse de l'étape 12.

Vous devez voir : le formulaire revient, avec le message rouge « La durée doit être un nombre, par exemple 2.5. ». Les champs déjà remplis sont gardés.

Chaque vérification tient en deux lignes : un if, puis erreurs.append(...). Voici la première, écrite en entier. Elle refuse un service qui n'est pas dans la liste.

    if saisie["service"] not in donnees.SERVICES:
        erreurs.append("Choisissez un service dans la liste.")

• Sur ce modèle, écrivez les deux autres. Aidez-vous du tableau « Quelques outils Python du labo » des RAPPELS : len(x) donne la longueur d'un texte, x.strip() enlève les espaces.

• Écrivez vos trois vérifications dans app.py, à la place du commentaire # étape 14, puis enregistrez.

Vous devez voir : la page /saisir s'affiche toujours, sans trace d'erreur.

• Envoyez chaque saisie du tableau. Pour chacune, notez ce que la page affiche.

Vous devez voir : exactement le résultat attendu sur chaque ligne. La dernière affiche un numéro d'intervention.

La connexion vérifie le compte, puis écrit le login dans la session. La fonction verifier_compte() est fournie : l'annexe A1 la décrit.

• Remplacez le corps de connexion() par :

    if request.method == "POST":
        login = request.form["login"]
        if donnees.verifier_compte(login, request.form["mot_de_passe"]):
            session["login"] = login
            return redirect(url_for("liste_chantiers"))
        return render_template("connexion.html", erreur="Identifiant ou mot de passe incorrect.")
    return render_template("connexion.html", erreur=None)

• Remplacez le corps de deconnexion() par ces deux lignes :

    session.clear()
    return redirect(url_for("connexion"))

• Ouvrez /connexion et connectez-vous avec un compte de l'annexe A3.

Vous devez voir : vous arrivez sur la liste des chantiers. Le bandeau affiche « Connecté : » suivi de votre identifiant.

Une page protégée regarde la session avant tout le reste.

• Ajoutez ces deux lignes au tout début de liste_chantiers() et au tout début de saisir(), avant toute autre ligne du corps :

    if "login" not in session:
        return redirect(url_for("connexion"))

• Dans saisir(), dans l'appel à ajouter_intervention, remplacez "test" par session["login"]. Enregistrez.

Vous devez voir : tant que vous êtes connecté, les deux pages s'affichent comme avant.

• Faites chaque essai du tableau, dans l'ordre. Après chaque essai, cherchez dans le journal du premier terminal la ligne de la requête que vous venez de faire : GET /saisir ou POST /connexion. Relevez le code de trois chiffres à la fin de cette ligne. Les lignes qui suivent viennent du navigateur, qui charge la page suivante, style.css et favicon.ico : ignorez-les. Attention : une connexion ratée renvoie 200, car la page est réaffichée avec le message.

• Ouvrez les outils du navigateur avec F12. Dans l'onglet « Application » ou « Stockage », ouvrez « Cookies ».

Vous devez voir : un cookie nommé session, avec une valeur en trois morceaux séparés par des points.

PARTIE D — Lire une erreur serveur

Étapes 19 à 22, environ 20 min. À la fin, vous savez où lire une erreur, et ce que voit l'utilisateur en production.

Besoin d'un rappel ? Revoir le cours : « Quand le serveur plante ».

Un collègue a écrit une page /bilan qui additionne les heures. Elle plante.

• Ouvrez /bilan dans le navigateur.
• Lisez la trace par le bas. Notez le type d'erreur et la valeur entre guillemets :
• Notez le numéro de la ligne de app.py qui plante :

Vous devez voir : une page d'erreur de Flask, avec des morceaux du code de app.py.

• Regardez le premier terminal, celui du serveur.

Vous devez voir : la même trace, et une ligne qui se termine par "GET /bilan HTTP/1.1" 500 -.

• Notez le code de réponse de cette ligne :

• Dans le premier terminal, arrêtez le serveur avec Ctrl+C.
• Relancez-le sans le mode développement :

python -m flask --app app run

• Rechargez /bilan dans le navigateur.

Vous devez voir : seulement « Internal Server Error », et une phrase en anglais. Aucune ligne de code. La trace complète est toujours dans le terminal.

La ligne fautive lit une clé qui n'existe pas. Le nom juste est dans la description des données.

• Ouvrez l'annexe A3. Trouvez le nom exact de la clé qui contient la durée d'une intervention. Notez-le :
• Corrigez la ligne de bilan() avec ce nom. Enregistrez.
• En mode production, le serveur ne recharge pas le code seul. Arrêtez-le avec Ctrl+C, relancez-le, puis rechargez /bilan.

Vous devez voir : la phrase « Total des heures saisies : » suivie d'un nombre d'heures.

POUR ALLER PLUS LOIN

10 à 15 min, si vous avez fini avant la fin de la séance.

Un collègue a demandé à une IA d'écrire une page de connexion. Voici ce qu'elle a produit. Le code marche, mais il contient trois erreurs dangereuses.

@app.route("/connexion")
def connexion():
    login = request.args.get("login")
    mot_de_passe = request.args.get("mot_de_passe")
    if login and donnees.verifier_compte(login, mot_de_passe):
        session["login"] = login
        session["mot_de_passe"] = mot_de_passe
        return redirect(url_for("liste_chantiers"))
    return render_template("connexion.html", erreur=None)

if __name__ == "__main__":
    app.run(host="0.0.0.0", debug=True)

• Trouvez les trois erreurs avant la mise en production. Pour chacune, notez la ligne et le danger.

CE QU'IL FAUT RETENIR

1. La vue passe les données au gabarit sous le nom exact que le gabarit attend.
2. Chaque champ reçu est du texte : on le vérifie, on le convertit, et on prévoit l'échec.
3. Une page protégée vérifie la session en premier. En production, pas de --debug : la trace reste dans le journal.

Injection, correction, restauration

LABO-U6-S2-06

Contexte — Vous reprenez l'application de suivi des chantiers de TechnoVert. Elle marche, mais elle range ses données dans un fichier. Hélène Vasseur veut qu'elles passent dans la base MySQL de l'entreprise.

Un collègue a repris une vieille page écrite par l'ancien prestataire. Elle colle la saisie dans sa requête. Vous allez le prouver, puis corriger.

À la fin de ce labo, vous saurez brancher une application sur MySQL, isoler l'accès aux données, corriger une injection SQL et prouver une restauration.

Comment ça se valide — à chaque point de contrôle, vous montrez votre résultat au formateur. Il valide, puis vous passez à la suite.

Les mots de la séance

Ce dont vous avez besoin

• Votre poste Windows, avec XAMPP, Python, VS Code et un navigateur.
• Annexe A5 : l'application de départ et son mode d'emploi. Le dossier se télécharge dans A5_technovert_web.zip.
• Annexe A6 : le jeu de données de la base, fichier A6_technovert.sql.
• Annexe A7 : le compte MySQL de l'application, fichier A7_compte_appli.sql.
• Annexe A8 : le fichier d'environnement à remplir.
• Annexe A9 : un extrait de la documentation du connecteur MySQL.
• Annexe A10 : le script de vérification, fichier A10_verifier_base.py.

En binôme — le pilote tape, le lecteur lit les consignes et les annexes à voix haute, et vérifie chaque résultat. On inverse à la partie C.

Le plan du labo

PARTIE A — Brancher l'application

Étapes 1 à 6, environ 35 min. À la fin, l'application affiche les chantiers lus dans MySQL.

Besoin d'un rappel ? Revoir le cours : « Parler à la base depuis Python ».

• Téléchargez A5_technovert_web.zip depuis l'annexe A5. Faites un clic droit dessus, « Extraire tout », puis avec « Parcourir », choisissez votre dossier « Documents ».
• Ouvrez le dossier Documents\technovert-web dans VS Code. Ouvrez un terminal : menu « Terminal », puis « Nouveau terminal ».
• Ouvrez le panneau de contrôle de XAMPP. Cliquez sur « Start », en face de « MySQL ».

Vous devez voir : « MySQL » en vert dans le panneau de XAMPP. Dans VS Code, le dossier contient app.py, acces_bdd.py et les fichiers A6_technovert.sql, A7_compte_appli.sql, A10_verifier_base.py.

• Dans le terminal, vérifiez que la commande mysql répond :

mysql --version

• Chargez le jeu de données, puis le compte de l'application :

mysql -u root -e "source A6_technovert.sql"
mysql -u root -e "source A7_compte_appli.sql"

• Vérifiez que la base existe :

mysql -u root -e "SELECT COUNT(*) FROM technovert.chantier;"

Vous devez voir : aucun message pour les deux premières commandes, puis un petit tableau avec le nombre 6.

La couche d'accès est le fichier acces_bdd.py. Ses premières lignes, déjà écrites, chargent vos identifiants avec load_dotenv. Deux fonctions sont à écrire.

• Dans acces_bdd.py, remplacez tout le corps de ouvrir(), pass compris, par :

    try:
        return mysql.connector.connect(
            host=os.environ["TV_BDD_HOTE"],
            user=os.environ["TV_BDD_UTILISATEUR"],
            password=os.environ["TV_BDD_MOT_DE_PASSE"],
            database=os.environ["TV_BDD_BASE"],
            connection_timeout=3)
    except mysql.connector.Error as erreur:
        raise BaseIndisponible(str(erreur)) from erreur

• Remplacez tout le corps de lire_chantiers(), return [] compris, par :

    connexion = ouvrir()
    curseur = connexion.cursor(dictionary=True)
    curseur.execute(COLONNES_CHANTIER + "ORDER BY ch.date_debut")
    lignes = curseur.fetchall()
    connexion.close()
    return lignes

• Lisez la ligne COLONNES_CHANTIER, écrite en haut du fichier. Notez la table reliée à chantier par le JOIN :

Le + colle ici deux textes fixes, écrits par vous. Ce n'est pas une saisie d'utilisateur : il n'y a donc aucun risque d'injection.

Vous devez avoir : un fichier enregistré avec Ctrl+S, et le nom d'une table relié par le JOIN. On teste le tout à l'étape 5.

Le fichier d'environnement se range dans votre dossier personnel, jamais dans le dossier du code. L'application le lit seule au démarrage.

• Copiez le modèle de l'annexe A8 dans votre dossier personnel :

Copy-Item technovert.env.exemple $HOME\technovert.env

• Ouvrez-le avec notepad $HOME\technovert.env. Mettez le mot de passe du compte tv_appli de l'annexe A7, et une longue valeur au hasard pour TV_CLE_SECRETE. Enregistrez.
• Vérifiez son contenu :

Get-Content $HOME\technovert.env

Vous devez voir : quatre lignes de commentaire, puis vos cinq lignes TV_…, sans aucun a-remplacer. Les accents des commentaires peuvent mal s'afficher : ce n'est pas grave.

L'application importe encore l'ancienne couche, celle du fichier. On la fait pointer sur la base.

• Ouvrez app.py. Repérez la ligne import donnees.
• Remplacez-la par :

import acces_bdd as donnees

• Remplacez la ligne de la clé secrète par :

app.secret_key = os.environ["TV_CLE_SECRETE"]

• Dans app.py, juste au-dessus de from flask import …, ajoutez la ligne import os. Enregistrez, puis lancez le serveur :

python -m flask --app app run --debug

• Connectez-vous sur /connexion avec le compte ngarcia, mot de passe Chantier2026. Les autres logins sont dans l'annexe A6, table compte. Le mot de passe de test est le même pour tous. Puis ouvrez http://127.0.0.1:5000/chantiers.

Vous devez voir : les six chantiers, comme avant. Cette fois, ils viennent de MySQL.

• Ouvrez un second terminal avec le bouton « + » du panneau Terminal. Le premier fait tourner le serveur.
• Changez un nom de chantier directement dans la base :

mysql -u root -e "UPDATE technovert.chantier SET nom='Essai base' WHERE id=1;"

• Rechargez /chantiers dans le navigateur.

Vous devez voir : le premier chantier s'appelle maintenant « Essai base ». L'application lit bien la base en direct.

PARTIE B — Isoler et sortir les secrets

Étapes 7 à 11, environ 25 min. À la fin, tout le SQL est dans la couche d'accès, et aucun mot de passe n'est dans le code.

Besoin d'un rappel ? Revoir le cours : « Une couche d'accès aux données ».

• Cherchez le mot SELECT dans le fichier des vues :

Select-String -Pattern "SELECT", "INSERT", "mysql" -Path app.py

Vous devez voir : aucune ligne. Tout le SQL est dans acces_bdd.py.

• Laissez le serveur tourner. Dans le panneau de XAMPP, cliquez sur « Stop », en face de « MySQL ».
• Rechargez /chantiers dans le navigateur.

Vous devez voir : la page « Service momentanément indisponible », pas une trace d'erreur.

• Regardez le terminal du serveur.

Vous devez voir : une ligne qui contient ERROR in app: Base indisponible, suivie de la cause. La ligne juste en dessous se termine par 503 -.

• Dans le panneau de XAMPP, cliquez sur « Start » en face de « MySQL ». Rechargez la page.

Vous devez voir : la liste des chantiers revient.

• Ouvrez l'annexe A9.
• Trouvez comment passer une valeur à une requête sans la coller dans le texte. Notez le symbole employé dans la requête :
• Notez sous quelle forme les valeurs sont passées à execute() :

Vous devez avoir : un symbole, et le mot « tuple ». Ils servent en partie C.

• Cherchez un mot de passe en clair dans les fichiers du code :

Select-String -Pattern "Labo-Appli", "password=" -Path app.py, acces_bdd.py

Vous devez voir : la seule ligne trouvée est password=os.environ[...]. Aucun mot de passe en clair.

PARTIE C — Injecter puis corriger

Étapes 12 à 17, environ 35 min. À la fin, une injection est prouvée, puis rendue inoffensive.

Besoin d'un rappel ? Revoir le cours : « L'injection SQL et la requête paramétrée ».

Changez de rôle : le lecteur devient pilote.

Cadre légal. Vous testez une injection sur votre propre machine, dans un but d'apprentissage. Le faire sur un site qui n'est pas le vôtre, sans autorisation écrite, est un délit.

Un collègue a repris la page « Mes interventions » de l'ancien prestataire. Sa fonction est interventions_du_technicien, en bas de acces_bdd.py.

• Ouvrez acces_bdd.py et lisez cette fonction.
• Notez comment le login et le service entrent dans la requête :

Vous devez avoir : les valeurs collées dans le texte avec des + et des apostrophes.

• Si le serveur est arrêté, relancez-le dans le premier terminal :

python -m flask --app app run --debug

• Connectez-vous avec le compte ngarcia, mot de passe Chantier2026.
• Ouvrez /mes-interventions?service=atelier.

Vous devez voir : la phrase 4 intervention(s) pour le service « atelier »., et un tableau de 4 lignes, toutes de ngarcia.

• Dans la barre d'adresse, remplacez le service par une injection. Tapez cette adresse, puis validez :

http://127.0.0.1:5000/mes-interventions?service=x' OR '1'='1

Vous devez voir : un nombre d'interventions bien plus grand que 4, et des interventions d'autres techniciens. Vous voyez des données qui ne sont pas les vôtres.

• Notez le nombre d'interventions affiché :
• Faites tout de suite une capture d'écran de cette page. C'est votre preuve « avant correction » : après l'étape 15, vous ne pourrez plus la refaire.

• Dans interventions_du_technicien, remplacez les lignes de requete = ( jusqu'à curseur.execute(requete) par :

    requete = ("SELECT i.date_intervention, c.nom AS chantier, i.technicien, i.service, "
               "i.duree_heures FROM intervention i JOIN chantier c ON c.id = i.id_chantier "
               "WHERE i.technicien = %s AND i.service = %s "
               "ORDER BY i.date_intervention")
    curseur.execute(requete, (login, service))

• Enregistrez le fichier.

Vous devez voir : le fichier s'enregistre sans erreur. On teste l'effet à l'étape 16.

• Rechargez la page normale /mes-interventions?service=atelier.

Vous devez voir : les 4 interventions de ngarcia, comme avant. La correction n'a rien cassé.

• Rechargez l'adresse d'injection de l'étape 14.

Vous devez voir : « 0 intervention(s) ». La base a cherché un service qui s'appelle vraiment x' OR '1'='1. Il n'existe pas.

Vous avez déjà la capture « avant correction », faite à l'étape 14.

• Faites maintenant une capture de la même adresse d'injection après correction : « 0 intervention(s) ».

Vous devez avoir : deux captures, l'une de l'étape 14, l'autre d'ici. Vous les montrez au point de contrôle C.

PARTIE D — Exporter et restaurer

Étapes 18 à 22, environ 25 min. À la fin, la base est restaurée sur une pile vierge, et vérifiée.

Besoin d'un rappel ? Revoir le cours : « Un jeu de données qu'on peut rejouer ».

Le jeu de test de l'annexe A6 recrée une base neuve, toujours la même. Un export, lui, sauvegarde la vraie base, avec les saisies des utilisateurs. C'est cet export qu'on restaure quand une machine tombe en panne. On le prouve ici sur une base neuve.

• Exportez toute la base dans un fichier, dans le dossier de l'application :

mysqldump -u root technovert --result-file=export_technovert.sql

• Cherchez dans le fichier les lignes qui créent les tables et qui ajoutent les données :

Select-String -Pattern "CREATE TABLE", "INSERT INTO" -Path export_technovert.sql

Vous devez voir : des lignes CREATE TABLE pour les quatre tables, et des lignes INSERT INTO. L'export contient la structure et les données.

Une pile vierge, c'est une base qui n'existe pas encore. On efface la base pour le simuler.

• Supprimez la base :

mysql -u root -e "DROP DATABASE technovert;"

• Rechargez /chantiers dans le navigateur.

Vous devez voir : la page « Service momentanément indisponible ». La base n'existe plus.

• Recréez la base vide, puis rechargez l'export dedans :

mysql -u root -e "CREATE DATABASE technovert;"
mysql -u root technovert -e "source export_technovert.sql"

• Rechargez /chantiers.

Vous devez voir : les six chantiers reviennent.

Une page qui s'affiche ne prouve pas que tout est là. Le script de l'annexe A10 compte les lignes et teste les cas connus.

• Dans le second terminal, lancez le script de vérification. Il lit lui aussi technovert.env :

python A10_verifier_base.py

Vous devez voir : chaque ligne commence par OK, et la dernière ligne dit « 13 vérification(s) sur 13 réussie(s). ».

• Ouvrez l'annexe A10. Trouvez la dernière vérification du script, celle qui teste une injection.
• Notez ce qu'elle envoie comme service, et le résultat attendu :

Vous devez avoir : un service piégé, avec des apostrophes, et zéro ligne attendue.

POUR ALLER PLUS LOIN

10 à 15 min, si vous avez fini avant la fin de la séance.

Une IA a proposé cette fonction pour chercher un client par sa ville. Elle marche, mais elle contient trois défauts.

def clients_par_ville(ville):
    connexion = mysql.connector.connect(host="127.0.0.1", user="root",
                                        password="root", database="technovert")
    curseur = connexion.cursor(dictionary=True)
    curseur.execute(f"SELECT * FROM client WHERE ville = '{ville}'")
    return curseur.fetchall()

• Trouvez les trois défauts avant la mise en production. Pour chacun, notez la ligne et le danger.

CE QU'IL FAUT RETENIR

1. Une valeur saisie ne se colle jamais dans une requête : on écrit %s et on passe la valeur à part.
2. Tout le SQL vit dans la couche d'accès. Une base arrêtée donne une page 503 propre, jamais une trace.
3. Une restauration ne se croit pas : elle se prouve avec un script de vérification.