11:00:56 Programmation Web 2012-2013 1 Programmation Web : Protocole HTTP Jérôme CUTRONA...

03:24:5103:24:51 Programmation Web 2012-2013Programmation Web 2012-2013 11

Programmation Web :Programmation Web :Protocole HTTPProtocole HTTP

Jérôme CUTRONAJérôme CUTRONA

[email protected]@univ-reims.fr

2203:24:5103:24:51 Programmation Web 2012-2013Programmation Web 2012-2013

IntroductionIntroduction

HTTP : HTTP : HHyperyperTText ext TTransfer ransfer PProtocolrotocol HTTP : Protocole du WebHTTP : Protocole du Web Protocole d'échange entre client et serveur WebProtocole d'échange entre client et serveur Web Protocole orienté ligne de caractèresProtocole orienté ligne de caractères

Dans notre cas :Dans notre cas : Étude du protocole pour la cultureÉtude du protocole pour la culture (ça rime avec torture)(ça rime avec torture)

Compréhension des cookiesCompréhension des cookies Compréhension des sessionsCompréhension des sessions Utilisation avancée de PHP (côté serveur)Utilisation avancée de PHP (côté serveur) Utilisation d’AJAXUtilisation d’AJAX


RéseauRéseauRéseauRéseau

Utilisation de HTTP/1.0Utilisation de HTTP/1.0

Client WebClient Web(Navigateur)(Navigateur)Client WebClient Web

(Navigateur)(Navigateur)Serveur WebServeur Web

(Apache)(Apache)Serveur WebServeur Web

(Apache)(Apache)

Requête HTTPRequête HTTPRequête HTTPRequête HTTP

Réponse HTTPRéponse HTTPFermeture de connexionFermeture de connexion

Réponse HTTPRéponse HTTPFermeture de connexionFermeture de connexion

Connexion TCP (port 80)Connexion TCP (port 80)Connexion TCP (port 80)Connexion TCP (port 80)

Validation de la connexionValidation de la connexionValidation de la connexionValidation de la connexion


RéseauRéseauRéseauRéseau

Utilisation de HTTP/1.0Utilisation de HTTP/1.0

Client WebClient Web(Navigateur)(Navigateur)Client WebClient Web

(Navigateur)(Navigateur)Serveur WebServeur Web

(Apache)(Apache)Serveur WebServeur Web

(Apache)(Apache)

Requête HTTPRequête HTTPRéponse HTTPRéponse HTTPÉtablissement d’uneÉtablissement d’uneconnexion TCP (port 80)connexion TCP (port 80)Désire desDésire desressourcesressources

Possède desPossède desressourcesressources

As-tu / ?As-tu / ?

RessourcesRessources

Fermeture de connexionFermeture de connexion

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><<htmlhtml>> <<headhead>> <<metameta http-equivhttp-equiv=="Content-Type""Content-Type" contentcontent=="text/html; charset=utf-8""text/html; charset=utf-8">> <<linklink hrefhref=="css/style.css""css/style.css" relrel=="stylesheet""stylesheet" typetype=="text/css""text/css">> <<titletitle>>J. CutronaJ. Cutrona</</titletitle>> </</headhead>> <<bodybody>><<divdiv idid=='b_connexion''b_connexion'>><<formform actionaction=='/index.php''/index.php' methodmethod=='post''post'>><<tabletable>><<trtr><><tdtd><><inputinput typetype=='text''text' namename=='login''login' sizesize=='5''5' valuevalue=='login''login' onClick="onClick="ifif ((thisthis.value==.value=='login''login')) thisthis.value=.value=''''"">> <<inputinput typetype=='password''password' namename=='passwd''passwd' sizesize=='5''5'>><<tdtd><><inputinput typetype=='submit''submit' valuevalue=='OK''OK'>></</tabletable>></</formform>></</divdiv>> <<h1h1>>Programmation WebProgrammation Web</</h1h1>> <<divdiv classclass=='partie''partie'>> <<aa hrefhref=='progwebS1''progwebS1'>>Programmation Web S1Programmation Web S1</</aa><><brbr>> <<aa hrefhref=='progwebS2''progwebS2'>>Programmation Web S2Programmation Web S2</</aa><><brbr>> <<aa hrefhref=='progwebS3''progwebS3'>>Programmation Web S3Programmation Web S3</</aa><><brbr>> </</divdiv>> <<spanspan idid=='lastmodified''lastmodified'>>Dernière modification de cette page le 07/09/2008 à 23h27 Dernière modification de cette page le 07/09/2008 à 23h27 </</spanspan>> <<divdiv classclass=='valid''valid'>> <<aa hrefhref==''http://wwwdoc/w3c-validator/check?uri=referer''>> <<imgimg borderborder=="0""0" srcsrc=="/img/valid-html401.gif""/img/valid-html401.gif" altalt=="Valid HTML 4.01!""Valid HTML 4.01!" heightheight=="31""31" widthwidth=="88""88"></></aa>> <<imgimg borderborder=="0""0" srcsrc=="/img/vcss.gif""/img/vcss.gif" altalt=="Valid CSS!""Valid CSS!" heightheight=="31""31" widthwidth=="88""88">> </</divdiv>> </</bodybody>></</htmlhtml>>

FichierFichier//

OuiOui<!DOCTYPE html PUBLIC… <!DOCTYPE html PUBLIC… <html> <html> <head><head>

……</html></html>

http://wwwdoc/w3c-validator/check?uri=referer


Remarques importantesRemarques importantes

Le Le client ouvreclient ouvre la connexion la connexion Le Le serveur fermeserveur ferme la connexion la connexion

1 transaction = 1 ressource transférée (v 1.0)1 transaction = 1 ressource transférée (v 1.0) Protocole sans étatProtocole sans état

Aucune information gardée entre deux transactionsAucune information gardée entre deux transactions Le serveur "oublie" le client après chaque transactionLe serveur "oublie" le client après chaque transaction

Problème pour la gestion d'une sessionProblème pour la gestion d'une session


Autres remarques importantesAutres remarques importantes

Le client demande des ressourcesLe client demande des ressources Le serveur répond aux demandes des clients :Le serveur répond aux demandes des clients :

Délivre la ressource demandée si possibleDélivre la ressource demandée si possible Informe de la raison de non remiseInforme de la raison de non remise

Echanges multi-plateformeEchanges multi-plateforme

ASCII 7bits (encodage si non ASCII 7bits)ASCII 7bits (encodage si non ASCII 7bits)

Requêtes émises en clairRequêtes émises en clair Réponses émises en clairRéponses émises en clair


Structure d'un message HTTPStructure d'un message HTTP

Orienté lignes de caractères :Orienté lignes de caractères : = retour à la ligne= retour à la ligne

Requête ou réponse :Requête ou réponse :Requête ou état Requête ou état [Entête: valeur [Entête: valeur ]][Entête: valeur [Entête: valeur ]][… [… ]]Ligne blanche Ligne blanche [Corps de message][Corps de message]

HTTP 1.0: 16 en-têtesHTTP 1.0: 16 en-têtesHTTP 1.1: 46 en-têtesHTTP 1.1: 46 en-têtes


Requête HTTP 1.0Requête HTTP 1.0

GET|POST|HEAD GET|POST|HEAD cheminchemin HTTP/1.0 HTTP/1.0

User-Agent: User-Agent: agent agent [Entête: valeur [Entête: valeur ]]

[Entête: valeur [Entête: valeur ]]

[… [… ]]

Ligne blanche Ligne blanche [Données][Données]

NetiquetteNetiquette


Méthodes de requête HTTPMéthodes de requête HTTP

HEADHEADdemande des informations concernant la ressourcedemande des informations concernant la ressource

GETGETdemande des informations et la ressource désignéedemande des informations et la ressource désignée

POSTPOSTenvoi de données (formulaire vers le serveur) et envoi de données (formulaire vers le serveur) et

demande la ressource désignéedemande la ressource désignée

PUTPUTenregistrement du corps de la requête à l ’URL indiquéeenregistrement du corps de la requête à l ’URL indiquée

DELETEDELETEsuppression de la ressource désignée par l ’URLsuppression de la ressource désignée par l ’URL


Exemple de requête HTTPExemple de requête HTTP

GET / HTTP/1.0 GET / HTTP/1.0 Ligne blanche Ligne blanche

HEAD /page1.html HTTP/1.0 HEAD /page1.html HTTP/1.0 User-Agent: Mozilla/5.0 (Windows; U; User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.7) Windows NT 5.1; en-US; rv:1.7.7) Gecko/20050414 Firefox/1.0.3 Gecko/20050414 Firefox/1.0.3

Ligne blanche Ligne blanche


Réponse HTTPRéponse HTTP

HTTP/HTTP/versionversion codecode phrase phrase Content-Type: Content-Type: type_mime type_mime [Entête: valeur [Entête: valeur ]]

[Entête: valeur [Entête: valeur ]]

[… [… ]]


ObligatoireObligatoire

Le client doit être informé de Le client doit être informé de la la nature de la ressourcenature de la ressource : :

HTMLHTMLImage JPEGImage JPEGDoc PDFDoc PDFAnimation FlashAnimation Flash……

Exemples de Exemples de type_mimetype_mime : :•text/htmltext/html•image/jpegimage/jpeg•text/csstext/css•video/mpegvideo/mpeg•……


Exemple de réponse HTTPExemple de réponse HTTP

HTTP/1.x 200 OK HTTP/1.x 200 OK Date: Mon, 25 Apr 2005 04:25:17 GMT Date: Mon, 25 Apr 2005 04:25:17 GMT Server: Apache/2.0.46 (Red Hat) Server: Apache/2.0.46 (Red Hat) X-Powered-By: PHP/4.3.2 X-Powered-By: PHP/4.3.2 Content-Type: text/html Content-Type: text/html Ligne blanche Ligne blanche <html><html>

<head><title> ...<head><title> ...


États des réponses HTTPÉtats des réponses HTTP

Codes à 3 chiffres + phraseCodes à 3 chiffres + phrase 1er chiffre : classe de réponse1er chiffre : classe de réponse

1xx1xx : Information (HTTP 1.1) : Information (HTTP 1.1) 2xx2xx : Succès : Succès

200 OK200 OK 3xx3xx : Redirection : Redirection

304 NOT MODIFIED304 NOT MODIFIED 4xx4xx : Erreur client : Erreur client

403 FORBIDDEN403 FORBIDDEN 404 NOT FOUND404 NOT FOUND

5xx5xx : Erreur serveur : Erreur serveur 500 INTERNAL ERROR500 INTERNAL ERROR


Protocole HTTP 1.1Protocole HTTP 1.1

Contexte HTTP 1.0 :Contexte HTTP 1.0 : 1 transaction1 transaction = = 1 ressource1 ressource transmise transmise PasPas de connexion de connexion persistantepersistante Mauvaise utilisation Mauvaise utilisation du cachedu cache 1 IP1 IP = = 1 serveur1 serveur Web Web

Améliorations HTTP 1.1 :Améliorations HTTP 1.1 : 1 transaction1 transaction persistante = persistante = XX ressources ressources transmises transmises Connexion Connexion persistantepersistante StandardisationStandardisation du cache du cache Découpage d'une ressource (chunk encoding)Découpage d'une ressource (chunk encoding) 1 IP1 IP = = XX serveurs serveurs Web (proxy, serveurs virtuels) Web (proxy, serveurs virtuels)


Protocole HTTP 1.1Protocole HTTP 1.1

Contraintes du client :Contraintes du client : inclure l'en-tête inclure l'en-tête HostHost:: à chacune des requêtes. à chacune des requêtes.

Le serveur physique doit savoir quel serveur virtuel Le serveur physique doit savoir quel serveur virtuel interrogerinterroger

accepter des réponses avec des données encodées accepter des réponses avec des données encodées de type de type chunkedchunked

supporter les connections persistantes, ou inclure supporter les connections persistantes, ou inclure l'en-tête l'en-tête ConnectionConnection: : closeclose à chacune des à chacune des requêtesrequêtes

supporter la réponse supporter la réponse 100100 ContinueContinue


Requête HTTP 1.1Requête HTTP 1.1

GET|POST|HEAD GET|POST|HEAD cheminchemin HTTP/1.1 HTTP/1.1 Host: Host: hôte hôte User-Agent: User-Agent: agent agent [header [header ]]

[header [header ]]

[… [… ]]


ObligatoireObligatoire

NetiquetteNetiquette


Soumission de formulairesSoumission de formulaires

<form action="form.php" <form action="form.php" method="GET"method="GET">>

Requête HTTP :Requête HTTP :

GET form.php?GET form.php?p1=X&p2=Yp1=X&p2=Y HTTP/1.0 HTTP/1.0 LigneLigne blanche blanche

Traduit dans l'URL : Traduit dans l'URL : http://abc/form.phphttp://abc/form.php?p1=X&p2=Y?p1=X&p2=Y

Peut donc être mis en favoriPeut donc être mis en favori

Valeurs saisies dans le formulaire :Valeurs saisies dans le formulaire :Couples Couples nom_champ=valeur_encodéenom_champ=valeur_encodée séparés séparés par par &&


Soumission de formulairesSoumission de formulaires

<form action="form.php" <form action="form.php" method="POST"method="POST">>

Requête HTTP :Requête HTTP :

POST POST form.phpform.php HTTP/1.0 HTTP/1.0

Content-Type:Content-Type: application/x-www-form-urlencoded application/x-www-form-urlencoded Content-Length: 9 Content-Length: 9 LigneLigne blanche blanche p1=X&p2=Yp1=X&p2=Y

NON traduit dans l'URLNON traduit dans l'URL

Ne peut donc PAS être mis en favoriNe peut donc PAS être mis en favori

Valeurs saisies dans le formulaire :Valeurs saisies dans le formulaire :Couples Couples nom_champ=valeur_encodéenom_champ=valeur_encodée séparés séparés par par &&


Encodage des donnéesEncodage des données

Protocole HTTP : ASCII 7bits (base commune à toutes Protocole HTTP : ASCII 7bits (base commune à toutes les plateformes)les plateformes)

Tout caractère non ASCII 7bits doit être encodéTout caractère non ASCII 7bits doit être encodé saisies dans les formulaires (fait par le navigateur)saisies dans les formulaires (fait par le navigateur) URL (à faire soi-même)URL (à faire soi-même)

Principe d’encodage :Principe d’encodage : EspaceEspace ++ Caractères spéciauxCaractères spéciaux %%code_ASCII_hexacode_ASCII_hexa Caractères accentuésCaractères accentués %%code_ASCII_hexacode_ASCII_hexa Exemples :Exemples : ô ô %F4 %F4

[ [ %5B %5B


CookiesCookies

But :But : Éviter que le serveur « oublie le client »Éviter que le serveur « oublie le client » Maintenir un « mode connecté » (= session)Maintenir un « mode connecté » (= session) Rendre transparent un échange client / serveurRendre transparent un échange client / serveur Exemple e-commerce : ajouter des articles au panierExemple e-commerce : ajouter des articles au panier

Serveur :Serveur :Set-Cookie: Set-Cookie: varvar==valval[[; expires=; expires=datedate; ; path=path=cheminchemin; domain=; domain=domainedomaine]]

Client :Client :Cookie: Cookie: varvar==valval;;


RéseauRéseau

Cookies, principe des échangesCookies, principe des échanges

Client WebClient Web(Navigateur)(Navigateur)

Serveur WebServeur Web(Apache)(Apache)

GET / HTTP/1.1GET / HTTP/1.1

HTTP/1.1 200 OKHTTP/1.1 200 OKSet-CookieSet-Cookie: Id=1212; path=/;: Id=1212; path=/;

GET /liste HTTP/1.1GET /liste HTTP/1.1CookieCookie: Id=1212: Id=1212

HTTP/1.1 200 OKHTTP/1.1 200 OK……

Id=1212;Id=1212; path=/;path=/;

11:00:56 Programmation Web 2012-2013 1 Programmation Web : Protocole HTTP Jérôme CUTRONA...

Documents

Transcript of 11:00:56 Programmation Web 2012-2013 1 Programmation Web : Protocole HTTP Jérôme CUTRONA...