1ère Générale NSI

 

Term. Générale NSI

 

Terminale STI2D SIN

Bts Ccst

Technico-commercial 3.0

[[{"text":"

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

\"Logo \"Logo
Logos de HTML 5 et CSS 3

","title":"SITE WEB DYNAMIQUE"}],[{"text":"

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

","title":"Pourquoi statique ?"},{"edit":" "}],[{"text":"Regarder la vidéo 

","title":"Video sur les cookies de la CNIL (Commission Nationale de l'Informatique et des Libertés)"},{"edit":" "}],[{"text":"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 Angular.




","title":"PRINCIPE DU SITE DYNAMIQUE"},{"edit":" "}],[{"text":"
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
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 

","title":"Principe d'un site statique"},{"edit":" "}],[{"text":"
Voici le principe de gestion d'un site dynamique.

Les 3 premières phases sont identiques :

\"Principe
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
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.

","title":"Principe d'un site dynamique"},{"edit":" "}],[{"text":"Vous les avez certainement déjà rencontré. Par exemple, en première page de Qwant : https://www.qwant.com/?l=fr

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 !

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.

","title":"LES URLS BIZARRES"},{"edit":"

Ecrire ici vos réponses.
"}],[{"text":"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\n 2\n 3\n 4\n 5\n 6\n 7\n 8\n 9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24
<!DOCTYPE html>\n<html lang=\"fr\">\n \n<head>\n <meta charset=\"utf-8\" />\n <title>Accueil</title>\n</head>\n \n<body>\n <h1>SNT : côté client / côté serveur : VERIFICATION</h1>\n <p>Identication : mauvais mot de passe</p>\n <p>Pour visualiser le reste du site, il faudra vous identifier !</p>\n <form method='get' action='identification.php'>\n <p>Votre pseudo :\n <input type='text' name='pseudo' placeholder='tapez votre pseudo' />\n </p>\n <p>Mot de passe :\n <input type='text' name='motpasse' placeholder='tapez votre mot de passe' />\n </p>\n <p><input type='submit' value='Connexion' /></p>\n </form>\n \n</body>\n</html>\n

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.

"},{"edit":"

R\"pondre ici.

"}],[{"text":"

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.

","title":"Méthode GET"},{"edit":" "}],[{"text":"

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.


Pourquoi un site commercial voudrait-il savoir depuis quel site vous avez activé le lien vers lui ?


"},{"edit":"

Répondre ici.

"}],[{"text":"Alors, comment fait le serveur pour savoir si le mot de passe et l'identifiant corresponde ?

Sans même connaître la moindre chose en PHP, tentez de trouver le mot de passe à utiliser en décodant le fichier php.
","title":"GESTION DU MOT DE PASSE"},{"edit":"

Répondre ici.

"}],[{"text":"

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\"

"},{"edit":" "}],[{"text":"

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

\"Logo
Logo PHP

A titre d'exemple, voici le code volontairement simple et visible qui tourne sur cette page.

1\n 2\n 3\n 4\n 5\n 6\n 7\n 8\n 9\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n32\n33\n34\n35\n36
<!DOCTYPE html>\n<html lang=\"fr\"> \n
\n<head> \n <meta charset=\"utf-8\" />\n <title>Accueil</title> \n</head>\n
\n<body>\n <h1>SNT : côté client / côté serveur : VERIFICATION</h1>\n <?php\n if ($_GET['motpasse'] == 'snt2019!') {\n ?>\n <p>Identification : check</p>\n <p>Cette phrase ne peut apparaitre que si vous avez \n tapé le bon mot de passe</p>\n <?php\n }\n else {\n ?>\n <p>Identication : mauvais mot de passe</p>\n <p>Pour visualiser le reste du site, il faudra vous\n identifier !</p>\n <form method='get' action='identification.php'>\n <p>Votre pseudo : <input type='text' name='pseudo'\n placeholder='tapez votre pseudo' /> </p>\n <p>MdP : <input type='text' name='motpasse' \n placeholder='tapez votre mdp' /></p>\n <p><input type='submit' value='Connexion' /></p>\n </form> \n <?php\n }\n ?>\n</body>\n
\n</html>
"},{"edit":" "}],[{"text":"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 ?"},{"edit":"

Répondre ici.

"}],[{"text":"

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 ...

"},{"edit":" "}],[{"text":"

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.

","title":"COOKIES"},{"edit":" "}],[{"text":"
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)
"},{"edit":" "}],[{"text":"aa"},{"htm":"","css":"","js":""}],[{"text":"

Alors, comment sait-on si un site dépose des cookies ?

C'est facile sous Firefox : MENU puis DEVELOPPEMENT WEB puis INSPECTEUR DE STOCKAGE

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

"},{"edit":"

Répondre ici.

"}],[{"text":"

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.

"},{"edit":" "}],[{"text":"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

Un court extrait des cookies déposés par Infoforall
"},{"edit":" "}],[{"text":"

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
    Le menu Préférences
  • Il reste à sélectionner Vie privée et sécurité et à descendre jusqu'à Cookies.
  • \"Gestion
    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
","title":"Gestion des cookies"},{"edit":" "}],[{"text":"
Gestion des cookies sur Chromium

Il faut aller dans :

  • MENU puis
  • Paramètres
  • \"Préférences
    Le menu Paramètres
  • Il reste à sélectionner Paramètres Avancés et Confidentialité et à Paramètres du site.
  • \"Paramètres
    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

"},{"edit":" "}],[{"text":"Vous n'avez plus qu'à configurer votre propre navigateur. Allez voir le contenu des cookies ou supprimez le en partie. C'est instructif."},{"edit":" "}],[{"text":"Source : https://www.infoforall.fr/act/snt/site-web-dynamique/"},{"edit":" "}]]

En poursuivant votre navigation sur mon site, vous acceptez l’utilisation des Cookies et autres traceurs  pour réaliser des statistiques de visites et enregistrer sur votre machine vos activités pédagogiques. En savoir plus.