SNT Web Dynamique

Identification

Infoforall

7 - Site Web dynamique


Nous avons vu comment créer une page statique avec HTML et CSS.

Logo Html5 Logo Html5
Logos de HTML 5 et CSS 3

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

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 :

  1. 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.
  2. Un programme client (par exemple Firefox) tourne sur une autre machine. Il s'identifie par un numéro de port aléatoire mais supérieure à 1024. Il envoie une requête HTTP au serveur.
  3. Le serveur reçoit la demande.
Principe phases 1 2 3
Ecoute - Envoi d'une requête - Réception de la requête

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 réponse HTTP le fichier html déjà stocké dans sa mémoire (et un code 200).
  • Si ce n'est pas le cas, il envoie comme 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 :

Principe phases 1 2 3
Ecoute - Envoi d'une requête - Réception de la requête

Dernière étape : le serveur va fournir la requête à un autre programme.

Principe phases 1 2 3
Traitement de la requête par un 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.

Processus

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>

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 le navigateur parvient ensuite à comprendre qu'il faut renvoyer des données via l'URL.

La méthode GET est pratique lorsqu'il s'agit de transmettre peu de paramètre et des paramètres non sensibles. 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.

Lors de l'activité sur les images, certains d'entre vous ont certainement voulu récupérer des images et se sont retrouver avec des URL à 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 pour qu'il sache quelle ressource vous voulez et d'où vous venez.

04° Pourquoi un site commercial 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.

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 le voir ce code. Il n'obtient que la réponse. C'est le but.

Processus

Sur cette page-test, j'ai pris du PHP.

Logo PHP
Logo PHP

Voici le code volontairement simple et visible qui tourne sur cette page.

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">
<head> <meta charset="utf-8" /> <title>Accueil</title> </head>
<body> <h1>SNT : côté client / côté serveur : VERIFICATION</h1> <?php if ($_GET['motpasse'] == 'snt2019!') { ?> <p>Identification : check</p> <p>Cette phrase ne peut apparaitre que si vous avez tapé le bon mot de passe</p> <?php } else { ?> <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>MdP : <input type='text' name='motpasse' placeholder='tapez votre mdp' /></p> <p><input type='submit' value='Connexion' /></p> </form> <?php } ?> </body>
</html>

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 ?

Comme vous le voyez, l'intérêt des programmes côté serveur est le côté totalement opaque qu'il procure pour le client.

De cette façon, on limite les intrusions sur le site.

Mais, cela veut également dire que le serveur peut effectuer des opérations sur les données du client sans que le client ne soit au courant ...

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.

Cookies Google
Un court extrait des cookies déposés par Google

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.

Cookies Qwant
Un court extrait des cookies déposés par Qwant

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.

Cookies Infoforall.fr
Un court extrait des cookies déposés par Infoforall

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)
  • Préférences Firefox
    Le menu Préférences
  • Il reste à sélectionner Vie privée et sécurité et à descendre jusqu'à Cookies.
  • Gestion Cookies Firefox
    La gestion des Cookies sous Firefox

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
  • Préférences Chromium
    Le menu Paramètres
  • Il reste à sélectionner Paramètres Avancés et Confidentialité et à Paramètres du site.
  • Paramètres sites Chromium
    La gestion des Cookies sous Chromium

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.

Final Chromium
La gestion des Cookies sous Chromium

Vous n'avez plus qu'à configurer votre propre navigateur. Allez voir le contenu des cookies ou supprimez le en partie. C'est instructif.

Activité publiée le 09 10 2019
Dernière modification : 09 10 2019
Auteur : ows. h.