{"id":125,"date":"2025-06-18T18:37:25","date_gmt":"2025-06-18T16:37:25","guid":{"rendered":"https:\/\/buildmytech.fr\/?p=125"},"modified":"2025-06-23T11:29:24","modified_gmt":"2025-06-23T09:29:24","slug":"navigateur-1-3","status":"publish","type":"post","link":"https:\/\/buildmytech.fr\/index.php\/2025\/06\/18\/navigateur-1-3\/","title":{"rendered":"Navigateur 1\/3"},"content":{"rendered":"<h1><span style=\"color: #e6af2a;\"><strong>Navigateur internet (1\/3)<\/strong><\/span><\/h1>\r\n&nbsp;\r\n\r\nSauf si vous \u00eates une personne \u00e2g\u00e9e ou un ermite, vous avez \u00e9t\u00e9 amen\u00e9 au moins une fois \u00e0 utiliser un <strong><span style=\"color: #e6af2a;\">navigateur internet<\/span><\/strong> pour par exemple acheter sur votre e-commerce pr\u00e9f\u00e9r\u00e9, organiser votre prochain voyage ou consommer des vid\u00e9os Youtube au travail\r\n\r\nComme souvent, on utilise des outils quotidiennement sans se poser de question sur leur fonctionnement. Aujourd\u2019hui je vous propose \u00e0 travers trois articles d\u2019en apprendre plus.\r\n\r\nPour bien commencer, je vous propose de voir ses interactions sur le web. Tout d'abord nous verrons comment le navigateur arrive a trouv\u00e9 le bon serveur. Puis on comprendra comment il se connecte \u00e0 ce dernier. Pour finir on verra comment il r\u00e9alise la connexion de mani\u00e8re s\u00e9curis\u00e9e.\r\n<h2>Trouver le bon serveur sur le web<\/h2>\r\n&nbsp;\r\n\r\nAvant de plus d\u00e9velopper il faut savoir que les ordinateurs connect\u00e9s \u00e0 internet se divisent \u00a0en deux cat\u00e9gories:\r\n<ol>\r\n \t<li>Les <span style=\"color: #e6af2a;\"><strong>clients<\/strong><\/span> ils regroupent tous nos appareils que nous utilisons pour nous connecter \u00e0 internet (ordinateur, t\u00e9l\u00e9phone, tablette\u2026). Ils peuvent aller sur le web gr\u00e2ce \u00e0 un navigateur internet ou une application mobile.<\/li>\r\n \t<li>Les <strong><span style=\"color: #e6af2a;\">serveurs<\/span><\/strong> sont des \u00ab gros \u00bb ordinateurs qui stockent des entit\u00e9s joignables par les clients. Ces entit\u00e9s peuvent \u00eatre des pages web, des donn\u00e9es, des images, des vid\u00e9os\u2026 Le serveur envoie aux clients une copie du contenu stock\u00e9.<\/li>\r\n<\/ol>\r\nLes interactions pour trouver le bon serveur sur le web se d\u00e9roulent en deux \u00e9tapes comme illustr\u00e9 ci-dessous :\r\n<ol>\r\n \t<li><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-126\" src=\"http:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/06\/navigateurdnspage.png\" alt=\"\" width=\"771\" height=\"632\" srcset=\"https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/06\/navigateurdnspage.png 771w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/06\/navigateurdnspage-300x246.png 300w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/06\/navigateurdnspage-768x630.png 768w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/06\/navigateurdnspage-81x66.png 81w\" sizes=\"auto, (max-width: 771px) 100vw, 771px\" \/>En tapant l\u2019url de votre site, vous allez d\u2019abord contacter un <span style=\"color: #e6af2a;\"><strong>serveur DNS<\/strong><\/span>. Il va vous renvoyer \u00e0 partir du nom du site une <strong><span style=\"color: #e6af2a;\">adresse IP<\/span><\/strong>. Qu\u2019est-ce qu\u2019une adresse IP ? C\u2019est une \u00ab adresse \u00bb constitu\u00e9e de 4 nombres sous la forme XXX.XXX.XXX.XXX. Elle permet de trouver le serveur qu\u2019on recherche. On peut le consid\u00e9rer comme l'\u00e9quivalent de l\u2019adresse postale pour les ordinateurs.<\/li>\r\n \t<li>Ensuite l\u2019ordinateur peut trouver le bon serveur, se connecter et commencer \u00e0 interagir avec lui.<\/li>\r\n<\/ol>\r\nMaintenant que l'ordinateur \u00e0 trouver le bon serveur, il faut qu'il se connecte dessus. Comment la connexion entre un client et un serveur se d\u00e9roule?\r\n<h2>Se connecter entre l'ordinateur et le serveur.<\/h2>\r\nPour se connecter, l\u2019interaction va utiliser le protocole <span style=\"color: #e6af2a;\"><strong>TCP<\/strong><\/span> (Transmission Control Protocol). Ce dernier est un protocole d\u2019h\u00f4te \u00e0 h\u00f4te permettant la communication entre deux ordinateurs\/serveur dans un r\u00e9seau d\u2019IP ici internet. Le protocole TCP utilise une liaison \u00e0 trois voies\u00a0:\r\n<h2><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-127\" src=\"http:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/06\/handshake.png\" alt=\"\" width=\"690\" height=\"200\" srcset=\"https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/06\/handshake.png 690w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/06\/handshake-300x87.png 300w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/06\/handshake-81x23.png 81w\" sizes=\"auto, (max-width: 690px) 100vw, 690px\" \/><\/h2>\r\n<ol>\r\n \t<li>Le navigateur envoie un paquet <span style=\"color: #e6af2a;\"><strong>SYN<\/strong><\/span> (synchronise) au serveur dont le num\u00e9ro de s\u00e9quence est un nombre <strong>A<\/strong> al\u00e9atoire.<\/li>\r\n \t<li>Le serveur r\u00e9pond avec un paquet <strong><span style=\"color: #e6af2a;\">SYN-ACK<\/span><\/strong>\u00a0 (synchronise acknowledge). La partie \"ACK\" se trouve \u00eatre <strong>A<\/strong> incr\u00e9ment\u00e9 de 1 (A+1). Le num\u00e9ro du paquet\u00a0 \"SYN-ACK\" est un nombre <strong>B<\/strong> al\u00e9atoire.<\/li>\r\n \t<li>L\u2019ordinateur va envoyer un paquet <strong><span style=\"color: #e6af2a;\">ACK<\/span><\/strong> servant d\u2019accus\u00e9 de r\u00e9ception. Le num\u00e9ro du paquet \"ACK\" se trouve \u00eatre A incr\u00e9ment\u00e9 de 2 tandis que le num\u00e9ro port\u00e9 par ACK est <strong>B+1<\/strong>.<\/li>\r\n<\/ol>\r\nMaintenant l\u2019ordinateur et le serveur se sont bien connect\u00e9s.\r\n\r\nSe connecter \u00e0 un serveur c\u2019est bien. Se connecter en toute s\u00e9curit\u00e9 c\u2019est encore mieux voir vitale. Imaginez, vous allez sur le site de votre banque prot\u00e9g\u00e9 uniquement par un pseudonyme et un mot de passe. Vous vous connectez sur le wifi d\u2019un a\u00e9roport. Un hacker pr\u00e9sent sur les lieux \u00e9coute le trafic sur ce wifi. Il r\u00e9cup\u00e8re vos identifiants transmis en clair. Il peut se faire passer pour vous et faire des actes n\u00e9fastes comme vider votre compte en banque.\r\n\r\nPour \u00e9viter ces probl\u00e8mes il y a la possibilit\u00e9 d\u2019avoir une connexion s\u00e9curis\u00e9e entre un serveur et son ordinateur.\r\n<h2>Connexion s\u00e9curis\u00e9e entre serveurs et ordinateurs<\/h2>\r\nDe plus en plus de sites internet n\u00e9cessitent le protocole <span style=\"color: #e6af2a;\"><strong>https<\/strong><\/span>\u00a0 pour \u00eatre \u00ab visit\u00e9 \u00bb et non http . Voici comment fonctionne le https <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-128\" src=\"http:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/06\/https.png\" alt=\"\" width=\"690\" height=\"215\" srcset=\"https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/06\/https.png 690w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/06\/https-300x93.png 300w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/06\/https-81x25.png 81w\" sizes=\"auto, (max-width: 690px) 100vw, 690px\" \/>\r\n<ol>\r\n \t<li>Le navigateur contacte le serveur en lui pr\u00e9sentant une liste de m\u00e9thode de chiffrement.<\/li>\r\n \t<li>Le serveur r\u00e9pond en renvoyant un certificat fourni par une autorit\u00e9 ind\u00e9pendante. Il permet de valider qu\u2019on se connecte sur le bon serveur. Ce certificat est accompagn\u00e9 par une cl\u00e9 de session.<\/li>\r\n \t<li>Maintenant la communication peut commencer comme vu dans la pr\u00e9c\u00e9dente partie. Il y a juste un chiffrement en plus avec cette cl\u00e9 de session pour que la communication ne puisse \u00eatre comprise si elle est intercept\u00e9e.<\/li>\r\n \t<li>Le serveur web renvoie la r\u00e9ponse \u00e0 la requ\u00eate et ce dernier sera d\u00e9chiffr\u00e9e par le navigateur gr\u00e2ce \u00e0 sa cl\u00e9 de session.<\/li>\r\n<\/ol>\r\n&nbsp;\r\n<h2>Et apr\u00e8s?<\/h2>\r\nMaintenant que la connexion est faite, on peut se demander comment le contenu de la page est envoy\u00e9 au client\u00a0?\r\n<ol>\r\n \t<li>Le navigateur utilise le protocole \u00ab http \u00bb en utilisant la m\u00e9thode <strong><span style=\"color: #e6af2a;\">get<\/span><\/strong>\u00a0 signifiant qu\u2019il souhaite recevoir le contenu de la page demand\u00e9e.<\/li>\r\n \t<li>Le serveur va envoyer sa r\u00e9ponse en plusieurs paquets en utilisant le protocole TCP. Pour chaque paquet, le navigateur renverra un ACK pour ne pas envoyer trop de paquets d\u2019un coup. Si le client est submerg\u00e9, il ne pourra pas tout traiter et certains paquets seront supprim\u00e9s. En fonction du d\u00e9lai de r\u00e9ponse entre l\u2019envoi du paquet et l\u2019ACK, l\u2019algorithme (programme) <span style=\"color: #e6af2a;\"><strong>TCP slow start<\/strong><\/span> d\u00e9tectera la bande passante disponible et pourra r\u00e9guler efficacement le d\u00e9bit des envois.<\/li>\r\n<\/ol>\r\n&nbsp;\r\n\r\nApr\u00e8s avoir re\u00e7u la r\u00e9ponse le navigateur va le traiter en deux \u00e9tapes :\r\n<ul>\r\n \t<li>Parsing : il va analyser les fichiers de code html, css et javascript, extraire le contenu pour pouvoir le traiter.<\/li>\r\n \t<li>Rendu : il va retravailler le contenu pour pouvoir donner toutes les informations permettant au navigateur de l\u2019afficher.<\/li>\r\n<\/ul>\r\n&nbsp;\r\n<h2>Pour finir<\/h2>\r\nComme nous l\u2019avons vu, le navigateur internet utilise le serveur DNS pour obtenir l\u2019adresse IP du site recherch\u00e9. Ensuite il se connecte \u00e0 lui en \u00e9changeant des paquets et peut m\u00eame chiffrer ses connexions et demander des certificats pour s\u00e9curiser les \u00e9changes.\r\n\r\nBien s\u00fbr, j'aurai pu rentrer plus en d\u00e9tails dans les explications en parlant de l'ipv6 ou de http\/3 mais ne voulant pas vous provoquer un avc j'ai pr\u00e9f\u00e9r\u00e9 rester simple.\r\n\r\nApr\u00e8s avoir vu les interactions des navigateurs internet sur le web, il serait int\u00e9ressant de voir comment ils ont \u00e9t\u00e9 cr\u00e9\u00e9 et ont \u00e9volu\u00e9 pendant ces derni\u00e8res d\u00e9cennies. Dans<span style=\"color: #cc99ff;\"><strong> <a style=\"color: #cc99ff;\" href=\"https:\/\/buildmytech.fr\/index.php\/2025\/06\/23\/navigateur-internet-2-3\/\">le prochain article<\/a><\/strong><\/span>, leur \u00e9volution vous sera racont\u00e9 et vous verrez comment nous sommes pass\u00e9 d\u2019un monde exp\u00e9rimental \u00e0 des monopoles qui ont tous fini par \u00eatre d\u00e9tr\u00f4n\u00e9 \u00e0 la situation d\u2019aujourd\u2019hui avec ses nouvelles r\u00e8gles.","protected":false},"excerpt":{"rendered":"<p>Navigateur internet (1\/3) &nbsp; Sauf si vous \u00eates une personne \u00e2g\u00e9e ou un ermite, vous avez \u00e9t\u00e9 amen\u00e9 au moins une fois \u00e0 utiliser un navigateur internet pour par exemple acheter sur votre e-commerce pr\u00e9f\u00e9r\u00e9, organiser votre prochain voyage ou consommer des vid\u00e9os Youtube au travail Comme souvent, on utilise des outils quotidiennement sans se [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":226,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-125","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-back-to-basics","category-navigateur"],"_links":{"self":[{"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/posts\/125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/comments?post=125"}],"version-history":[{"count":100,"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/posts\/125\/revisions"}],"predecessor-version":[{"id":312,"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/posts\/125\/revisions\/312"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/media\/226"}],"wp:attachment":[{"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/media?parent=125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/categories?post=125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/tags?post=125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}