Applications interactives Anne-Laure Ligozat ENSIIE, 1re année 2015/2016 1 / 94
1 Formulaires Présentation Balises Exemple 2 / 94
Présentation Les formulaires Permettent l interaction entre un utilisateur et un programme d application Définition de différents types de champs de saisie 3 / 94
Présentation Exemple de formulaire 4 / 94
Balises Formulaires : balises de définition (1) Définition du formulaire balise conteneur < form >... < /form > Attributs du formulaire action : nom du programme (de la page) qui sera exécuté par le serveur method : mode de transmission des paramètres ( GET ou POST ) GET: passage des champs saisis dans l URL sous forme de paires (nom,valeur) : http://www.w3schools.com/tags/demo_form_ method.asp?fname=magali&lname=dupont POST: envoi des champs saisis par transaction HTTP POST enctype : type d encodage utilisé pour la transmission des données 5 / 94
Balises Formulaires : balises de définition (2) Champs du formulaire balise <input> Type du champ : attribut type text : champ monoligne de contenu quelconque <input type= text size= 20 maxlength= 18 name= titre /> transmet le contenu du champ dans une variable de nom name titre = le texte contenu dans le champ password : le texte tapé au clavier est remplacé par * hidden : champ non visible sur le formulaire à l écran qui permet de transmettre une information au programme appelé 6 / 94
Balises Formulaires : balises de définition (3) Type du champ : attribut type (suite) checkbox : boutons à choix multiples <label>comédie</label> : <input type= checkbox name= genre value= c /> <label>drame</label> : <input type= checkbox name= genre value= d /> transmet l information: genre = value radio : boutons à choix exclusif France: <input type= radio name= pays value = fr /> États-Unis: <input type= radio name= pays value= us /> mais aussi date, number, url... 7 / 94
Balises Formulaires : balises de définition (4) Valeur présélectionnée <input type= checkbox name= genre value= d checked= checked /> Boutons de commande submit : termine la saisie et transmet les informations saisies au programme désigné par l attribut action dans <form> <input type= submit value= Rechercher name= bouton1 > : au moins un bouton submit par formulaire reset : réinitialise le formulaire <input type= reset value= Annuler name= bouton2 > 8 / 94
Balises Formulaires : balises de définition (5) Liste de sélection de valeurs balise select Metteur en scène: <select name= réalisateur > <option value= 1 >Alfred Hitchcock</option> <option value= 2 >Quentin Tarantino</option>... </select> aide au codage selected : choix présélectionné par défaut : choix exclusif choix multiple : attribut multiple dans la balise select 9 / 94
Balises Formulaires : balises de définition (6) Champs de saisie / affichage multilignes balise textarea <textarea name= resume cols= 30 rows= 3 > [texte par défaut] </textarea> 10 / 94
Balises Formulaire : exemple de définition (1) <html> <head> <title>formulaire complet </title> <link rel= stylesheet href= films.css type= text/css > </head> <body> <form action= http:... method= post > <input type= hidden name= NomForme value= exforme1 /> Titre: <input type= text size= 20 name= titre /> Année: <input type= text size= 4 maxlength= 4 name= annee value= 2000 /> <p> Comédie: <input type= checkbox name= genre value= c /> Drame: <input type= checkbox name= genre value= d /> Histoire: <input type= checkbox name= genre value= h /> </p> 11 / 94
Exemple Formulaire : exemple de définition (2) <p> Résumé: <textarea name= resume cols= 30 rows= 3 >Résumé du film </textarea> </p> Metteur en scène: <select name= réalisateur size= 3 > <option value= 1 >Alfred Hitchcock</option> <option value= 2 >François Truffaut</option> <option value= 3 selected= selected >Quentin Tarantino</option>... </select> <h3>votre choix?</h3> <input type= submit value= Rechercher /> <input type= reset value= Annuler /> </form> </body> </html> 12 / 94
2 PHP Caractéristiques Interaction avec l utilisateur Connexion à une base de données 13 / 94
Caractéristiques PHP PHP PHP: Hypertext Preprocessor Caractéristiques langage dédié à la production de pages HTML générées dynamiquement langage interprété script intégré à HTML (interpréteur de PHP intégré au serveur web) syntaxe similaire à celle du C Documentation php : http://www.php.net/manual/fr/ toutes les fonctions php: http://www.php.net/manual/fr/funcref.php 14 / 94
Caractéristiques Historique des versions de PHP 1995 1.0 1998 3.0 2004 5.0 2006 5.2 2012 5.4 2015 7.0 1997 2.0 2000 4.0 2005 5.1 2009 5.3 2013 5.5 2014 5.6 15 / 94
Caractéristiques Rappel : exemple d accès à une page web avec PHP 16 / 94
Caractéristiques Génération du HTML Un premier exemple très simple (exemple.php) <!DOCTYPE html> <html> <body> <h1>un très beau titre</h1> <p>j affiche la date : </body> </html> deviendra (html) <?php echo date( j/m/y );?> </p> <!DOCTYPE html> <html> <body> <h1>un très beau titre</h1> <p>j affiche la date : 19/02/2013 </p> </body> </html> 17 / 94
Caractéristiques Généralités sur le langage PHP fichiers.html ou.php code php contenu entre les balises <?php et?> code = instructions terminées par un ; 18 / 94
Caractéristiques Généralités Commentaires /*plusieurs lignes*/ // 1 ligne Variables variables: pas de déclaration; pas de type fixe; noms de variables préfixés par $ sensible à la casse: nclient nclient variable définie et non NULL? fonction isset($nomvariable) Constantes define ( NOM, valeur) nom-constante par convention en majuscules 19 / 94
Caractéristiques Généralités Types chaîne de caractères (autres exemples) Le titre est $titre \n, Mme.$nom guillemets simples (quotes) : $var n est pas interprétée (pas remplacée par sa valeur); echo la variable $lecteur ; //affiche : la variable $lecteur protéger les apostrophes : echo d \ abord guillemets doubles : echo la variable \$lecteur vaut : $lecteur //affiche : la variable $lecteur vaut : 124 utilisation des accolades : {} $boisson = vin; echo il a goûté plusieurs ${boisson}s ; // plusieurs vins syntaxe heredoc : <<< <<<EOD Ceci est une chaîne. EOD; même identifiant qu au début avec rien d autre qu un ; 20 / 94
Caractéristiques Généralités Types (autres) booléens 0, 0.0, 0,, tableau vide, null: faux ; tout le reste vrai valeurs booléennes: TRUE, FALSE (non sensible à la casse) entiers flottants 3.14, 0.3 e-2 tableaux longueur dynamique, éléments pas nécessairement du même type indice = entier ou chaîne de caractère (tableau associatif), ou les deux 21 / 94
Caractéristiques Tableaux avec clés numériques Affectation automatique des indices $tab[0] = element1 ; $tab[ ] = element1 ; $tab[1] = element2 ; $tab[ ] = element2 ; $tab[2] = 12; $tab[ ] = 12; $tab = array( element1, element2, 12); $trimestre1 = array(1 janvier, février, mars ); print r($trimestre1); // va afficher: Array ([1] janvier [2] fevrier [3] mars ) 22 / 94
Caractéristiques Tableaux avec clé chaîne de caractères (associatif) Repère les éléments par une clé $real[ vertigo ] = Hitchcock ; $real[ alien ] = Scott ; $real[ kagemusha ] = Kurosawa ; $real=array( vertigo Hitchcock, alien Scott, kagemusha Kurosawa ); Utilisation echo $real[ alien ] ; // Scott echo le réalisateur est {$real[ alien ]}. ; 23 / 94
Caractéristiques Traitements des tableaux (1) Parcours de tableaux foreach ($tab as $value) { echo $value \n <br /> ; } // $tab: tableau, $value: valeur de l élément courant foreach ($tab as $key => $value){... } // $key clé de l élément courant 24 / 94
Caractéristiques Traitements des tableaux (2) Quelques fonctions sur les tableaux reset : positionne au premier élément end : positionne en fin de tableau next : avance le pointeur d un élément prev : recule le pointeur d un élément current : retourne l élément courant key : retourne la clé courante unset : suppression d un tableau ou d un élément serialize, unserialize : linéarisation ( stockage) count : compte éléments du tableau très nombreuses autres fonctions sur tableaux (tris, comparaisons...) [http://www.php.net/manual/fr/ref.array.php] 25 / 94
Caractéristiques Fonctions Arguments passage des arguments par valeur par adresse : function ex2 ( &$p1, $p2) {... $p1++;... } $j =1; k = ex2($j, $i); // j = 2 noms de fonctions insensibles à la casse (minuscules / majuscules sans importance) 26 / 94
Caractéristiques Structuration d un script Inclusion d une fonction (ou d un ensemble de fonctions) dans le script d un programme include ou require(fichier) différence: include ne produit qu un warning en cas d erreur d inclusion, alors que require produit une erreur et arrête l exécution du script si répétitive include once/require once à utiliser pour des définitions de fonctions (éviter d inclure code php) 27 / 94
Caractéristiques Exemple d inclusion 28 / 94
Caractéristiques Structuration des pages de script Module Ensemble de fonctions concernant un même sujet que l on peut inclure dans le code PHP <?php include( connect.php ); include( gestiontable.php ); include( formulaire.php );... 29 / 94
Interaction avec l utilisateur Interagir avec l utilisateur Utilisation de formulaires pour connaître ses choix 30 / 94
Interaction avec l utilisateur Traitement du formulaire 31 / 94
Interaction avec l utilisateur Exemple simple de formulaire formulaire.php <form action= cible.php method= post > <p>quel est votre nom? <input type= text name= nom /> </p> <p> <input type= submit value= Valider /> </p> </form> cible.php <p>bonjour <?php echo $ POST[ nom ];?>! </p> 32 / 94
Connexion à une base de données Stockage des informations dans une base de données Que stocker? informations propres à l application développée films, réalisateurs... dans l exemple de la base de films informations concernant le site web informations sur les utilisateurs (nom, mot de passe, login...), actualités... 33 / 94
Connexion à une base de données Exemple d accès à une page web avec PHP + PosgreSQL 34 / 94
Connexion à une base de données Exemple d échange 35 / 94
Connexion à une base de données Exemple : Formulaire appelant un script PHP <html> <head> <title>formulaire pour script PHP </title> </head> <body> <h1> Formulaire de saisie pour rechercher des films</h1> <form action= ExPhp1.php method= post > <p> Titre: <input type= text size= 20 name= titre value= % /> Le caractère % remplace n importe quelle chaîne. </p> <p> <input type= submit value= Rechercher /> <input type= reset value= Annuler /> </p> </form> </body> </html> 36 / 94
Connexion à une base de données Exemple : Affichage client 37 / 94
Connexion à une base de données Exemple : Script PHP ExPhp1.php <html> <head> <title>formulaire pour script PHP </title> </head> <body> <h1>résultat de l interrogation par formulaire le <?php echo date( j/m/y );?></h1> <?php $titre = $ POST[ titre ]; echo <p>vous avez demandé: Titre = $titre<br/> ; /*on veut un film qui contienne la chaine rentrée*/ $requete = SELECT * FROM film WHERE titre LIKE %$titre% ; ; $connexion = pg connect( host=localhost dbname=films ); //on devrait tester la connexion... 38 / 94
Connexion à une base de données Exemple : Script PHP ExPhp1.php (suite) $reponse = pg query($connexion, $requete); if($reponse){ $nbtuples = pg num rows ($reponse); echo <ul> ; while ($tuplecourant = pg fetch assoc($reponse) ){ echo <li>titre : $tuplecourant[ titre ], ; echo sorti en : $tuplecourant[ annee ]</li> ; } echo </ul> ; } else{ echo Problème à l exécution de la requete sur les films ; } pg close($connexion); echo </p> ;?> </body> </html> 39 / 94
Connexion à une base de données Exemple : Code (X)HTML produit par l exécution des scripts PHP <html> <head> < t i t l e>f o r m u l a i r e pour s c r i p t PHP</ t i t l e> </ head> <body> <h1>r e s u l t a t de l i n t e r r o g a t i o n par f o r m u l a i r e l e 03/03/2015</h1> <p>vous avez demande : T i t r e=s l e e p<br /> <u l> < l i>t i t r e : Sleepy Hollow, paru en : 1999</ l i> < l i>t i t r e : S l e e p l e s s i n S e a t t l e, paru en : 1993</ l i> </ u l> </p> </ body> </ html> 40 / 94
Connexion à une base de données Exemple : Affichage client 41 / 94
Connexion à une base de données Exemple : fonctionnement 42 / 94
Connexion à une base de données Fonctionnement du transfert d information 43 / 94
Connexion à une base de données Transfert d informations entre deux pages php : champs cachés 44 / 94
Connexion à une base de données Transfert d informations entre deux pages php : variables de session 45 / 94
Connexion à une base de données API PHP/PostgreSQL http://www.php.net/manual/fr/ref.pgsql.php Ensemble de fonctions attachement à la base: pg connect ; renvoie un indice de connexion (ou false, s il y a erreur) exécution d une requête : pg query; renvoie un indice de résultat ou false pg num rows : renvoie le nombre de tuples résultat de select pg num fields : renvoie le nombre d attributs du résultat de select pg affected rows: renvoie le nombre de tuples insérés/modifiés/supprimés récupération message erreur: pg last error (indice connexion) récupération du tuple courant d un résultat : pg fetch row/pg fetch array/pg fetch object fermeture de la base: pg close 46 / 94
Connexion à une base de données Portabilité des accès BD : extension PHP Data Objects (PDO) interface d abstraction de l accès aux données (pas de la base de données) il faut utiliser en plus le driver PDO spécifique de la BD à utiliser <?php $dbh = new PDO( pgsql:host=$host;dbname=$dbname, $user, $pass, array(pdo::attr PERSISTENT => true)); pour avoir une connexion persistante (mise en cache au lieu de fermée à la fin du script)?> 47 / 94
Connexion à une base de données Portabilité des accès BD : extension PHP Data Objects (PDO) 48 / 94
Connexion à une base de données Select dans le contexte web Limitation du nombre de résultats LIMIT affichage d une partie du résultat d une requête en fonction du besoin récupération d une partie seulement du résultat d une requête SELECT... ORDER BY... [LIMIT {nombre / ALL}] [OFFSET nombre] Ne pas oublier d ordonner les résultats Exemples select * from lecteurs order by n lecteur limit 30; select * from lecteurs order by n lecteur limit 30 offset 31; 49 / 94
Connexion à une base de données Curseurs SQL inclus dans un langage hôte requêtes SQL incluses dans un langage de programmation impératif passage d un langage ensembliste (SQL) à un langage procédural mécanisme du curseur = tampon correspondant au résultat d une requête plusieurs curseurs peuvent être ouverts simultanément 50 / 94
Connexion à une base de données Exemple de BD Exemple client(n client, nom client, prenom client) commande(n client, n commande, date, commande) ligne commande(n commande, n produit, quantite, total client) 51 / 94
Connexion à une base de données Exemple: affichage souhaité Affichage Etat des montants commandés client num 100, Stark Tony commande num 50 du dddd total... commande num 72 du dddd total... total client 100:... client num 200, Rogers Steve commande num 58 du dddd total... total client 200:... client num 230, Banner Bruce commande num 56 du dddd total... commande num 90 du dddd total... total client 230:... Nombre de clients:... Nombre de commandes:... Total ensemble des clients:... 52 / 94
Connexion à une base de données Curseurs triés client NJ commande NJ ligne commande trié par n client, n commande n client n commande... n produit total client 100 50... 1024 100 50... 1580 100 50... 1730 100 72... 1730 100 72... 2014 200 58... 1580 230 56... 3730 230 90... 1056 230 90... 3820 53 / 94
Connexion à une base de données Algorithme de traitement séquentiel des curseurs triés lecture premier tuple boucle client traitement début client boucle commandes du client courant traitement début commande boucle des lignes de la commande courante du client courant traitement d un tuple lecture tuple suivant traitement fin commande traitement fin client 54 / 94
Connexion à une base de données Algorithme (1/2) /* traitement dé but */ /* connection à la BD */ $curseur = pg_query ($bd, $requete ); if ( $curseur ) { $tot_gen = 0; /* traitement dé but curseur */ $tuple_courant = pg_fetch_assoc ( $curseur ); /* tester si ré sultat non vide */ $n_client = $tuple_courant [ n_client ]; $n_commande = $tuple_courant [ n_commande ]; $mtlc= $tuple_courant [ mtlc ]; $date= $tuple_courant [ date_com ]; while ( $tuple_courant ){ $n_client_courant = $n_client ; $tot_cl = 0; /* traitement dé but client */ print " client numero : $n_client_courant "; while ( $tuple_courant && $n_client = = $n_client_courant ){ { $n_com_courant = $n_commande ; $tot_com = 0; /* traitement dé but commande */ while ( $tuple_courant && $n_client == $n_client_courant && $n_commande == $n_com_courant ) { $tot_com += $mtlc ; /* traitement tuple */ // lecture tuple suivant $tuple_courant = pg_fetch_assoc ( $curseur ); 55 / 94
Connexion à une base de données Algorithme (2/2) If ( $tuple_courant ){ $n_client = $tuple_courant [ n_client ]; // n_client lu $n_commande = $tuple_courant [ n_commande ]; // autres attributs lus $mtlc= $tuple_courant [ mtlc ]; $date= $tuple_courant [ date_com ]; } } $tot_cl += $tot_com ; /* traitement fin commande */ print " commande num : $n_com - courant, date : $date, total : $tot - com " } $tot_gen += $tot_cl ; /* traitement fin client */ print " total client : $tot - cl"; } print " total général = $tot - gen "; /* traitement fin curseur */ } else { print " erreur exé cution requ^ete = ". pg_last_error ( $bd ); } /* traitement fin */ 56 / 94
3 MVC Principe Exemple 57 / 94
Principe Amélioration de l architecture des pages : patron MVC MVC Modèle Vue Contrôleur Dans le code des pages ne pas mélanger ce qui est : modèle : accès aux données vue : affichage (principalement HTML) contrôleur : traitement des données pages dédiées à chaque partie + orchestration des deux parties 58 / 94
Principe Patron MVC 59 / 94
Principe MVC : fonctionnement 60 / 94
Exemple Exemple MVC voir fichier exemple initial et fichier exemple MVC modele news.php vue news.php contient essentiellement du xhtml code php très simple et limité (parcours tableau, appel de fonction, echo) controleur news.php inclut le modèle (pour pouvoir récupérer les données ou faire les traitements sur les données) inclut la vue (pour faire l affichage) 61 / 94
Exemple MVC : architecture des pages 62 / 94
4 JavaScript Présentation Manipulation des éléments HTML 63 / 94
Présentation Intérêt de JavaScript augmenter l interactivité de l IHM en réduisant les échanges client-serveur objectifs: petites applications simples (calculette, calcul de devis..) amélioration de l aspect graphique de l interface (gestion fenêtres, modification d image au passage de la souris...) contrôle de la validité des saisies (champs obligatoires remplis, valeur saisie du bon type...) aide contextuelle, menus contextuels... 64 / 94
Présentation Accès à une page web avec JavaScript 65 / 94
Présentation JavaScript Généralités sur le langage rien à voir avec Java code intégré au texte HTML et interprété par le navigateur (donc exécuté sur le client) langage de programmation objet simple, programmation événementielle code visible, aucune sécurité JavaScript désactivable par l utilisateur code contenu dans une balise <script> 66 / 94
Présentation Insertion du code JavaScript Insertion du code dans l en-tête de préférence (notamment fonctions) dans le corps pour générer du HTML dynamique dans un événement d objet de la page Exemple de code dans le corps du document (w3schools) <!DOCTYPE html> <html> <body>... < s c r i p t> document. w r i t e ( <h1>c e c i e s t un t i t r e </h1> ) ; document. w r i t e ( <p>c e c i e s t un p a r a g r a p h e </p> ) ; </ s c r i p t>... </ body> </ html> 67 / 94
Présentation Définition de fonctions <script language= JavaScript > function nom fonction(paramètres) { //contenu fonction;... ; return(...); } </script> N.B. return pas obligatoire 68 / 94
Présentation Insertion du code dans l en-tête Exemple de code dans l en-tête du document (w3schools) <!DOCTYPE html> <html> <head> <script> function myfunction() { document.getelementbyid( demo ).innerhtml= Ma premiere fonction JavaScript ; } </script> </head> <body> <h1>ma page web</h1> <p id= demo >Un paragraphe</p> <button type= button onclick= myfunction() >Cliquez!</button> </body> </html> 69 / 94
Présentation Exemple JavaScript 70 / 94
Présentation Code JavaScript séparé code JavaScript stocké dans un fichier séparé nom de ce fichier dans l attribut src de la balise <script> <script src= scriptcontroles.js > code partagé, bibliothèque de fonctions, lisibilité 71 / 94
Manipulation des éléments HTML Possibilités Manipulation des éléments HTML Pour JavaScript, les différents éléments d une page HTML sont des objets que l on peut manipuler via: leurs propriétés (attributs) des méthodes de l objet (fonctions s exécutant avec les attributs de l objet) des événements associés à l objet 72 / 94
Manipulation des éléments HTML Hiérarchie d objets navigator informations sur le navigateur du client window propriétés et méthodes pour manipuler une fenêtre du navigateur history propriétés et méthodes pour manipuler l historique d une fenêtre frame propriétés et méthodes pour manipuler une frame d une fenêtre document propriétés et méthodes pour manipuler le document dans une fenêtre/frame (écrire dans le document...) location propriétés et méthodes pour traiter l url localisée dans une fenêtre forms propriétés et méthodes pour manipuler un formulaire element anchors links 73 / 94
Manipulation des éléments HTML Manipulation des objets, autres objets désignation de la propriété value d un élément text de nom ex Champ d un formulaire de nom ex Forme : document.ex Forme.ex Champ.value utilisation d une méthode d un objet document.writeln( output by JavaScript ); autres objets JS string, Math, Date objets définis par le programmeur 74 / 94
Manipulation des éléments HTML Gestion des événements Événements déclenchés auxquels on associe du code JS 5 catégories document (chargement nouvelle page, sortie ancienne page) (onload, onunload) form (interaction avec le formulaire) ancre (click sur le lien) element (statut des images associées à une page) fenêtre (quelle fenêtre est active) 75 / 94
Manipulation des éléments HTML Exemple: les liens (ancres) événements associés: onmouseover, onmouseout, onclick association code JavaScript et événement: <a href=... événement= fonctionjavascript(paramètre1, paramètre2,...) ou code JS >texte de l ancre</a> 76 / 94
Manipulation des éléments HTML Association événement-code Peut aussi être faite par programme <body onfocus= mafocusfonction(); onblur = mablurfonction(); > <script> window.document.onfocus = mafocusfonction; window.document.onblur = mablurfonction; </script> 77 / 94
Manipulation des éléments HTML Forms : objets, propriétés, méthodes (1) Objet propriétés méthode Prop.événement (Event Handler) form action, elements submit() onsubmit encoding, length method, target button name, value click() onclick checkbox checked click() onclick defaultchecked name, value 78 / 94
Manipulation des éléments HTML Forms : objets, propriétés, méthodes (2) Objet propriétés méthode Prop.événement (Event Handler) select name, length blur() onblur selectedindex focus() onfocus options(array) onchange - defaultselected - index - length - name - selected - selectedindex - text - value... hidden, password, radio, reset, submit, text, textarea 79 / 94
Manipulation des éléments HTML Exemple de page <html> <head><title> test balise input</title> <script> Function verifnum(valeur){ //vérification que la chaîne de caractères représentée par le //paramètre valeur ne contient que des caractères numériques for (var i=0; i<valeur.length; i++){ var caractere=valeur.substring(i, i+1); if (caractere < 0 caractere > 9 ) return false; } return true; } </script> <body> <form name= exemple > <input name= montant onchange= if (!verifnum(this.value)){alert ( ne saisissez que des chiffres! ); return false} > </form> </body> </html> 80 / 94
Manipulation des éléments HTML AJAX AJAX = Asynchronous JavaScript and XML client riche échange de données avec un serveur sans mise à jour de la page complète 81 / 94
Manipulation des éléments HTML Accès à une page web avec AJAX 82 / 94
Manipulation des éléments HTML Exemple d utilisation d AJAX Formulaire web sans: demande à l utilisateur de saisir des informations vérification de format avec JavaScript envoyer la page au serveur pour validation avec: validation des données entrées chargement à la volée d informations en fonction des entrées exemple: Google Suggest Exemple formulaire avec suggestions 83 / 94
Manipulation des éléments HTML Fonctionnement d Ajax 84 / 94
5 Sécurité Principes généraux Injection SQL Injection HTML 85 / 94
Principes généraux Sécurité et applications web Ne jamais faire confiance aux données envoyées par le client contrôler les données reçues (par GET ou par POST): tout ce qui est attendu est là les données reçues sont conformes à ce qui est attendu (type, bornes de validité, valeurs, jeu de caractères...) 86 / 94
Principes généraux Interdire la mise en cache Complétion de formulaires Page web header( Cache-Control : no-cache ); //HTTP/1.1 header( Expires: Thu, 01 Jan 1970 00:00:00 GMT ); 87 / 94
Injection SQL Injection SQL Exemple de code problématique <?php... $requete = SELECT nom, prenom, login FROM users WHERE login =.$ POST[ login ]. AND password =.$ POST[ password ]. ;... echo Bonjour $prenom, $nom!?> 88 / 94
Injection SQL Injection SQL (2) Requête SQL exécutée SELECT nom, prenom FROM users WHERE login = OR 1 = 1 AND password = bonjour paul dupond! (indépendamment du nom entré) 89 / 94
Injection SQL Injection SQL (3) Détournement de la clause DELETE <?php $requete = DELETE FROM user WHERE id =.$ POST[ id ]. ; ;?> saisie dans id: 1 OR id > 0 ; requête exécutée: DELETE FROM user WHERE id = 1 OR id > 0 ; destruction de tous les user! 90 / 94
Injection SQL Injection SQL (4) Protection contre les injections filtrer les entrées: taille, type... ne pas afficher d information en cas d erreur protéger avec la fonction addcslashes() string addcslashes ( string $str, string $charlist ) échapper les caractères:,, %, \x00 et \x1a <?php $chaine = %salut ; // Échappement des caractères % et $chaine = addcslashes($chaine, % ); echo $chaine; // Affiche \%salut\?>, caractère null (\0), /, \n, \r, 91 / 94
Injection HTML Injection HTML (faille XSS, cross-site scripting ) <html> <head> <title>injection HTML</title> </head> <body> <?php echo Salut, tu t appelles.$ POST[ pseudo ];?> </body> </html> saisie dans le champ pseudo: <i>smith</i> affichera : Salut, tu t appelles Smith saisie dans le champ pseudo: Smith<script src= http://sitepirate.com/injection.js > injection de code malveillant 92 / 94
Injection HTML Injection HTML (2) Filtrer les entrées, les nettoyer (utf decode, strip tags, filter *) Ne pas stocker des informations non vérifiées Préciser le jeu de caractères Protéger les sorties échapper les balises html dans le texte affiché (htmlspecialchars, htmlentities) <?php echo Salut, tu t appelles.htmlentities($ POST[ pseudo ], ent quotes);?> affichera : Salut, tu t appelles <i>smith</i> ou Smith<script src= http://sitepirate.com/injection.js > Les balises html sont justes restituées code source de la page: Smith<script src="http:// sitepirate.com/injection.js"/script > 93 / 94
Injection HTML Bibliographie W3schools : http://www.w3schools.com/ OpenClassrooms: http://openclassrooms.com Documentation PHP : hhttps://php.net/manual/fr/ 94 / 94