Concepts de réseau informatique

Réseau

ensemble de nœuds reliés entre eux par des liens (ou canaux).

Réseau informatique

réseau où les nœuds sont des ordinateurs. Les liens sont hétérogènes (câbles, liaisons radio, liaisons satellites, …)

Protocole

ensemble de conventions permettant d'établir une communication mais qui ne font pas partie du sujet de la communication.

Rappels sur le modèle TCP/IP

• Modèle organisé en 4 couches, avec 1 protocole par couche :

  N	Nom	Description	Eq. OSI
  4	Application	HTTP, Bitorrent, FTP, …	5, 6, 7
  3	Transport	TCP, UDP, SCTP, …	4
  2	Internet	IP (v4, v6), ICMP, IPsec, …	3
  1	Liaison	Ethernet, 802.11, …	1, 2

• Les machines sont identifiées par leur(s) adresse(s) IP
• En IP version 4, les adresses sont constituées de 4 octets, représentés en décimal :
  129.175.28.179
• Le protocole IP se charge du routage la transmission des données entre deux machines (en passant par des machines intermédiaires)
• Le protocole TCP utilise IP pour fournir une communication bi-directionnelle, sans perte et avec garantie d'envoi/reception dans l'ordre

Bien d'autres choses

• Modèle OSI (à 7 couches, plus « formel » que TCP/IP)
• Comment identifier les « voisins » d'un nœud (le sous réseau local) : classe d'adresses (obsolète) et masques de sous réseau
• Principes généraux du routage
• Fragmentation et réassemblage des paquets
• Épuisement du nombre d'adresses (survol d'IPv6)
• Commmunications en TCP
• …

DNS

Domain Name System : permet d'attribuer un nom à une IP (annuaire). Double avantage :

• pour les humains, un nom est plus simple à retenir
• on peut changer d'adresse IP de manière silencieuse

Principe hiérarchisé :

• les serveurs DNS de premier niveau gardent les informations sur les TLD (Top Level Domain, domaine de premier niveau) : .com, .fr, .net, … )
• pour chaque tld, il y a un ensemble de serveur DNS de niveau 2 qui fait correspondre le nom de domaine (google.com, u-psud.fr) à un DNS de niveau 3 (généralement le DNS de niveau 2 est chez le FAI)
• le DNS de niveau 3 donne l'IP d'une machine particulière sur son domaine : mail, www (le DNS de niveau 3 est administré localement)

Bref historique d'Internet (1/2)

1959-1968	ARPA (Advanced Research Project Agency) crée un réseau de quelques machines capable de résister à une attaque.
1969	ARPANET. Interconnexion des ordinateurs centraux des grandes universités et institutions américaines. Première utilisation du concept de paquet d'information.
1970-1982	Interconnexion avec la Norvège et le Royaume-Uni.
1982	Généralisation du protocole TCP/IP. Naissance de l'Internet actuel.

Bref historique d'Internet (2/2)

1986	« Autoroutes de l'information ». Des super-ordinateurs et les premières connexions à fibres optiques sont utilisées pour accélérer le débit d'Internet.
1987-1992	Apparition des premiers fournisseurs d'accès. Les entreprises se connectent.
1993-2000	Avènement du Web. Démocratisation du haut débit (vers 2000 pour la France).
2000-?	Explosion des services en ligne, arrivée des réseaux sociaux, internet mobile, Cloud (stockage et calcul mutualisés accessible depuis internet).

Internet

• Ensemble de logiciels et protocoles basés sur TCP/IP
• Les applications suivent un modèle Client/Serveur
• Un serveur fournit un service:
  • courriel
  • transfert de fichier (ftp)
  • connexion à distance (ssh)
  • Web (http)
• Plusieurs services peuvent être actifs sur la même machine (serveur). Un port (identifiant numérique) est associé à chaque service. Sur Internet, un service est identifié par:
  • L'adresse IP de la machine sur laquelle il fonctionne
  • Le numéro de port sur lequel le programme attend les connexions

Démo

On établit une connexion TCP, sur le port 4444 entre notre machine et la machine dont l'IP est 149.56.108.199.

La commande Unix netcat possède deux mode de fonctionnement :

• netcat -l 4444 : se met en attente de connexion sur le port 4444. Toutes les données reçues sont écrites sur la sortie, toutes les données entrées sont envoyées au client connecté.
• netcat 149.56.108.199 4444 se connecte à un serveur en TCP sur le port 4444. Gestion des lectures/écritures identiques.

World Wide Web (1/2)

• Service de distribution de page hypertexte
• Une page hypertexte contient des références immédiatement accessibles à d'autres pages (pointeurs ou liens hypertextes)
• Les pages sont décrites dans le langage HTML (HyperText Markup Language)
• Architecture client/serveur:
  • Les pages sont stockées sur le serveur
  • Les pages sont envoyées au client (navigateur Web) qui en assure le rendu
• Utilise le protocole HTTP pour les échanges entre le client et le serveur

World Wide Web (2/2)

Concepts clé:

URL	localisation d'une page Web (« adresse de la page »)
HTTP	protocole de communication entre un client et un serveur Web
HTML	langage de description des pages Web

Évolutions récentes (Web 2.0, internet mobile, Cloud, …)

• Standardisation du contenu multimédia (images, vidéos et sons en streaming)
• Contenu interactif avancé (stockage de fichier coté client, rendu 3D, …)
• Uniformisation de nombreuses extensions ad-hoc: HTML5

Fonctionnement du Web

Côté client

Le navigateur :

• Analyse l'URL demandée
• Obtient l'adresse IP auprès du serveur DNS
• Établit une connexion (potentiellement sécurisée) avec le serveur
• Envoie une requête HTTP au serveur
• Récupère la page envoyée par le serveur dans sa réponse
• Analyse la page et récupère les éléments référencés : images, sons, …
• Effectue le traitement du code client
• Met en forme le contenu et l'affiche dans la fenêtre

Côté serveur

• Un serveur Web attend les connexions sur un port par défaut (80 dans le cas de HTTP)
• À chaque nouvelle connexion, le serveur crée un nouveau sous-processus de traitement et se remet en attente
• Le sous-processus de traitement vérifie la validité de la requête :
  • le document demandé existe ?
  • le client est autorisé à accéder au document ?
  • …
• Le sous-processus de traitement répond à la requête :
  • Exécution de code côté serveur, récupération de données dans une BDD, …
  • Envoi de la page au client

Adressage des documents Web (1/3)

URL	Uniform Resource Locator identifie un document sur internet

Une URL se décompose en 3 parties

• protocole (comment ?)
• adresse (où ?)
• document (quoi ?)

Syntaxe (simplifiée) :

protocole://adresse/document

Exemple :

http://www.lri.fr/~kn/teach_fr.html

Adressage des documents Web (2/3)

On peut aussi préciser un numéro de port, des paramètres et un emplacement :

protocole://adresse:port/document?p1=v1&p2=v2#empl

Exemple :

http://www.youtube.com:80/results?search_query=cat#search-results

Le serveur utilise les paramètres passés par le client dans l'URL pour calculer le contenu de la page (changer la chaîne « cat » ci-dessus et essayer)

Adressage des documents Web (3/3)

La racine d'un site Web (ex: http://www.lri.fr/) correspond à un répertoire sur le disque du serveur (ex: /var/www). Le fichier

http://www.lri.fr/index.html

se trouve à l'emplacement

/var/www/index.html

Le serveur Web peut aussi effectuer des réécritures d'adresses :

http://www.lri.fr/~kn/index.html

devient

/home/kn/public_html/index.html

Caractéristiques du protocole HTTP

• Sans connexion permanente:
  • Le client se connecte au serveur, envoie sa requête
  • Le serveur envoie sa réponse et ferme la connexion
• Indépendant du contenu : permet d'envoyer des documents (hyper) texte, du son, des images, …
• Sans état: chaque paire requête/réponse est indépendante (le serveur ne maintient pas d'information sur le client entre les requêtes)
• Protocole en mode texte

Format des messages HTTP

Les messages ont la forme suivante

• Ligne initiale CR LF
• zéro ou plusieurs lignes d'option CR LF
• CR LF
• Corp du message (document envoyé, paramètres de la requête, …)

• Requête la première ligne contient un nom de méthode (GET, POST, HEAD, …), le paramètre de la méthode et la version du protocole
• Réponse la version du protocole, le code de la réponse (200, 404, 403, …) et un message informatif

Remarque : dans les chaînes de caractères Python (ainsi que dans d'autres langages) le caractère CR (carriage return) s'obtient par \r et le caractère LF (line feed) par \n.

Démo

• On réutilise le programme netcat pour explorer un peu le protocole HTTP
• On utilise d'abord netcat -l 4444 et on s'y connecte avec un navigateur Web
• En suite, on utilise netcat idea.nguyen.vg 80 pour récuprer une page.

Détail sur HTTP

• Client : GET /test.html HTTP/1.1 Host: idea.nguyen.vg:80
• Serveur :
  HTTP/1.1 200 OK Server: nginx/1.10.3 (Ubuntu) Date: Thu, 13 Jun 2019 18:59:49 GMT Content-Type: text/html Content-Length: 128 Last-Modified: Wed, 12 Jun 2019 10:15:01 GMT Connection: close ETag: "5d00d0a5-80" Accept-Ranges: bytes

  Une page de test

  Super ! ]]> } ← code de retour } ← type de contenu } ← longueur du contenu } ← contenu (128 octets)

Point méthode

• On peut faire des exercices débranchés sur le partie IP (voire TCP)
• Faire des TPs est super intéressant (sous Unix avec netcat ou en Python, cf. feuille d'exercices)
• Les TPs sont très très dépendants de la configuration réseau (présence d'un pare-feu, obligation de passer par un proxy, …)
• Les TPs « Système et Réseau » doivent être fait sous idle (ou avec un autre éditeur) et le programme lancé localement. Ils fonctionneront difficilement avec un environnement de type jupyter

Représentation des textes

Avant de représenter des documents complexes, on s'intéresse aux textes (sans structure particulière)

Problématique: comment représenter du texte réaliste ?

Exemple de texte réaliste:
" و عليكم السلام,Здравей,¡Hola!, 你好,Góðan daginn,… "

Historiquement…

Encodage 1 caractère = 1 octet (8 bits) :

• Encodage ASCII sur 7 bits (128 caractères)
• ASCII étendu 8 bits (256 caractères, dont 128 de « symboles »
• Latin 1 : ASCII 7 bits + 128 caractères « ouest-européens » (lettres accentuées française, italienne, …)
• Latin 2 : ASCII 7 bits + 128 caractères « est-européens » (Serbe, Hongrois, Croate, Tchèque, …)
• Latin 3 : ASCII 7 bits + 128 caractères turques, maltais, espéranto,
• Latin 4 : ASCII 7 bits + 128 caractères islandais, lituanien, …
• …
• Latin 15 : Latin 1 avec 4 caractères « inutiles » remplacés (par exemple pour « € » à la place de « ¤ »)

… et pendant ce temps là, ailleurs dans le monde

Encodage multi-octets:

• Encodages spécifiques pour le Chinois (Big5, GB, …)
• Encodages spécifiques pour le Japonais (Shift-JIS, EUC, …)

Impossibilité de mettre plusieurs « alphabets » dans un même texte

Chaque logiciel « interprétait » les séquences d'octet de manière prédéfinie

UTF-8

Universal (Character Set) Transformation Format 8 bit

• Un organisme (ISO) donne un code à chaque symbole. C'est le standard Unicode (la version actuelle, 12.1 référence 137 994 symboles).
• Encodage à taille variable « universel » (contient tous les alphabets connus)
• Compatible avec ASCII 7 bits

Encodage

Nombre d'octets	Octet 1	Octet 2	Octet 3	Octet 4
1	0xxxxxxx
2	110xxxxx	10xxxxxx
3	1110xxxx	10xxxxxx	10xxxxxx
4	11110xxx	10xxxxxx	10xxxxxx	10xxxxxx

Exemples

A  ⟶  65₁₀  ⟶  0100 0001₂ (représenté sur un seul octet)
ễ  ⟶  7877₁₀  ⟶  0001 1110 1100 0101₂ (représenté 3 octets) :
11100001 1011 10 11 1000 0101≡ 225 187 133
🐵  ⟶  128053₁₀  ⟶  … ≡ 240 237 220 181
Avantages :

• compatible ASCII 7 bits (d'anciens documents texte en anglais sont toujours lisibles)
• pas d'espace gaspillé (à l'inverse d'UTF-32 ou tous les caractères font 32 bits)

Inconvénients

• Caractères à taille variable: il faut parcourir le texte pour trouver le n^ème caractère
• Les vieux logiciels doivent être adaptés

En Python…

Les chaînes de caractères sont encodées en UTF-8. La fonction len(…) renvoie le nombre de caractères dans la chaîne (et non pas le nombre d'octets).

Comme on veut parfois manipuler des séquences d'octets arbitraires (par exemple 255 255 255) qui peuvent ne pas être des séquences UTF-8 valide, Python propose le type bytes. Il utilise la même syntaxe que les chaînes mais :

• Elle est préfixée d'un b
• Elle ne contient que des caractères ASCII 7 bits (pas d'accent en particulier). Les caractères non directement représentables sont échapés et leur code est donné en hexadécimal :
• La méthode .encode() sur une chaîne permet de convertir en bytes(fonctionne toujours).
• La méthode .decode() sur un bytes permet de convertir en chaîne

Attention, beaucoup de fonctionalités « système » (et réseau en particulier) utilisent des bytes

Encodage/Décodage

>>> mot = "éléphant" >>> len(mot) 8 >>> octets = mot.encode() >>> octets b'\xc3\xa9l\xc3\xa9phant' >>> len(octets) 10 >>> octets.decode() 'éléphant' >>> invalide = b"\xff\xff" >>> invalide.decode() Traceback (most recent call last): File "<stdin>", line 1, in <module> UnicodeDecodeError: 'utf-8' codec can't decode byte 0xff in position 0: invalid start byte

HTML

HyperText Markup Language : langage de mise en forme de documents hypertextes (texte + liens vers d'autres documents). Développé au CERN en 1989.
1991 : premier navigateur en mode texte
1993 : premier navigateur graphique (mosaic) développé au NCSA (National Center for Supercomputing Applications)

Document HTML

• est un document semi-structuré
• dont la structure est donnée par des balises

On dit que ]]> est une balise ouvrante et ]]> une balise fermante. On peut écrire ]]> comme raccourci pour ]]>.

Historique du langage HTML

1973	GML, Generalised Markup Language développé chez IBM. Introduction de la notion de balise.
1980	SGML, Standardised GML, adopté par l'ISO
1989	HTML, basé sur SGML. Plusieurs entreprises (microsoft, netscape, ... ) interprètent le standard de manière différente
1996	XML, eXtensible Markup Language norme pour les documents semi-structurés (SGML simplifié)
2000	XHTML, version de HTML suivant les conventions XML
2008	Première proposition pour le nouveau standard, HTML5
2014	Standardisation de HTML 5.0
2017	Standardisation de HTML 5.2

XHTML vs HTML

Différences avec HTML:

• Les balises sont bien parenthésées ( ]]> </p> est interdit)
• Les balises sont en minuscules

Les avantages sont les suivants

• HTML autorise les mélanges majuscule/minuscule, de ne pas fermer certaines balise … Les navigateurs corrigent ces erreurs de manières différentes
• Le document est structuré comme un programme informatique (les balises ouvrantes/fermantes correspondent à { et }). Plus simple à débugger.

Convention pour le cours

Afin d'être compatible à la fois XHTML et HTML5, on utilisera les conventions suivantes :

• Les balises suivantes et celle-ci uniquement doivent ne pas avoir de contenu : area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr Exemple : <img src='toto.jpg' alt='une image' /> Toutes les autres balises doivent obligatoirement être de la forme: … ]]>
• Les noms de balises sont toujours en minuscule
• Le doctype (balise spéciale indiquant le type de document) est : <!DOCTYPE html>

Rôle d'HTML

Séparer la structure du document de son rendu. La structure donne une sémantique au document :

• ceci est un titre
• ceci est un paragraphe
• ceci est un ensemble de caractères importants

Cela permet au navigateur d'assurer un rendu en fonction de la sémantique. Il existe différents types de rendus:

• graphique interactif (Chrome, Firefox, Internet Explorer, …)
• texte interactif (Lynx, navigateur en mode texte)
• graphique statique (par ex: sur livre électronique)
• rendu sur papier
• graphique pour petit écran (terminal mobile)

Exemple de document

Structure d'un document HTML

Pour être valide un document HTML contient au moins les choses suivantes suivantes :

• Une indication <!DOCTYPE html> en début de fichier
• Une balise <html> qui est la racine (elle englobe toutes les autres balises). La balise html contient deux balises filles: <head> et <body>
• La balise <head> représente l'en-tête du document. Elle peut contenir diverses informations (feuilles de styles, titre, encodage de caractères, …). La seule balise obligatoire dans head est le titre (title). C'est le texte qui est affiché dans la barre de fenêtre du navigateur ou dans l'onglet.
• Il faut aussi souvent ajouter une balise <meta charset="utf-8" /> dans la balise head (si le navigateur n'a pas pu obtenir l'information par un autre moyen, par exemple dans les en-tête de la requête HTTP)
• la balise body représente le contenu de la page. On y trouve diverses balises (div, p, table, …) qui formatent le contenu de la page

Titres

Les balises <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, permettent de créer des titres de section, sous-section , sous-sous-section ,…