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 !

Cet article ne se veux pas absolument exhaustif et prendra quelques raccourcis par moment afin de rester compréhensif et concis. D’ailleurs je n’aborderai que le protocole IP en version 4 mais en dehors de points très techniques, tout s’applique également au protocole IP en version 6. Et je n’aborderai pas non plus le protocole HTTP/2. D’ailleurs je n’aborde pas non plus la partie routage IP qui mérite un article rien que pour elle.

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.

Jusque là, il n’y a pas eu de connexion extérieure. Pour l’instant tout ce qui s’est passé est à peu près instantané.

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.

“Quelle est l’IP correspondant à iloth.net ?
−Il s’agit de 89.234.152.131”

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

Donc la première connexion que votre navigateur effectue n’est donc pas une connexion au serveur web consulté mais une connexion au serveur dns qu’a indiqué votre système d’exploitation. Cette étape peut déjà prendre un temps non négligeable puisqu’il va falloir envoyer la requête DNS et attendre la réponse.

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 :

Client: J’aimerais me connecter à votre port 80
Serveur: Ok vous pouvez vous connecter
Client: Ok je suis connecté

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.

Le logiciel du serveur WEB n’a encore rien fait et votre navigateur pas grand chose pour sa part. Par contre encore un peu plus de temps s’est écoulé, mais ce coup-ci vous êtes connecté directement à la machine que vous voulez.
Par la suite chaque fois que vous enverrez quelque chose vers le serveur, celui-ci indiquera qu’il a bien reçu votre demande et vice versa. Ça permet de savoir si tout se passe bien.

4 – Requête HTTP

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

GET /2016/10/ce-quil-se-passe-quand-on-ouvre-une-page-web/ HTTP/1.1
Host: iloth.net
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.90 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://iloth.net/
Cookie: wordpress_test_cookie=WP+Cookie+check; XXXXXXXXXXXXXX; XXXXXXXXXX;
DNT: 1
Connection: keep-alive

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 :

HTTP/1.1 200 OK
Cache-Control: no-cache, must-revalidate, max-age=0
Connection: keep-alive
Content-Encoding: gzip
Content-Type: text/html; charset=UTF-8
Date: Thu, 20 Oct 2016 14:46:59 GMT
Expires: Wed, 11 Jan 1984 05:00:00 GMT
Server: nginx/1.6.2
Strict-Transport-Security: max-age=31536000

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.

À ce stade le serveur a fini son travail : il a répondu (positivement ou non) à la requête du navigateur et désormais attend d’autres requêtes. Il s’est donc passé pas mal de temps ce coup-ci car les données doivent prendre le temps de circuler.

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, …).

Une page moderne classique atteint assez fréquemment les 100 requêtes nécessaires. Ça représente pas mal de boulot ! Et plus le temps passe plus le poids de tout ce qui est inclus grandit au point qu’une connexion de 2Mbps autrefois très rapide commence à montrer ses limites désormais.

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.

Et c’est d’ailleurs là, la force de facebook, twitter, google. Tous les webmasters ont recours à eux histoire de générer des statistiques, ajouter des fonctionnalités plus ou moins utiles, générer un revenu. Du coup vous êtes constamment traqué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.

Au début, on se contentait de changer une image pour faire une galerie d’images. Puis on a vu apparaitre la possibilité d’aller chercher des données pour afficher des morceaux de pages web supplémentaires. On s’en sert pour vérifier la validité des données dans un formulaire (est-ce bien une date que vous avez entré ? le mot de passe que vous utilisez est-il assez fort ? …). Désormais certaines pages web sont si complexes qu’elles ressemblent à des logiciels. Il est désormais assez commun d’utiliser un traitement de texte directement dans son navigateur. Le navigateur étant à la charge d’exécuter le javascript, la performance de ce traitement est devenue un argument de vente pour les navigateurs.

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


Commentaires

    1. Oui, les sites web modernes sont devenus clairement obèses car ils intègrent énormément de ressources de droites et de gauches bien que ce soit majoritairement dispensables (voir les adblock, ublock, umatrix et compères).
      Par exemple, notre site charge généralement en moins d’une seconde car il y a peu de fichiers à charger. En tout il suffit de 6 requêtes et moins de 150Ko…
      Il va sans dire que nous n’avons pas de pub, ni de trackers.

  1. Très interressant. Il me manque juste une étape
    que je ne suis pas sur de maitriser:

    Ce qu’il se passe quand on effectue une recherche via un moteur de recherche?

    Est ce que je passe par le serveur DNS de mon FAI
    qui me renvoie l’ IP du moteur?

    S’il quelqu’un a plus des info . merci

    1. Si tu passes par un moteur de recherche tu effectues exactement le même chemin sauf qu’au lieu de le faire vers le site voulu, tu le fais vers le moteur de recherche.
      Donc tu fais les 9 étapes à destination du moteur de recherche.
      Une fois que tu as les résultats, tu referas une fois de plus les 9 étapes vers le site voulu.

      Pour le DNS, si tu n’as rien configuré de particulier, oui ton FAI reçoit toutes tes requêtes DNS. Potentiellement ils archivent tout ça et sont capable de dire : tel jour, tel client, à fait la requête DNS pour tel site web.

      1. J’ai voulu relire cet article dont je me souvenais et j’ai été
        agréablement surpris en voyant qu’il y avait eu une réponse a ma question .(d ‘autant plus que c’etait mon
        premier post) ..magie d’internet et de toi . merci beaucoup

  2. Merci pour cet article! Il en va d’une prise de conscience politique (contrôle du réseau, vie privée, etc.) et écologique d’expliquer ainsi le fonctionnement et les ressources utilisées par un affichage de page Web.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *