Programmation Web :
Protocole HTTP, cookies, sessions
Jérôme CUTRONA
[Link]@[Link]
[Link] Programmation Web 2024-2025 1
INTRODUCTION
[Link] Programmation Web 2024-2025 2
Introduction
HTTP : HyperText Transfer Protocol
HTTP : Protocole du Web
Protocole d'échange entre client et serveur Web
Protocole orienté ligne de caractères
Dans notre cas :
Étude du protocole pour la culture (ça rime avec torture)
Compréhension des cookies
Compréhension des sessions
Utilisation avancée de PHP (côté serveur)
Utilisation d’AJAX, fetch
[Link] Programmation Web 2024-2025 3
PRINCIPE ET MÉCANIQUE RÉSEAU
[Link] Programmation Web 2024-2025 4
Principe général
[Link] Programmation Web 2024-2025 5
Connexion réseau
Client Web Serveur Web
(Navigateur) Réseau
SY
N
SYN,
ACK
AC
K
Requête Réponse
HTTP HTTP
Poignée
Connexion
Connexion
de TCP
main
Fermeture TCP
de(port
en 3
étapes
établie
80)
connexion
[Link] Programmation Web 2024-2025 6
Utilisation de HTTP/1.0
Client Web Serveur Web
(Navigateur) ([Link]
<html>
Établissement
Requête
Réseau
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
d’une Fermeture
Réponse
de
<head> <head>
As-tu / ? Désire des TCP (port
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
connexion Possède Oui
<html>
<!DOCTYPE html
… PUBLIC…
HTTP
<link href="css/[Link]" rel="stylesheet" type="text/css">
<title>J. Cutrona</title> connexion
HTTP </html>
</head>
<body>
<div id='b_connexion'>
ressource
80) des
<form action='/[Link]' method='post'>
<table> s ressources
<tr><td><input type='text' name='login' size='5' value='login' onClick="if ([Link]=='login') [Link]=''">
<input type='password' name='passwd' size='5'>
<td><input type='submit' value='OK'>
</table>
</form>
</div>
<h1>Programmation Web</h1>
<div class='partie'>
<a href='progwebS1'>Programmation Web S1</a><br>
<a href='progwebS2'>Programmation Web S2</a><br>
<a href='progwebS3'>Programmation Web S3</a><br>
</div>
<span id='lastmodified'>
Dernière modification de cette page le 07/09/2008 à 23h27 </span>
<div class='valid'>
<a href='[Link]
<img border="0"
src="/img/[Link]"
Fichier
alt="Valid HTML 4.01!" height="31" width="88"></a>
<img border="0"
/
Ressources
src="/img/[Link]"
alt="Valid CSS!" height="31" width="88">
</div>
</body>
</html>
[Link] Programmation Web 2024-2025 7
Remarques importantes
Le client ouvre la connexion
Le serveur ferme la connexion
1 transaction = 1 ressource transférée (v 1.0)
Protocole sans état
Aucune information gardée entre deux transactions
Le serveur "oublie" le client après chaque transaction
Problème pour la gestion d'une session
[Link] Programmation Web 2024-2025 8
Autres remarques importantes
Le client demande des ressources
Le serveur répond aux demandes des clients :
Délivre la ressource demandée si possible
Informe de la raison de non remise
Echanges multi-plateforme
ASCII 7bits (encodage si non ASCII 7bits)
Requêtes émises en clair
Réponses émises en clair
[Link] Programmation Web 2024-2025 9
MESSAGES HTTP
[Link] Programmation Web 2024-2025 10
Structure d'un message HTTP
Orienté lignes de caractères :
= retour à la ligne
Requête ou réponse :
Requête ou état
[Entête: valeur] HTTP 1.0: 16 en-
têtes
[Entête: valeur]
HTTP 1.1: 46 en-
[…] têtes
Ligne vide, marque la fin des en-têtes
[Corps de message = charge utile]
[Link] Programmation Web 2024-2025 11
REQUÊTES HTTP
[Link] Programmation Web 2024-2025 12
Requête HTTP 1.0
GET|POST|HEAD chemin_de_la_ressource HTTP/1.0
User-Agent: agent Netiquett
[Entête: valeur] e
[Entête: valeur]
[…]
Ligne vide, marque la fin des en-têtes
[Corps de message = charge utile]
[Link] Programmation Web 2024-2025 13
Méthodes de requête HTTP
HEAD
demande des informations sur la ressource désignée
GET
demande des informations sur la ressource désignée ET la ressource
POST
envoie des données (formulaire vers le serveur), demande des informations
sur la ressource désignée ET la ressource
PUT, PATCH, DELETE
Utilisées pour les API Web
[Link] Programmation Web 2024-2025 14
Exemple de requête HTTP
GET / HTTP/1.0
Ligne vide, marque la fin des en-têtes
POST /[Link] HTTP/1.0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64;
x64; rv:60.0) Gecko/20100101 Firefox/60.0
Content-Type: application/x-www-form-urlencoded
Content-Length: 13
Ligne vide, marque la fin des en-têtes
say=Hi&to=Mom Corps de message = charge utile
[Link] Programmation Web 2024-2025 15
RÉPONSES HTTP
[Link] Programmation Web 2024-2025 16
Réponse HTTP
HTTP/version code phrase
Content-Type: type_mime Obligatoire si corps
[Entête: valeur] présent
[Entête: valeur]
[…]
LeExemples
client doitde
être informé de
latype_mime
Ligne vide, marque la fin des en-têtes nature de la:ressource :
[Corps de message = charge utile] • text/html
HTML
• image/jpeg
Image JPEG
• text/css
Doc PDF
• video/mpeg
Animation Flash
• ……
[Link] Programmation Web 2024-2025 17
Exemple de réponse HTTP
HTTP/1.x 200 OK
Date: Mon, 25 Apr 2005 [Link] GMT
Server: Apache/2.0.46 (Red Hat)
X-Powered-By: PHP/4.3.2
Content-Type: text/html
Ligne vide, marque la fin des en-têtes
<html>
<head><title> Corps de message = charge utile
...
[Link] Programmation Web 2024-2025 18
États des réponses HTTP
Codes à 3 chiffres + phrase
1er chiffre : classe de réponse
1xx : Information (HTTP 1.1)
2xx : Succès
200 OK
3xx : Redirection
304 NOT MODIFIED
4xx : Erreur client
403 FORBIDDEN
404 NOT FOUND
5xx : Erreur serveur
500 INTERNAL ERROR
[Link] Programmation Web 2024-2025 19
PROTOCOLE HTTP 1.1
[Link] Programmation Web 2024-2025 20
Protocole HTTP 1.1
Contexte HTTP 1.0 :
1 transaction = 1 ressource transmise
Pas de connexion persistante
Mauvaise utilisation du cache
1 IP = 1 serveur Web
Améliorations HTTP 1.1 :
1 transaction persistante = X ressources transmises
Connexion persistante
Standardisation du cache
Découpage d'une ressource (chunk encoding)
1 IP = X serveurs Web (proxy, serveurs virtuels)
[Link] Programmation Web 2024-2025 21
Protocole HTTP 1.1
Contraintes du client :
inclure l'en-tête Host: à chacune des requêtes.
Le serveur physique doit savoir quel serveur virtuel interroger
accepter des réponses avec des données encodées de type
chunked
supporter les connexions persistantes,
ou inclure l'en-tête Connection: close à chacune des
requêtes
supporter la réponse 100 Continue
[Link] Programmation Web 2024-2025 22
Requête HTTP 1.1
GET|POST|HEAD chemin_de_la_ressource HTTP/1.1
Host: hôte Obligatoir
User-Agent: agent e
Netiquett
[header] e
[header]
[…]
Ligne vide, marque la fin des en-têtes
[Corps de message = charge utile]
[Link] Programmation Web 2024-2025 23
FORMULAIRES
[Link] Programmation Web 2024-2025 24
Soumission de formulaires
<form action="[Link]" method="GET">
Requête HTTP si envoi du formulaire :
GET [Link]?p1=X&p2=Y HTTP/1.0
Valeurs saisies dans le formulaire :
Couples nomChamp=valEncodée séparés par
Traduit dans l'URL :&[Link]
p1=X&p2=Y
Peut donc être mis en favoriProgrammation Web 2024-2025
[Link] 25
Soumission de formulaires
<form action="[Link]" method="POST">
Requête HTTP si envoi du formulaire :
POST [Link] HTTP/1.0
Content-Type: application/x-www-form-urlencoded
Content-Length: 9
p1=X&p2=Y Valeurs saisies dans le formulaire :
Couples nomChamp=valEncodée séparés par
&
NON traduit dans l'URL : [Link]
Ne peut donc PAS être mis en favori
[Link] Programmation Web 2024-2025 26
Encodage des données
HTTP : ASCII 7bits (base commune à toutes les plateformes)
Tout caractère non ASCII 7bits doit être encodé
saisies dans les formulaires (fait par le navigateur)
URL (à faire soi-même)
Principe d’encodage :
Espace +
Caractères spéciaux %code_ASCII_hexa
Caractères accentués %code_ASCII_hexa
Exemples : ô %F4
[ %5B
[Link] Programmation Web 2024-2025 27
COOKIES
[Link] Programmation Web 2024-2025 28
Cookies
But :
Éviter que le serveur « oublie le client »
Maintenir un « mode connecté » (= session)
Rendre transparent un échange client / serveur
Exemple e-commerce : ajouter des articles au panier
Serveur (en-tête de réponse HTTP) :
Set-Cookie: var=val[; expires=date; path=chemin;
domain=domaine]
Client (en-tête de requête HTTP) :
Cookie: var=val;
[Link] Programmation Web 2024-2025 29
Cookies, principe des échanges
Client Web GET / Serveur Web
(Navigateur) Réseau
HTTP/1.1 (Apache)
Id=d81… …
8a; HTTP/1.1 200 OK
path=/; Set-Cookie: Id=d81…8a;
path=/;
…
GET /liste
HTTP/1.1
Cookie: Id=d81…8a
…
HTTP/1.1 200
OK
…
[Link] Programmation Web 2024-2025 30
Cookies, principe des échanges (suite)
Client Web GET / HTTP/1.1 Serveur Web
(Navigateur) Réseau
Cookie: Id=d81… (Apache)
Id=d81… 8a
8a; …
HTTP/1.1 200
path=/; OK
…
GET /logout HTTP/1.1
Cookie: Id=d81…8a
…
HTTP/1.1 200 OK
…
[Link] Programmation Web 2024-2025 31
Cookies
Avantages :
Rappelle au serveur des informations sur le client
L'échange de la données dans le sens
serveur client est limité au dépôt du cookie
Ne nécessite pas de modifier les pages HTML
Compatible avec les formulaires
Le cookie a une durée de validité
Inconvénients :
Les données circulent en permanence dans le sens client serveur
Les données circulent en clair sur le réseau
La quantité de données doit être limitée
[Link] Programmation Web 2024-2025 32
Cookies en PHP
Placer un cookie sur le client :
bool setcookie( string $name
[, string $value
[, int $expire
[, string $path
[, string $domain
[, bool $secure
Nom du
Valeur
Date
Chemin
Domaine
d'expiration
dude
cookie
de
cookie
validité,
validité,
(timestamp
disponibilité
disponibilité
UNIX)
:: : [, bool $httponly
/Dans tout
[Link]
10 joursle: serveur
time()+10*24*60*60 ]]]]]] )
Cookie uniquement
sécurisé ? par HTTP ?
Si non
/prive précisé,
lesous-arborescence
domaine expire
[Link]
à la fermeture
"prive" du
true uniquement HTTP si HTTPS
navigateur
Par
[Link]
défaut : répertoire où le cookie est défini
false défaut, HTTP,HTTP et JavaScript,
HTTPS …
le sous-domaine [Link]
[Link] Programmation Web 2024-2025 33
Cookies en PHP
Vérifier la présence d'un cookie :
tableau associatif superglobal $_COOKIE
ex : cookie 'passage' $_COOKIE['passage']
Remarques utiles :
Le cookie doit être placé avant echo (en-tête HTTP)
Le cookie placé avec setcookie() n'est accessible qu'au prochain
chargement de page :
En-tête HTTP Set-Cookie: suivi de l'en-tête HTTP Cookie: à la
demande de ressource suivante
Effacer un cookie déjà placé :
placer le même cookie mais avec une valeur vide ou false
[Link] Programmation Web 2024-2025 34
SESSIONS
[Link] Programmation Web 2024-2025 35
Sessions
Stockage sur le serveur des données associées à un client
particulier
Nécessite une identification unique pertinente et persistante des
clients
Identifiant de session (SHA-2 512bits)
Persiste par paramètre d'URL ou cookie
Évite l'échange permanent de données (en dehors de l'identifiant)
Nécessite la linéarisation des variables pour leur stockage (fichier,
BD, personnalisé)
Simule un mode connecté
[Link] Programmation Web 2024-2025 36
Sessions
Démarrer
Client 1 session
Cookie
id : cb2… id : e42…5b
cb2…aa
aa Réseau
Serveur
Set-Cookie:
Cookie:
GET
OK:id=cb2…
id=e42…
id=e42…
id=cb2…
5b
aa
/
…
cb2…aa e42…5b
Client 2
Cookie Données de
id : e42… session pour cb2…
e42…
5b 5b
aa
[Link] Programmation Web 2024-2025 37
Sessions
$_SESSION
Client Web GET /[Link] Serveur
'data' Web
1212
(Navigateur) Réseau
HTTP/1.1 (Apache)
…
Id=d81… …
8a; HTTP/1.1 200 OK
PHP
path=/; Set-Cookie: Id=d81…8a;
path=/;
Données
… de
GET /liste session
HTTP/1.1
Cookie: Id=d81…8a PHP
…
HTTP/1.1 200
OK
…
[Link] Programmation Web 2024-2025 38
Sessions
Créer ou restaurer une session
bool session_start ( void )
Manipuler les données de session
Tableau associatif superglobal $_SESSION
Lire ou définir l'identifiant de session
string session_id ( [string $id] )
Détruire toutes les variables d'une session
void session_unset ( void )
Détruire une session
bool session_destroy ( void )
[Link] Programmation Web 2024-2025 39
Sessions
Modifie les paramètres du cookie de session
void session_set_cookie_params (
int lifetime
[, string path
[, string domain
[, bool secure
[, bool httponly
]]]]
Durée de
Chemin
Domaine
Cookie sécurisé
uniquement
de
de
vie
validité,
validité,
en secondes
? disponibilité
par
disponibilité
HTTP ? : :
) :uniquement
/10 jours
[Link]
true tout
10*24*60*60
le serveursi HTTPS
HTTP
Si non
/prive
false précisé,
ledéfaut,
sous-arborescence
domaine
expire
HTTP
HTTP,
[Link]
àet
JavaScript,
laHTTPS
fermeture
"prive"…du navigateur
(Attention,
Par
[Link]
défaut lifetime
: répertoire
pouroù session
le cookie
vs expire
est défini
pour cookie
le sous-domaine [Link]
[Link] Programmation Web 2024-2025 40
