Ce qu’il se passe quand on ouvre une page WEB

Ne vous êtes-vous jamais demandé tout ce qu’il se passait lorsque vous dégainiez votre navigateur web ?
Qui va-t-il contacter ? Combien de machines vont travailler pour vous afficher la page ? Pourquoi est-ce que c’est aussi long ?
Allez c’est parti pour un voyage de quelques millisecondes !

1 – Parser la requête

Donc vous entrez l’adresse iloth.net/2016/10/ce-quil-se-passe-quand-on-ouvre-une-page-web/ dans votre barre d’adresse.
La première tâche du navigateur va être de parser la requête, c’est à dire la lire et l’analyser pour savoir ce que vous avez voulu dire. Donc déjà il va lire le protocole. Pas de chance pour lui, vous ne l’avez pas indiqué. Il va donc de lui même rajouter le protocole par défaut soit http://. Le web est en vrai appelé hyper text transport protocol. C’est donc un protocole pour transporter de l’hypertexte.
Bon, ensuite il va continuer de lire l’adresse. Il découpe l’adresse en deux parties : 1 – l’hôte 2 – la page demandée. Dans notre cas, la partie soulignée en vert est l’hôte et la partie soulignée en bleu est la page demandée. On l’appelle hôte car c’est le serveur qui héberge les données. Vous remarquerez que c’est le premier slash qui indique la limite.
Donc c’est bon, votre navigateur sait quel serveur contacter et quelle page lui demander.

2 – Résolution DNS

Bon, le navigateur sait quel serveur contacter mais il ne sait pas où ce serveur se trouve. Sur Internet, toutes les machines communiquent via le protocole IP (Internet Protocol). Dans ce protocole, chaque machine possède (au minimum) une adresse IP. Ces adresses doivent être uniques, c’est à dire que sur tout le réseau Internet, il ne peut pas y avoir deux machines avec la même adresse IP. Ces adresses sont de la forme a.b.c.d où a,b,c et d sont des chiffres allant de 0 à 255. Quelques exemples d’ip : 1.2.3.4, 120.32.21.68, 89.234.152.131, … Bref vous voyez le truc.
Bon c’est bien gentil mais là vous avez pas donné une adresse IP au navigateur mais un nom d’hôte, il va donc falloir trouver l’adresse IP correspondant à cet hôte. Pour ça on utilise le protocole DNS (Domain Name System). Le DNS est assez simple dans son utilisation puisqu’il fonctionne comme un annuaire.

Votre navigateur va donc demander à votre système d’exploitation quel serveur DNS il doit consulter puis faire sa requête.

3 – Connexion au serveur WEB

Maintenant votre navigateur connait l’hôte, la page demandée et l’adresse IP à contacter. Il a tout ce qu’il lui faut pour établir la connexion au niveau TCP. Transimssion Control Protocol est un protocole dit “de connexion” au dessus d’IP. Là ça devient un peu technique mais en gros ça permet d’être sûr que tout ce qu’envoie le client est bien reçu par serveur sans erreur, et vice versa. Le protocole IP utilise des adresses (IP), le protocole TCP utilise lui des ports. HTTP utilise par défaut le port 80 donc si on ne le spécifie pas au navigateur, celui-ci utilisera de lui même le port 80 (443 pour l’HTTPS).
Donc notre navigateur va ouvrir une connexion TCP vers 89.234.152.131:80 (oui on indique le port avec “:”). Il se passe ce que l’on appelle le 3way-handshake, la poignée de main en trois étapes. Voilà le dialogue :

Donc voilà il y a eu trois paquets qui se sont baladés entre les ordinateurs pour établir la connexion. Et pourtant vous ne vous êtes pas encore échangé d’information.

4 – Requête HTTP

Le navigateur rédige la requête HTTP qu’il va envoyer au serveur web.

Regardons un peu de plus près ce que ça contient. C’est une requête de type GET, donc il demande une page web /2016/10/ce-quil-se-passe-quand-on-ouvre-une-page-web/ . Ce champ est obligatoire.
Il indique l’Host c’est à dire à quelle machine il s’adresse. C’est une information utile car un même serveur web peut héberger plusieurs sites différents, c’est grâce à cet entête qu’il sait quel est le site demandé.
Ensuite l’entête User-Agent est un champ identifiant le navigateur ayant fait la demande. C’est grâce à cet entête que les possesseurs de sites web peuvent faire des statistiques concernant les visiteurs de leur site. Il faut savoir que cet entête est purement facultatif et que vous pouvez virtuellement envoyé n’importe quelle information. D’ailleurs vous remarquerez que c’est pas spécialement bien clair. Celui montré en exemple est l’entête envoyé par firefox 49 mais avec une extension changeant sa valeur de temps à autre. On y voit que ça parle de mozilla (le navigateur historique de la fondation mozilla), ça évoque Windows NT 6.3 en version 64bits, que ça parle d’AppleWebkit, que ça parle de Khtml qui est un ancien moteur de navigateur n’existant plus, Gecko est le moteur de rendu de la fondation mozilla, ça cite Chrome en version 42 mais que ça termine par Safari. Bref c’est … compliqué.
Ensuite Accept indique quel type de données vous attendez (ici du texte formaté en html ou xhtml). Accept-Language indique quelle langue vous attendez (dans mon cas de l’anglais). Ce champs est facultatif et n’est que très rarement pris en considération. Accept-Encoding indique dans quel encodage mon navigateur attend les données (ici elles peuvent compressées via les formats gzip ou deflate ou brotli).
Referer indique quelle est la page consultée précédemment. Ce champ sert énormément au webmaster pour savoir comment vous avez trouvé leur site (via un moteur de recherche ou bien un site particulier). C’est un champ facultatif qu’il peut être bon de ne pas envoyer afin de protéger un minimum sa confidentialité.
Cookie est un entête particulier. De nombreux sites placent des cookies sur les ordinateurs des visiteurs. Les cookies sont des petits fichiers textes contenant des données. Ils contiennent généralement des informations pour vous identifier (nom d’utilisateur, est-ce que vous vous êtes identifié auprès du site web,…) mais pas uniquement. Chaque site fait un peu ce qu’il veut avec ses cookies. Et du coup à chaque requête que vous ferez auprès du site ouaib, votre navigateur va envoyer les cookies du site dans chaque requête. C’est très souvent utilisé pour du profilage, des statistiques ou de l’espionnage (choisissez le mot que vous préférez).
DNT est l’entête indiquant que vous souhaitez ne pas être espionné. Il est facultatif et rarement pris en compte mais bon, ça ne mange pas de pain.
Connection est le type de connexion que votre navigateur souhaite faire. Il peut en effet faire la requête, avoir sa réponse et fermer la connexion, ou bien comme ici demander à ce que la connexion reste ouverte (dans le cas ou d’autres requêtes vers le même serveur soient faite).
Bien évidemment il peut y avoir des entêtes en plus ou en moins. C’est assez variable.
Le navigateur envoie donc ces quelques lignes de texte et attend patiemment la réponse du navigateur.
À ce moment-là le serveur web va bosser, il va analyser la requête et va devoir répondre et là il y a deux possibilités. La page demandée est une page simple statique, pas de souci, il la transmet sans se poser de question. La deuxième possibilité est beaucoup plus compliquée : la page est dite dynamique. Ça veux dire qu’à chaque fois que la page est demandée, le serveur va devoir la créer. Ce cas est beaucoup plus complexe et n’a que peu d’intéret, vous pouvez passer directement à l’étape 7 si vous le souhaitez.

5 – Génération de la page web

Il existe de très nombreux langages de programmation pour générer des pages web. Je n’aborderai que le cas le plus simple et le plus répandu, celui de PHP.
Le serveur a donc reçu une requête pour une page web, le fichier existe et contient du code (une liste d’instruction comme une recette) qu’il va demander au logiciel PHP d’exécuter. PHP va donc lire le fichier et faire tout ce qui est demandé. Et dans ce code il est possible qu’il ait besoin de farfouiller dans une base de données mysql (par exemple). Si c’est le cas, php va se connecter à la base de donnée, faire ce qu’il a à faire, récupérer ses données toussa toussa. Bon et après tout ça au final, php va générer un fichier texte qui sera votre page web. Cette étape peut être particulièrement lente en fonction de la complexité du code php pour générer la page. Il faut se rendre compte qu’un site de type réseau social (qui utilise php) doit prendre en compte énormément de paramètres pour générer une page, récupérer des données de pleins d’endroits divers et variés. Et tout cela consomme des ressources processeur/mémoire/stockage et peut prendre un certain temps.
Une fois tout ceci fait, le logiciel php va renvoyer la page au serveur web qui lui ensuite transferra à votre navigateur.

6 – Réponse HTTP

Sans trop de surprise, le navigateur reçoit la réponse à sa requête avec d’abord les entêtes puis les données :

J’ai volontairement occulté certains entêtes histoire de simplifier.
HTTP/1.1 200 OK indique que le protocole utilisé est bien http1.1 et indique le code 200 OK. Ce code indique qu’il n’y a pas d’erreur. Ici nous aurions pu recevoir le fameux 404 indiquant une page inexistante ou 403 le code indiquant une page auquel on a pas le droit d’accéder…
Donc Cache-Control indique au navigateur comment se comporter vis-à-vis du cache. Est-ce qu’il peut garder le résultat en mémoire ? Si oui, combien de temps ?
Connection est la réponse direct au même champ dans la requête, ça confirme.
Content-Encoding indique de quelle façon les données sont compressées.
Content-Type indique quand à lui quelle est la nature des données renvoyées. Dans notre cas, c’est une page web avec du texte encodé en utf-8.
Date indique tout simplement la date à laquelle il envoie les données et
Expires indique pendant combien de temps les données sont valides (ici elles ne sont valides que dans le passé donc il faudra les redemander à chaque fois qu’on recharge la page).
Server indique quel logiciel fait office de serveur web. Ici c’est le logiciel nginx en version 1.6.2. Cette information est souvent cachée afin d’éviter de potentielles attaques.
Strict-Transport-Security est un champ assez récent qui indique au navigateur que s’il compte se reconnecter dans les prochaines X secondes il est préferrable de le faire avec le protocole HTTPS.
Voilà pour l’entête. Bien entendu le serveur web en plus de l’entête envoie les données, c’est à dire la page web.

7 – Parser la page web

Le navigateur va donc recevoir du texte formaté en HTML. Il s’agit d’un langage de description assez simple fonctionnant avec des balises. Donc le navigateur va lire tout le texte et transformer ce texte en une vraie page web. Il va donc analyser les balises pour afficher non pas uniquement du texte mais également afficher des liens, des images, des vidéos… D’ailleurs en parlant d’image et de vidéos, il va avoir pas mal de boulot votre navigateur. En effet les données des images n’ont pas été transférées : une page web ne contient pas l’image en elle même mais en fait possède uniquement un lien vers celles-ci (pareil pour les vidéos ou les sons). C’est là toute la force de l’hypertexte : une page web n’est en fait que du texte contenant divers liens vers des documents épars. Pour chaque document, votre navigateur va devoir recommencer à l’étape 1 ( décoder la requête ), puis éventuellement passer à l’étape 2 si l’hôte n’est pas le même que pour la page ( faire la résolution dns pour connaitre l’ip de l’hôte du document )… jusqu’à l’étape 7 pour inclure les documents dans la page web. C’est pour cela que plus une page contient des documents plus elle est longue à afficher. Donc votre navigateur va faire non pas une requête et hop c’est fini mais une requête pour la page demandée puis une requête par document inclus dans la page (chaque image, chaque script, chaque fichier, …).

Il est d’ailleurs intéressant de noter que la page web peut inclure des documents qui ne sont pas hébergés sur le même serveur web. Tous les sites web intègrent désormais du contenu issus de nombreux acteurs divers et variés : des images hébergées dans un cdn (prestataire servant du contenu à haute vitesse à travers le monde), des pubs issues d’une ou plusieurs régies publicitaires, des icônes et scripts issus de site communautaires (boutons facebook, youtube, twitter, pinterest,…), des trackers statistiques (google analytics, piwik,…). Bref quand vous ouvrez une page web pour un site précis, il y a fort à parier que vous vous connectez également à des dizaines de serveurs divers et variés.

Une fois que notre navigateur a ramassé tous les fichiers nécessaires, il va passer à la suite.

8 – Afficher la page – Exécuter les scripts

Il y a de fortes chances que la page web demandée fasse appel à ce qu’on apelle une feuille de style CSS. Le Cascading Style Sheet est le découplage du fond et de la forme ! Le fond c’est le texte qui est dans le HTML et le CSS c’est donc la forme. Le CSS est un fichier texte qui indique comment le navigateur doit dessiner la page web. Quel couleur a le texte, le fond, où placer le menu, quelle décoration appliquer au lien, quelle police d’écriture pour tel ou tel élément… tout un tas de règle qui vont définir le rendu de votre page web. C’est aussi là-dedans qu’on fait en sorte que la page web s’adapte à l’affichage sur divers type d’appareils (ordinateur, téléphone, tablette, télévision, montre,…). Après avoir lu ce fichier, le navigateur va télécharger les polices d’écritures manquantes (c’est pour cela que le texte change pendant le chargement de la page).
Le navigateur affiche les images/vidéos au fur et à mesure qu’elles sont téléchargées (pour gagner du temps il n’attend pas de toutes les recevoir pour les afficher) ce qui peut (en fonction de la taille des images) faire bouger les éléments déjà présents.
Voilà une fois tous les éléments affichés le navigateur n’a pas fini son boulot.
Maintenant il va devoir exécuter le javascript. C’est un langage de programmation sauf qu’à la différence du php vu précédemment celui-ci n’est pas exécuté du côté du serveur mais dans le navigateur du visiteur (donc en utilisant le processeur de votre ordinateur, sa mémoire). À la base les pages web étaient figées. Javascript permet d’y ajouter des actions. Les actions peuvent être diverses et variées. Et chaque nouvelle version de javascript de votre navigateur permet de plus en plus d’actions. Le javascript est donc exécuté tant que la page est ouverte dans votre navigateur.

Voilà, je pense qu’on a fait un survol plutôt complet de ce qu’il se passe. Il est possible que j’aie un peu abrégé certaines étapes, voire ignoré certaines, mais globalement voilà ce qu’il se passe.

mise à jour : renumérotation des paragraphes