View - Download Partie 4

Previous PDF

Next PDF

Licence Math-Informatique 1èreannéeOlivier GlückUniversité LYON 1 / Département InformatiqueOlivier.Gluck@univ-lyon1.frhttp://perso.univ-lyon1.fr/olivier.gluck

Partie 4

Copyright

yCopyright © 2023 Olivier Glück; all rightsreservedyCe support de cours est soumis aux droits d'auteur et n'est donc pas dans le domaine public. Sa reproduction est cependant autorisée à condition de respecter les conditions suivantes : ySi ce document est reproduit pour les besoins personnels du reproducteur, toute forme de reproduction (totale ou partielle) est autorisée à la condition de citer l'auteur. ySi ce document est reproduit dans le but d'être distribué à des tierces personnes, il devra être reproduit dans son intégralité sans aucune modification. Cette notice de copyright devra donc être présente. De plus, il ne devra pas être vendu. yCependant, dans le seul cas d'un enseignement gratuit, une participation aux frais de reproduction pourra être demandée, mais elle ne pourra être supérieure au prix du papier et de l'encre composant le document. yToute reproduction sortant du cadre précisé ci-dessus est interdite sans accord préalable écrit de l'auteur. Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web2

Plan du cours

Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web3yCM1 : Internet, les réseaux et le webyCM2 : Pages HTML et feuilles de styles CSSyCM3 : Web interactif, formulaires, pages dynamiques et PHPyCM4 : Protocole HTTP, méthodes GET et POSTyCM5 : Les applications d'InternetyCM6 : La couche transport : les protocoles TCP et UDP yCM7 : Le protocole IPyCM8 : Les protocoles Ethernet, ARP et ICMP. Synthèse des échanges entre un client et serveur Web

CM4 : Protocole HTTP, méthodes GET et POST

Quelques rappelsLe protocole HTTPLa programmation CGIOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web4

Plan du CM4

yQuelques rappelsQu'est-ce que le web ? Format simple des URL, Le navigateur et le serveur web, Pages statiques et dynamiques, Interactions entre un navigateur et un serveur webyLe protocole HTTPUne transaction typique, Format des requêtes/réponses, Durée de vie des connexions, Cookies, Différentes versions de HTTP, Proxy et caches web, Les requêtes clientes : GET, POST et HEAD, Les réponses du serveur, Les en-têtes, les types MIMEyLa programmation CGIQu'est-ce que la programmation CGI ? Un premier exemple, Récupérer les données du formulaire avec GET/POST, Format URL encodé, Format de la sortie standard, Les variables d'environnementOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web5

Quelques rappels

Qu'est-ce que le web ?Format simple des URLLe navigateur et le serveur webPages statiques et dynamiquesInteractions entre un navigateur et un serveur webOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web6

Qu'est-ce que le web ? (1)

yUne application d'Internet qui permet le partage de documents liés entre eux et appelés "pages web"yUne page web peut contenir du texte, des images, des programmes, des liens vers d'autres pages web...yFonctionne en mode Client/Serveurau dessus de l'architecture TCP/IPOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web7NavigateurServeur ApacheWindowsModem ADSLLinuxEthernetLe WebHTTPInternetL'application est répartie sur le client et le serveur qui dialoguent selon un protocole applicatif spécifique

Qu'est-ce que le web ? (2)

yDes clients : les navigateurs qui font l'interface avec l'humain (Firefox, Internet Exploreur, Chrome, Safari...)yDes serveurs : ils hébergent les pages web et répondent aux demandes des clients (Apache, Microsoft IIS...)yLe web est né en 1994 avec la création du W3C (WWW Consortium) par le CERN et le MIT (Tim Berners-Lee président) qui s'occupe de la normalisation et des développements du webySa popularité est due à : yDes interfaces graphiques conviviales yUne très grande quantité d'informations très diversesOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web8

Qu'est-ce que le web ? (3)

yLe web repose sur 3 concepts :yL'URL: permet au client de désigner la page demandéeyUniform Ressource Locator : Comment ? Où ? Quoi ?Comment ?Où ?Quoi ?http://etu.univ-lyon1.fr/licence/lifasr2.htmlyHTTP: permet de définir le format et la signification des messages échangés entre le client et le serveur (protocole)yRequêteHTTP : du client vers le serveur, pour demander une page webyRéponseHTTP : du serveur vers le client, pour répondre au navigateuryHTML, CSS, PHP, Javascript... : les langages du webyHTML: permet de décrire le contenu d'une page web, interprété par le navigateur web pour afficher la page et demander les objets incorporésyCSS: permet de définir les styles de la page (format, couleurs, positions...)yPHP: permet d'exécuter un programme par le serveuryJavascript: permet d'exécuter un programme par le navigateur Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web9

Format d'une URL

proto://host_name:port/path?argumentsyla racine "/" de pathest définie par la configuration du serveur Web (Attention :à ne pas confondre avec la racine du système de fichiers sur le serveur)y/pathpeut contenir une étiquette (point d'ancrage)http://www.monsite.fr/projet/doc.html#labelyargumentspermettent de passer des informations à des programmes s'exécutant sur le serveurPar exemple, ?action-joueur=gauche dans le jeu 2048Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web10

Le navigateur web (1)

yAnalyse l'URL demandée et récupère le nom du serveuryDemande au DNS l'adresse IP de la machine serveuryEtablit une connexion TCP vers le numéro de port de l'URL (80 par défaut)yFabrique la requête HTTP et l'envoie au serveuryRéceptionne la réponse HTTP yInterprète le code HTML reçu : commandes de formatage et de mise en forme (police, gras, couleurs...) yDemande les objets incorporés au serveur et affiche la page correctement formatée yExécute les programmes Javascripts'il y en a Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web11

Le navigateur web (2)

yPour faire l'affichage de la page, il se base suryles valeurs par défaut du navigateur, yles préférences de l'utilisateur fixées dans le navigateur, yles valeurs fixées dans le document ou les feuilles de styles.yExemples : couleur des liens (visités ou non), du texte, fond de la page, polices...Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web12

Le serveur web

yIl est en permanence à l'écoute des requêtes formulées par les clients (qui peuvent être très nombreux !)yIl vérifie la validité de la requête...yLe document demandé peut ne pas existeryL'accès a un document peut être restreint (authentification possible)y... et y répond si la requête est valide : envoi du texte, des images, de la feuille de styles, du code à exécuter sur le client (Javascript). yIl peut renvoyer un message d'erreur, une demande d'authentification...yIl peut exécuter un programme localement (PHP) qui va générer une réponse HTML (page dynamique) en fonction des arguments transmis par le navigateur.Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web13

Pages statiques et dynamiques

yLe HTML ne permet pas d'interactivité avec l'utilisateuryLes pages visualisées sont "statiques"yPages statiquesyLa page visualisée N fois sur le même navigateur donnera toujours le même résultatyPages dynamiquesyLa page visualisée dépend des manipulations de l'utilisateuryElle est générée dynamiquement selon les actions de l'utilisateur dans la pageyNécessite de la programmation pour prendre en compte les actionsyProgrammation Web côté client : principalement JavascriptyProgrammation Web côté serveur : principalement PHPOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web14

Interactions navigateur/serveur web

Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web15

Navigateur

client

Serveur Web

Démon HTTP

1 demande du formulaire DD

Affichage du

formulaire 3 envoi du formulaire recherche de la page

HTML sur le disque

2 l'utilisateur remplit le formulaire 4

Formulaire

rempli 5 envoi des données du formulaire (soumission)

Serveur Web

Démon HTTP

Programme

CGI transmission des données au CGI / lancement de son exécution 6 SGBD exécution du CGI 7 requête à la SGBD 8

Serveur Web

Démon HTTP

réponse en HTML du

CGI renvoyée au démon

HTTP 9

Affichage de

la réponse 10 envoi de la page HTML résultat

Poste clientSite serveur

Le protocole HTTP

Une transaction typiqueFormat des requêtes/réponsesDurée de vie des connexions, CookiesDifférentes versions de HTTP, Proxy et caches webLes requêtes clientes : GET, POST et HEADLes réponses du serveurLes en-têtes, les types MIMEOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web16

Qu'est-ce que HTTP ?

yHTTP : Hyper TextTransfer ProtocolyProtocole régissant le dialogue entre des clients Web et un serveur (c'est le langage du Web !)yFonctionnement en mode Client/ServeuryUne transaction HTTP contientyle type de la requête ou de la réponse (commande HTTP)ydes en-têtesyune ligne videyun contenu (parfois vide)yTrès peu de type de requêtes/réponsesyPort standard côté serveur : 80Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web17

Format des requêtes/réponses

yFormat des requêtestype de la requête (METHOD, URL, version HTTP)en-têtes sur plusieurs lignesune ligne videun contenu éventuelyFormat des réponsesun code de réponse (version HTTP, code, description)en-têtes sur plusieurs lignesune ligne videle contenu de la réponseOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web18

Une transaction typique (1)

y1 -le client contacte le serveur pour demander le document index.htmlGET /~ogluck/index2.html HTTP/1.1y2 -le client envoie des informations d'en-tête pour informer le serveur de sa configuration et des documents qu'il accepteUser-Agent: Mozilla/4.0 (compatible;MSIE6.0;Windows NT 5.1)Host: www710.univ-lyon1.frAccept: image/gif, image/jpeg, */*y3 -le client envoie une ligne vide (fin de l'en-tête) et un contenu vide dans cet exempleOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web19

Une transaction typique (2)

y4 -le serveur répond en commençant par indiquer par un code, l'état de la requêteHTTP/1.1 200 OK y5 -le serveur envoie un en-tête qui donne des informations sur lui-même et le document demandéDate: Sun, 23 May 2004 17:46:01 GMTServer: Apache/1.3.28 (Debian GNU/Linux) PHP/3.0.18Last-Modified: Sun, 23 May 2004 17:42:12 GMTContent-Length: 90Content-Type: text/html; charset=iso-8859-1y6 -puis une ligne vide (fin de l'en-tête) et le contenu du document si la requête a réussiOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web20

Une transaction typique (3)

Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web21

Exemple1-index.html

Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web22 Bonjour Olivier ! Regarder avec Firebug"Réseaux»•le 404 Not foundpour style.css•le format des deux requêtes/réponses HTTP$ telnet localhost80GET /Sites/Exemples/CM4-HTTP/1-index.html HTTP/1.0

Exemple2-index.php

Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web23
Regarder la réponse avec Firebug"Réseaux» pour voir que le code PHP a disparu$ telnet localhost80GET /Sites/Exemples/CM4-HTTP/2-index.php HTTP/1.0

HTTP est un protocole sans état

yHTTP 1.0 (RFC 1945)ydès que le serveur a répondu à une requête, il ferme la connexion TCPyHTTP 1.1 (RFC 2068)ypar défaut, la connexion est maintenue tant que le serveur ou le client ne décide pas de la fermer (Connection: close)yHTTP est un protocole sans étatyaucune information n'est conservée entre deux requêtes successives : les requêtes sont indépendantes les unes des autresypermet au serveur HTTP de servir plus de clients en un temps donné (gestion légère des transactions)ypour conserver des informations entre deux requêtes, il faut utiliser un cookie, des champs cachés d'un formulaire, ... Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web24

Utilisation d'un champ HIDDEN

yUn champ de type HIDDEN permet de propager une variable d'une page à une autre.ySouvent on propage un identifiant, un login, ...yPar exemple, on aurait pu utiliser pour transmettre le score du jeu 2048 entre deux actions de jeu plutôt que de le stocker dans le fichier score.txtsur le serveur.Pour récupérer la valeur du score au début du programme PHP : $score = $_GET['score']; // $score contient 1024, l'ancien score$score = $score + 8; // nouveau score : deux 4 ont fusionnéPour propager la nouvelle valeur du score vers la page suivante :echo'';Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web25

Qu'est-ce qu'un cookie ?

yC'est un moyen pour le serveur de stocker des informations dans le navigateur client pour palier au caractère sans état du protocole HTTPyUn cookie est une chaîne de caractères url-encodée de 4ko maximum stockée sur le disque dur du clientyUn cookie stocke des informations associées à un ensemble d'URL qui sont envoyées lors de chaque requête vers l'une de ces URLyLes cookiespermettent deydonner un identifiant au client (permet par exemple au serveur de ne pas compter deux fois le même navigateur pour un comptage du nombre de visites sur le site)ypropager un code d'accès (évite une authentification lors de chaque requête)ypropager une identification dans une base de donnéesypropager l'identifiant d'une session PHPOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web26

Installation d'un cookie sur le client

yDirective Set-Cookie dans l'en-tête de la réponse HTTP (envoyé lors de la première connexion)Set-Cookie: nom=valeur; expires=date; path=chemin_accès; domain=nom_domaine; secureyle couple nom/valeur est le contenu du cookie (seul champ obligatoire), sans espace ; et ,yle cookie devient invalide après la date indiquéeypath=/pubsignifie que le cookie est valable pour toutes les requêtes dont l'URL contient /pubydomainindique le nom de domaine (associé au serveur) pour lequel le cookie est valableysecure: le cookie n'est valable que lors d'une connexion sécuriséeOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web27

Utilisation d'un cookie par le client

yChaque fois qu'un client va effectuer une requête, il vérifie dans sa liste de cookiess'il y en a un qui est associé à cette requêteySi c'est le cas, le client utilise la directive Cookie dans l'en-tête de la requête HTTPCookie: nom1=valeur1; nom2=valeur2; ... yLe serveur peut insérer plusieurs directives Set-CookieyDans la première spécification des cookies:yun client peut stocker un maximum de 300 cookiesyun maximum de 20 cookiespar domaine est permisyla taille d'un cookieest limitée à 4KoOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web28

Différentes versions du protocole HTTP

yVersion d'origine : HTTP 0.9yUne seule méthode : GETyPas d'en-têteyUne requête = une connexion TCPyAmélioration en deux étapesyHTTP 1.0 : yIntroduction des en-têtes pour échanger des métadonnéesentre le navigateur et le serveur webyNouvelles fonctionnalités : utilisation de caches, méthodes d'authentification (.htaccess)... yHTTP 1.1 :yMode connexions persistantespar défautyIntroduction des serveurs virtuels -> l'en-tête Hostest obligatoire dans la requêteOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web29

Intérêt des connexions persistantes

Exemple d'une page HTML contenant 1 feuille de styles et 2 images :Avec HTTP 0.9, trois connexions/déconnexions TCP/IPAvec HTTP 1.1, une seule connexion TCP/IPLes connexions persistantes améliorent les performances.30SYN TCPSYN-ACK TCPACK TCPReqHTTPindex.htmlReqHTTPstyles.cssReqHTTPimg1.jpegReqHTTPimg2.jpegSYN TCPSYN-ACK TCPACK TCPReqHTTPindex.htmlFIN TCPACK-FIN TCPSYN TCPSYN-ACK TCPACK TCPReqHTTPstyles.cssFIN TCPACK-FIN TCPFIN TCPACK-FIN TCPetc...Laquelle est persistante ?

Intérêt d'un cache Web

Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web31ServeursWebInternetRéseau local100 Mbps LAN1.5 Mbps access linkServeurProxyyLes pages qui sont demandées plusieurs fois sont conservées dans un cache.ySoulage le réseau car permet de ne pas redemander au serveur une page qui est déjà dans le cache.yL'accès a une page déjà dans le cache est plus rapide.yLe cache peut être dans le navigateur ou sur un serveur relais (proxy) présent dans le réseau local de l'entreprise.yLe cache améliore les performances.

Qu'est-ce qu'un proxy Web ?

Le proxy sert de cache. Il permet aussi de filtrer toutes les requêtes/réponses qui rentrent et sortent de l'organisationLes filtres peuvent se faire sur des mots-clés présents dans l'URL ou dans le contenu des pages web.Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web32Client WebHTTPCacheProxy WebCacheHTTPServeur Web

Les requêtes HTTP faites par le client

yFormat d'une requête HTTP (du client vers le serveur)yune commande HTTP (METHOD), une URL qui identifie la ressource demandée, la version de HTTP yl'en-tête et une ligne videyéventuellement un contenu (corps de la requête)yMéthode GETyMéthode POSTyMéthode HEADyD'autres méthodes qui ne sont pas souvent supportées par les serveursOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web33

La méthode GET

yLa méthode standard de requête d'un documentyPermet de récupérer un fichier HTML, une image, une feuille de styles, un fichier pdf...yPermet d'activer l'exécution d'un script PHP en lui transmettant des données en provenance d'un formulaireyAvec GET, le contenu de la requête est toujours videyLe serveur répond avec une ligne décrivant l'état de la requête, un en-tête et le contenu demandéySi la requête échoue, le contenu de la réponse décrit la raison de l'échec (fichier non présent, non autorisé, ...)Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web34

Transmission des paramètres avec GET

yComme le contenu d'une requête GET est vide, les données du formulaire sont transmises via l'URL après un ?yLes champs sont séparés par un &GET /cgi-bin/prog.php?email=toto@site.fr&pass=toto&s=login HTTP/1.1yIci, trois champs du formulaire sont transmis dans la requête : email, passet syAttention : le mot de passe est transmis en clair !yPermet de conserver l'URL dans un favoriavec les données saisies dans le formulaireyL'URL a une taille limitée qui dépend du navigateur et du serveur (conseillé de ne pas dépasser 2000 caractères)Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web35

La méthode POST

yElle permet de transmettre des données au serveur dans le corps/contenu de la requêteyExemplePOST/cgi-bin/prog.phpHTTP/1.1User-Agent: Mozilla/4.0 (compatible;MSIE6.0;Windows NT 5.1)Host: localhostAccept: */*Content-type: application/x-www-form-urlencodedContent-length: 36email=toto@site.fr&pass=toto&s=loginyLe mot de passe est toujours transmis en clair !Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web36

La méthode HEAD (1)

yIdentique à GETmais permet uniquement de récupérer les en-têtes relatifs à un documentyPermet de récupéreryla date de dernière modification du document (important pour les caches, JavaScript)yla taille du document (estimation du temps d'arrivée du document)yle type du document (le client peut sélectionner le type de documents qu'il accepte)yle type du serveur (permet de faire des requêtes spécifiques selon le type du serveur)yRemarque : le serveur ne fournit pas nécessairement toutes ces informations !Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web37

La méthode HEAD (2)

Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web38

Autres requêtes HTTP

yPUT : permet de stocker le corps de la requête sur le serveur à l'URL spécifiéeyDELETE : suppression du document spécifié par l'URLyOPTIONS : renvoie la liste des méthodes autorisées par le serveuryTRACE : la corps de la requête entrante est renvoyée au client (utilisé pour faire du débug)y... Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web39

Les réponses HTTP renvoyées par le serveur

yUne réponse contient trois éléments sur la 1èreligne :version HTTP, code de statut, description textuelle du codeHTTP/1.1 200 OKHTTP/1.1 404 Not FoundyLe code est un entier sur 3 chiffres classé selon des catégories100-199 : message d'information200-299 : succès de la requête cliente300-399 : la requête n'est pas directement serviable, le client doit préciser certaines choses400-499 : échec de la requête qui incombe au client500-599 : échec de la requête qui incombe au serveur (par ex. erreur d'exécution d'un programme sur le serveur)Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web40

Quelques en-têtes de requêtes

yIdentification du clientFrom(adresse mail du client), Host (serveur, obligatoire en HTTP1.1), Referer(URL d'où l'on vient), User-AgentyPréférences du clientAccept(liste des types MIME acceptés), Accept-Encoding(compress|gzip|...), Accept-Langage, Accept-CharsetyInformation pour le serveurAutorization(username:passwdencodé en base64), CookieyConditions sur la réponseIf-Modified-Since(utile pour les caches), If-Unmodified-Since, If-Match (Etag)Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web41

L'en-tête If-Modified-Since

yObjectif : ne pas envoyer un objet que le client a déjà dans son cache yProblème : les objets contenus dans le cache peuvent être obsolètesyLe client spécifie la date de la copie cachée dans la requête httpIf-modified-since: yLa réponse du serveur est vide si la copie du cache est à jourOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web42ClientServeurRequête httpIf-modified-since: Réponse http HTTP/1.1 304 Not Modifiedobjet nonmodifiéRequête httpIf-modified-since: Réponse http HTTP/1.1 200 OK...objet modifié

Quelques en-têtes de réponses

yInformations sur le contenu du documentContent-Type (type MIME du document), Content-Length(barre de progression du chargement),Content-Encoding, Content-Location, Content-LangageyInformations sur le documentLast-Modified(date de dernière modification), Allow(méthodes autorisées pour ce document), Expires(date d'expiration du document)yEn-tête généralesDate(date de la requête), Server(type du serveur)Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web43

Les types MIME

yMIME : Multi-purposeInternet Mail ExtensionsyPermet l'échange de fichiers multimédias entre machines quelconques en spécifiant le type du fichieryLes commandes MIME ont été intégrées dans HTTP1.0yUn type MIME est composé yd'un type général (text, image, audio, video, application...) yet d'un sous-type (image/gif, image/jpeg, application/pdf, application/rtf, text/plain, text/html) yEn perpétuelle évolutionyLa machine cliente doit ensuite associer l'exécution d'une application à chaque type MIMEyLe serveur positionne Content-type à partir de l'extension du document demandé (/etc/mime.types)Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web44

La programmation CGI

Qu'est-ce que la programmation CGI ?Un premier exemple Récupérer les données du formulaire avec GET/POSTFormat URL encodéFormat de la sortie standardLes variables d'environnementOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web45

CGI -Common Gateway Interface

yInterface de base qui définit la communication entre le serveur HTTP et un programme d'applicationyCGI spécifie comment des navigateurs clients peuvent communiquer avec des programmes qui s'exécutent sur le serveur Web et qui génèrent des pages HTML dynamiques créées à la volée à partir du résultat des exécutionsOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web46

Qu'est ce qu'un programme CGI ?

yUn programmeyqui s'exécute sur la machine hébergeant le serveur HTTPyen langage compilé (binaire) ou interprété (script)yqui permet deyrécupérer les données du formulaire à l'aide d'un parser: pour chaque champ, un couple NAME/VALUE est transmis au serveuryeffectuer des traitements sur le serveur•lecture/écriture dans une base de données•stockage d'une info (compteurs, identifiant de connexion, ...)•recherche d'une info•pied de page automatique (ex : date de dernière modification)ygénérer un résultat qui est renvoyé au client•page HTML, image, document postcript, ... Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web47

Avantages/inconvénients

yPuissant mais dangereuxyPermet d'exécuter tout et n'importe quoi par le démon HTTP du serveuryUn CGI doit s'exécuter rapidementyRisque de surcharge du serveuryUtilisateurs impatients : pendant que le CGI s'exécute, le client attend la réponse sans savoir pourquoi elle n'arrive pas...yPossibilité d'envoyer dès le début de l'exécution une page qui permet d'indiquer à l'utilisateur que le résultat va arriver (transfert par morceaux en HTTP 1.1)Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web48

Un premier exemple (1)

Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web49#! /bin/sh# Date.cgiecho'Content-type: text/html'echo' '#Création du corps du documentecho''echo'

Date sur le serveur

'echo-n "On est le `date +%D`, il est "echo"`date +%H`h`date +%M`m" echo''ogluck@lima:~/public_html/cgi-bin$ ./Date.cgiContent-type: text/html

Date sur le serveur

On est le 11/07/03, il est 11h 30mSource du programme CGIExécution du CGI sur le serveur

Un premier exemple (2)

Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web50Exécution du CGI depuis le client

Un premier exemple (3)

yCe programme CGI n'utilise aucune donnée en provenance du clientyIl récupère simplement la date sur le serveur et affiche sur sa sortie standardle code d'une page HTML minimale contenant la date et l'heureyLa ligne "Content-type: text/html" est une information destinée au serveur pour la construction de l'en-tête HTTP constituant la réponse renvoyée au client (ici, il s'agit d'indiquer que le type des données générées par le CGI est une suite de commandes HTML)Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web51

Méthodes GET/POST (1)

yVoici le code d'un petit script CGI en shell#! /bin/sh# Get_Post.cgiecho'Content-type: text/plain'echo' 'echo"QS=$QUERY_STRING"readDATAecho"Data=$DATA"yLes résultats de l'exécution avec la méthode GET puis POST sont montrés dans les deux transparents suivantsOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web52

Méthodes GET/POST (2)

Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web53

Méthodes GET/POST (3)

Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web54

Méthodes GET/POST (4)

yAvec la méthode GETyles données relatives aux champs du formulaire sont transmises via l'URL (dans le type de la requête)yle programme CGI les récupère dans la variable d'environnement QUERY_STRINGyil est possible de cliquer sur "Actualiser" pour retransmettre les données et de définir un bookmarkyAvec la méthode POSTyles données relatives aux champs du formulaire sont transmises dans le corps de la requête HTTPyContent-typeet Content-lengthsont positionnésyle programme CGI les récupère sur l'entrée standardy"Actualiser" et bookmarkimpossibles, données du formulaire non visibles dans les logs du serveur Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web55

Méthodes GET/POST (5)

Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web56Méthode GETMéthode POSTFormulaireMéthode POST et "Actualiser"

Récupérer les données du formulaire

yFormat de la chaîne CGInom_champ1=valeur1&nom_champ2=valeur2&...yCas des champs à valeurs multiplesyexemple : listes à sélection multiplesnom_liste=valeur1&nom_liste=valeur2&...yLa chaîne CGI yelle est construite par le client au format URL-encodedquand la requête est postéeyelle est transmise au CGI tel quel via la variable d'environnement QUERY_STRINGavec la méthode GETyelle est transmise au CGI tel quel via l'entrée standard avec la méthode POSTyen PHP, $_GET['nom_champ1'] ou $_POST['nom_champ1']contient la valeur du champOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web57

Format URL encodé

yNécessité de coder les données de l'URL (méthode GET) sur le client pour construire la chaîne CGI pour respecter la RFC 2396 qui spécifie la syntaxe des URLyLes caractères non-alphanumériques sont remplacés par %xx (xx=code ASCII du caractère en hexadécimal)yLes caractères ; / ? : @ & = + $et ,sont réservés pour une signification particulière dans l'URLy?: début de QUERY_STRINGy& : séparateur de champy=: séparation entre le nom du champ et sa valeuryLes espaces sont remplacés par des +Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web58

Exemple3-compteur-get.php

Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web59

';echo "Le compteurvaut$cpt.\n";?>

Regarder la réponse avec FirebugChanger la valeur dans l'URL$ telnet localhost80GET /Sites/Exemples/CM4-HTTP/3-compteur-get.php?compteur=5&action=%2B1 HTTP/1.0

Exemple3-compteur-post.php

Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web60

';echo "Le compteurvaut$cpt.\n";?>

Regarder avec Firebugles en-têtes et la réponse après +1$ telnet localhost80POST /Sites/Exemples/CM4-HTTP/3-compteur-post.php HTTP/1.0Content-Type: application/x-www-form-urlencodedContent-Length: 22compteur=3&action=%2B1

Exemple4-form.html

Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web61

HTML JSCGI
HTML JSCGI


Entrezvosremarquesici1 2 31 2 3 4

Regarder avec Firebugce qui est transmis

Exemple4-form.html

Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web62

Pour afficher tous les champs du formulaire

// afficher la chaîne CGI en méthode GETecho$_SERVER['QUERY_STRING'];echo"
";// afficher tous les champs transmis en méthode GETforeach($_GET as $name=> $value) {echo"$name= $value
\n"; }// afficher tous les champs transmis en méthode POSTforeach($_POST as $name=> $value) {echo"$name= $value
\n"; }Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web63Voir 4-form.php

Format de la sortie standard d'un CGI

yEn-tête, ligne vide, CorpsContent-type: type/subtype(type MIME du corps)Window-target: _blank(fenêtre de réception du résultat)Location: URL(redirection vers une autre URL)Status: code msg(code de la réponse HTTP)...yLocation doit être utilisé seul -peut être utile par exemple pour utiliser un moteur de recherche existantyEn-tête minimale : Content-typeyLes autres en-têtes sont ajoutées par le serveur WebOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web64

Les variables d'environnement (1)

yElles sont positionnées par le serveur HTTP pour fournir au CGI des infos sur le serveur, le client, ...SERVER_SOFTWARE : nom/versionnom et version du démon HTTPSERVER_NAME : nomnom ou adresse IP de la machine serveur HTTPGATEWAY_INTERFACE : CGI/version (CGI/1.1)version des spécifications CGI utilisées par le serveur SERVER_PROTOCOL : protocole/version (HTTP/1.1)protocole et version de la requête en cours de traitementSERVER_PORT : portnuméro du port (TCP) vers lequel la requête a été envoyéeOlivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web66

Les variables d'environnement (2)

REQUEST_METHOD : method(GET/POST/...)méthode associée à la requête en cours de traitementSCRIPT_NAME : nom (/cgi-bin/mon_cgi.cgi)chemin du CGI à partir de la racine du serveur HTTPREMOTE_HOST : nomnom de la machine d'où vient la requête REMOTE_ADDR : adresse_IPadresse IP de la machine d'où vient la requêteAUTH_TYPE : authentificationméthode d'authentification de l'utilisateur s'il y a lieuREMOTE_USER : loginsi authentification, nom de l'utilisateur associé à la requêteREMOTE_IDENT : login_oslogin de connexion de l'utilisateur (pas souvent supporté)Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web67

Les variables d'environnement (3)

CONTENT_TYPE : type/subtype(application/x-www-form-urlencoded)type MIME des données véhiculées dans la requêteCONTENT_LENGTH : lg (en octets)longueur des données véhiculées dans la requête (POST)PATH_INFO : pathchaîne entre SCRIPT_PATH et QUERY_STRING dans l'URLQUERY_STRING : nom1=val1&nom2=val2... données transmises au CGI via l'URL (GET)pour afficher la chaîne :echo$_SERVER['QUERY_STRING'];HTTP_XXX(une variable pour chaque champ contenu dans l'en-tête HTTP de la requête)HTTP_ACCEPT, HTTP_USER_AGENT, ...Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web68

Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web69

Quel(s) formulaire(s) pour le réseau social ?

Olivier GlückL1 Math-info UCBL -LIFASR2 : Introduction aux réseaux et au web70quotesdbs_dbs23.pdfusesText_29

[PDF] Architecture Traditionnelle Méditerranéenne Méthode RehabiMed

[PDF] La fabrication de l architecture en Tunisie indépendante : une

[PDF] l 'architecture traditionnelle en tunisie : l 'habitat rural - RehabiMed

[PDF] Etude d une architecture IP intégrant un lien satellite - OATAO

[PDF] Les règles de classement et d 'archivage des documents d 'entreprise

[PDF] LES RECHERCHES CONCERNANT L ALGERIE - Archives nationales

[PDF] métiers de l 'audiovisuel et du cinéma information et communication

[PDF] LES RECHERCHES CONCERNANT L ALGERIE - Archives nationales

[PDF] Archives Nationales d 'Algérie - FranceArchives

[PDF] isdiah - UdG

[PDF] Les montagnes françaises 1) Les différents massifs montagneux

[PDF] Arduino Sample Code - Atlas Scientific

[PDF] PROGRAMMATION ARDUINO

[PDF] Initiation ? la mise en oeuvre matérielle et logicielle de l 'Arduino

[PDF] Arduino Programming Notebook - pdf - Arduino Playground