9 - Site Web dynamique
Nous avons vu comment créer une page statique avec HTML et CSS.
Pourquoi statique ?
Le serveur va fournir à chaque fois le même du code HTML pour cette requête.
Du coup, impossible
- d'enregistrer une commande,
- de vérifier un mot de passe ou
- de compter le nombre de fois que vous êtes venu.
Et ça permet également de gérer les fameux cookies
Voici des liens vers la vidéo de la CNIL (Commission Nationale de l'Informatique et des Libertés)
Dailymotion : https://www.dailymotion.com/video/x16lt53
Vimeo : https://vimeo.com/82084441
Youtube : https://www.youtube.com/watch?v=Ij9EkAQzVvM
Documents de cours : open document ou pdf
1 - Principe du site dynamique
Pour faire tout cela, il faut utiliser un programme côté serveur. On peut faire cela avec le langage Python, avec le langage PHP ou certaines bibliothèques comme JQuery.
Principe d'un site statique
Voici le principe de gestion d'un site statique.
Les 3 premières phases sont :
- Un programme serveur tourne sur une machine (par exemple Apache). S'il s'agit d'un serveur http, il va donc être identifié par le numéro de port 80.
- Un programme client (par exemple Firefox) tourne sur une autre machine. Il envoie une requête HTTP au serveur.
- Le serveur reçoit la requête HTTP et la traiter :
Dernière étape : le serveur va regarder s'il dispose en mémoire d'un fichier qui porte le nom demandé via la requête GET.
- Si c'est le cas, il envoie comme dans le message de sa réponse HTTP le fichier HTML déjà stocké dans sa mémoire (et un code 200 dans l'en-tête).
- Si ce n'est pas le cas, il envoie via l'en-tête de la réponse un code 404.
Regardons maintenant ce que fait un site dynamique
Principe d'un site dynamique
Voici le principe de gestion d'un site dynamique.
Les 3 premières phases sont identiques :
Dernière étape : le serveur va fournir la requête à un autre programme.
Ce programme va alors pouvoir :
- Vérifier certains éléments de la requête (concordance entre pseudo et mot de passe stocké dans la base de données par exemple)
- Modifier la requête en fonction de certains éléments (heure de la demande, adresse IP de l'ordinateur ayant fait la requête, logiciel Client utilisé...)
- Enregistrer ou lire des données dans la base de données (obtenir tous les produits de la marque ADADOS ou NOKE par exemple).
Le programme va alors créer un code HTML qui n'existe pas avant la demande en utilisant les données récupérées par la requête et dans la base de données.
C'est ça la grande différence : le code HTML fourni au client n'est pas forçément identique à chaque fois.
2 - Les URLs bizarres ...
Vous les avez certainement déjà rencontrées. Par exemple, en première page de Qwant : https://www.qwant.com/?l=fr
01° Ouvrir la page suivante : https://formation.infoforall.fr/.
Nous arrivons sur un site de démonstration sur lequel des programmes (ici en php) récupèrent les requêtes, les analysent et créent des pages html en fonction des données reçues.
Pourquoi ne pas gérer les mots de passe avec un programme tournant sur l'ordinateur du client ? Simplement car il serait stupide de gérer des mots de passe côté client : il suffirait de regarder le code source avec un clic droit !
02° Choisir un pseudo et un mot de passe. Regardez dans l'URL de la requête les paramètres passés au serveur lors de l'envoi.
...CORRECTION...
Si on utilise le pseudo bob et le mot de passe 1234, on obtient l'URL suivante :
https://formation.infoforall.fr/identification.php?pseudo=bob&motpasse=1234
On peut donc lire :
- Protocole :
https - Serveur :
formation.infoforall.fr - Requête :
identification.php?pseudo=bob&motpasse=1234
On voit donc que la requête contient plus qu'une simple demande de fichier ! On y trouve
- Une demande de fichier :
identification.php - Un point d'interrogation qui codifie la fin de nom du fichier : on indique par ce code que la suite va être composée de paramètres.
- Un premier paramètre :
pseudo=bob - Un symbole signifiant ET :
& - Un second paramètre :
motpasse=1234
03° Observez le code source à l'aide d'un clic-droit : le vrai mot de passe apparaît-il ?
Si on regarde le code source HTML reçu par le client (clic-droit, voir code source), on obtient ceci :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 | <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Accueil</title>
</head>
<body>
<h1>SNT : côté client / côté serveur : VERIFICATION</h1>
<p>Identication : mauvais mot de passe</p>
<p>Pour visualiser le reste du site, il faudra vous identifier !</p>
<form method='get' action='identification.php'>
<p>Votre pseudo :
<input type='text' name='pseudo' placeholder='tapez votre pseudo' />
</p>
<p>Mot de passe :
<input type='text' name='motpasse' placeholder='tapez votre mot de passe' />
</p>
<p><input type='submit' value='Connexion' /></p>
</form>
</body>
</html>
|
Balise <form>
La balise <form> (pour FORMULAIRE) est une balise html typique si ce n'est que :
- elle permet d'envoyer les données rentrées dans le formulaire (ici les textes nommés pseudo et motpasse) vers
- la page dont l'URL est indiquée via l'attribut
action='identification.php' - en utilisant ici la méthode GET, à savoir on passe les données via l'URL :
method='get'
D'où : <form method='get' action='identification.php'>
C'est donc à l'aide de ce formulaire et à ses balises <input> que votre navigateur sait sous quelle forme réaliser le texte de votre requête.
Méthode GET vs Méthode POST
La méthode GET est pratique lorsqu'il s'agit de transmettre peu de paramètres et des paramètres non sensibles. On transmet directement les données dans l'en-tête vua l'URL.
Exemple de la requête reçue en émettant cette requête en GET :
GET /identification.php?pseudo=toto&motpasse=1234 HTTP/1.1↲
Host: formation.infoforall.fr↲
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:85.0) Gecko/20100101 Firefox/85.0↲
Referer: https://formation.infoforall.fr/↲
VIDE
FIN DE LA REQUETE
Si la liaison est en HTTPS, l'URL sera cryptée mais :
- N'importe qui pourrait regarder votre écran et voir l'URL
- Les requêtes sont stockées sur le serveur : voir le fichier des connexions du serveur suffirait pour récupérer les identifiants et les mots de passe des utilisateurs.
Si les variables à transmettre sont longues, nombreuses ou sensibles, on utilise plutôt la méthode POST : les données sont alors transmises dans le corps du message et pas juste dans l'URL : les données sont alors transmises dans un message et n'apparaissent alors pas directement dans l'URL.
Exemple de la requête reçue en émettant cette requête en POST :
POST /identification.php HTTP/1.1↲
Host: formation.infoforall.fr↲
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:85.0) Gecko/20100101 Firefox/85.0↲
Referer: https://formation.infoforall.fr/↲
pseudo=toto&motpasse=1234
FIN DE LA REQUETE
Lors de l'activité sur les images, certains d'entre vous ont certainement voulu récupérer des images et se sont retrouvés avec des URLs à rallonge, du style
https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&ved=2ahUKEwjXtsy66o_lAhWkxoUKHWQcB00QjRx6BAgBEAQ&url=https%3A%2F%2Fwww.arte.tv%2Ffr%2Fvideos%2F077351-000-A%2Fle-chat-ce-tueur-si-mignon%2F&psig=AOvVaw2PMiJLT5QMeul-L64RUGoy&ust=1570732970557024
Maintenant, vous devriez comprendre qu'en cliquant sur le lien, on envoie des informations au serveur google.com pour qu'il sache quelle ressource vous voulez. Il vous redirigera alors vers cette ressource d'Arte.
04° Pourquoi un site commercial comme Arte voudrait-il savoir depuis quel site vous avez activé le lien vers lui ?
...CORRECTION...
Pour savoir qui continuer à payer pour faire sa publicité tout simplement.
Payer c'est bien, savoir si l'investissement est rentable, c'est mieux.
Ici, en activant cette ressource, on arrive sur google.com qui nous redirige vers Arte. La chaîne Arte peut alors lire dans ses logs qu'un utilisateur est arrivé chez eux depuis google.
Si Arte paye un autre site et qu'il constate que cela ne génére quasiment aucun trafic, il pourra en déduire qu'il ne sert à rien de continuer à faire de la publicité par là.
3 - Gestion du mot de passe
Alors, comment fait le serveur pour savoir si le mot de passe et l'identifiant correspondent ?
Pour connaître le mot de passe à fournir, il faudrait donc pouvoir voir le vrai code source qui s'exécute sur le serveur HTTP. Or, justement, le client HTTP ne peut pas voir ce code. Il n'obtient que la réponse HTTP. C'est le but.
Sur cette page-test, j'ai pris du PHP.
Voici le code simple qui tourne côté serveur.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36 | <!DOCTYPE html>
<html lang="fr">
|
05° Sans même connaître la moindre chose en PHP, tentez de trouver le mot de passe à utiliser en décodant le fichier php.
On peut faire la même chose avec d'autres langages. Les serveurs peuvent tourner en Python, en Javascript...
Tous les langages ont des avantages et des désavantages.
06° Testez la réponse sur le site. Une fois passé le cap du mot de passe, observez le code-source obtenu côté client. A-t-on affaire à du PHP ou à un HTML pur ?
4 - Cookies
Le client peut donc transmettre des paramètres au serveur pour que le serveur les stocke sur l'ordinateur du serveur.
Ca fonctionne également dans l'autre sens : le serveur peut fournir des paramètres au client pour que le client les stocke sur l'ordinateur du client.
Ce sont les cookies.
Sachez qu'un cookie n'est pas nécessairement négatif. Ils ne servent pas qu'à récupérer des informations sur votre historique de navigation et vos habitudes.
Il convient néanmoins d'être très vigilants avec leurs gestions.
C'est quoi un cookie
Un cookie est un petit fichier texte qu'un serveur va fournir à votre navigateur de façon à le stocker sur votre ordinateur.
Par exemple :
- le contenu de votre cadis numérique (c'est pratique)
- votre identifiant (c'est pratique)
- la dernière page consultée sur le site (ça peut être pratique)
- Un numéro compliqué généré au hasard et propre à votre ordinateur et permettant ainsi de retrouver toute communication que vous feriez de nouveau avec cet ordinateur sur ce site (c'est moins sympa tout de suite)
- Un numéro compliqué propre à votre ordinateur que récupère un grand groupe gérant une énorme régie publicitaire : ce groupe peut ainsi tout connaitre de votre historique de navigation pourvu que vous alliez sur des sites utilisant leurs services (là, normalement on se rend compte que c'est très intrusif)
Alors, comment sait-on si un site dépose des cookies ?
C'est facile sous Firefox : MENU puis DEVELOPPEMENT WEB puis INSPECTEUR DE STOCKAGE.
07° Ouvrir cet outil. Aller sur google.com et lancer une recherche sur par exemple trouver cookies. Observer la liste des fichiers cookies déposés par le site sur votre ordinateur.
Comme vous pouvez le constater sur la droite, le contenu du fichier déposé sur VOTRE ordinateur est en plus codé. Vous ne pouvez même pas savoir ce que Google a déposé exactement.
08° Aller sur qwant.com et lancer une recherche sur par exemple trouver cookies. Observer la liste des fichiers cookies déposés par le site sur votre ordinateur.
Si vous allez dans l'onglet Stockage local (sur la gauche), vous verrez que le site stocke quelques petites choses mais vraiment pas grand chose.
Il est vraiment très simple de placer un cookie et de lire si l'ordinateur l'accepte. Par contre, rien n'oblige le site à offusquer les données qu'il place. C'est volontaire.
09° Utiliser le lien suivant : Un cookie en plus du site www.infoforall.fr ? Observer la liste des fichiers-cookies déposés par le site sur votre ordinateur. Lire le contenu du cookie nommé cookie surprise en cliquant dessus.
Il reste à voir où gérer les cookies et comment les empecher de s'installer. Pas tous. Certains permettent de gérer les sessions. Sans eux, pas de possibilité de rester connecté ou de valider un formulaire sécuriés par exemple.
Gestion des cookies sur Firefox
Il faut aller dans :
- MENU puis
- Préférences (la roue dentée)
- Il reste à sélectionner Vie privée et sécurité et à descendre jusqu'à Cookies.
Vous n'avez plus qu'à sélectionner Gérer les données pour supprimer les cookies déjà installés par certains sites non voulus ou encore Gérer les permissions pour autoriser ou non certains sites à placer des cookies sur VOTRE ordinateur.
Gestion des cookies sur Chromium
Il faut aller dans :
- MENU puis
- Paramètres
- Il reste à sélectionner Paramètres Avancés et Confidentialité et à Paramètres du site.
Vous n'avez "plus" qu'à sélectionner Cookies et données du site pour accéder à la gestion des cookies déjà installés par certains sites non voulus.
Activité publiée le 09 10 2019
Dernière modification : 09 10 2019
Auteur : ows. h.