Fonctionnement du Web
| 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. |
| 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). |
On établit une connexion TCP, sur le port 4444 entre notre machine et la machine dont l'IP est 127.0.0.1.
La commande Unix netcat possède deux mode de fonctionnement :
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, …)
Le navigateur :
| URL | Uniform Resource Locator identifie un document sur internet |
Une URL se décompose en 3 parties
Syntaxe (simplifiée) :
protocole://adresse/document
Exemple :
http://www.lri.fr/~kn/teach_fr.html
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)
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 :
https://usr.lmf.cnrs.fr/~kn/index.html
devient
/home/kn/public_html/index.html
Les messages ont la forme suivante
GET /test.html HTTP/1.1
Host: www.nsi-premiere.fr:80
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
} ← code de retour
} ← type de contenu
} ← longueur du contenu
} ← contenu (128 octets)
Alice et Bob veulent échanger des données confidentielles.
Non sûr (Alice et Bob doivent se mettre d'accord sur une clé en
« clair », par email par exemple) ou non pratique
(ils doivent se rencontrer physiquement pour échanger la
clé).
Efficace: on peut implanter plusieurs algorithmes
de chiffrements en utilisant uniquement des opérations
logiques de bases
(AND, OR, XOR). Il est facile de
les implanter sur des puces dédiées (cartes de crédit,
processeurs mobiles). Ils sont « sûrs » tant que la clé
reste secrète.
Alice et Bob veulent échanger des données confidentielles.
Sûr et pratique
Peu efficace: repose sur des problèmes
mathématiques difficiles. Chiffrer et
déchiffrer un message n'est pas réaliste pour des grands
messages (vidéo en streaming, requêtes Web, …).
On combine les deux méthodes. (Alice envoie un message à Bob)
⇒ Ceci est à la base de protocoles tels que HTTPS
Le chiffrement asymétrique permet aussi d'avoir la preuve que quelqu'un est bien Bob!
⇒ Comment garantir que la personne qui a généré les clés au départ est bien Bob ?
La cryptographie asymétrique fonctionne exactement comme l'analogie de la boîte aux lettres. Pourquoi ?
HTTP est un protocole texte, les données ne sont pas chiffrées et sans identification
Alice représente le client, Bob le serveur et Eve (Eavesdropper) l'attaquante
On suppose que Eve est root sur la machine. Il suffit de lire les paquets qui transitent par la carte réseau (tcpdump sous Linux).
Ce problème touche tous les protocoles en clair: HTTP, POP, IMAP, FTP, …. Il peut être résolu grâce au chiffrement de toute la connexion.
Mallory se place entre Alice (cliente) et Bob (banque), par exemple au moyen d'un e-mail frauduleux en HTML:
HTTP Secure
Bob possède des clés publiques et privées (KBpub et KBpriv), Trent possède des clés publiques et privées (KTpub et KTpriv)
Bob et Trent se rencontrent. Trent signe la clé publique de Bob en calculant
Les tiers de confiance sont des entités (états, associations, compagnies privées) qui se chargent de vérifier les clés publiques d'autres entités. C'est une vérification physique (documents administratifs, …).
Cette erreur s'affiche quand une signature n'est pas conforme ou n'a pas pu être vérifiée
Attaques contre les authorités de certifications
(tiers de confiance): difficiles, mais pas impossible. Certains
tiers de confiance sont douteux (états voyous, compagnie
piratées dont les clés privées sont compromises,…)
Attaques d'implémentation (plus probables) : on
exploite un bug dans le code des serveurs web ou des
navigateurs
Autres faiblesses: HTTPS est en « haut » dans la pile
IP (application). On peut donc avoir connaissance du nombre de
paquet échangés, des adresses IP des participants, la taille
et la fréquence des paquets… (même si on n'en connaît pas le
contenu). Cela permet certaines attaques statistiques ou de déni
de service (DoS).
Le protocole HTTP est un protocole sans état. Lorsque le serveur ferme une connexion TCP après avoir envoyé sa réponse, il « oublie » le client (i.e. rien dans le protoocle n'indique de conserver un historique des requêtes).
Exemple
Problème Aucun mécanisme dans HTTP (ou dans TCP ou IP) ne permet d'identifier de façon exacte le client, i.e. l'utilisateur qui a fait la première requête.
Un cookie est un petit paquet d'information, renvoyé par le serveur grâce à l'en-tête Set-Cookie:
HTTP/1.1 200 OK
Server: nginx/1.14.0 (Ubuntu)
Date: Tue, 19 Oct 2021 17:33:53 GMT
Content-Type: text/html
Content-Length: 2
Set-Cookie: foo=superdata42; Max-Age=3600
...
Le site crée un cookie appelé foo, contenant la valeur superdata42 et d'une durée de vie de 3600 secondes.
Cette donnée est stockée par le navigateur et renvoyée pour chaque requête (tant qu'il n'a pas expiré).
On peut faire persister de l'information entre plusieurs requêtes.
Problème : l'information est sous le contrôle du client.
Une session HTTP est un ensemble de paires requêtes/réponses entre un client et le serveur. Un état est maintenu côté serveur pour toute la durée de la session. Exemple :
On peut implémenter des sessions en utilisant des cookies.
On suppose que le serveur maintient un dictionnaire de dictionnaires appelé S.
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)
| Exemple | Rendu par défaut |
|---|---|
|
|
Un texte en gras |
|
Un lien |
|
|
On dit que
| 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 |
Séparer la structure du document de son rendu. La structure donne une sémantique au document :
Cela permet au navigateur d'assurer un rendu en fonction de la sémantique. Il existe différents types de rendus:
<!DOCTYPE html>
<html>
<head>
<title>Un titre</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Titre de section</h1>
<p> premier paragraphe de texte. On met
un <a href="http://www.lri.fr">lien</a> ici.
</p>
<!-- on peut aussi mettre des commentaires -->
</body>
</html>
Pour être valide un document HTML contient au moins les balises suivantes :
Les balises <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, permettent de créer des titres de section, sous-section , sous-sous-section ,…
Des paragraphes de textes sont introduits avec les balises <p>. Par défaut chaque paragraphe implique un retour à la ligne:
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamc</p>
<p>Nouveau paragraphe</p>
Remarque : par défaut, les espaces, retour à la ligne, … sont ignorés et le texte est reformaté pour remplir la largeur de la page.
Les balises <b> (bold, gras), <i> (italic, italique), <u> (underlined, souligné) <em> (emphasis, important) et beaucoup d'autres permettent de décorer le texte.
<p><b>Lorem ipsum dolor</b> sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. <u>Ut enim ad minim veniam</u>, <em>quis</em> nostrud
exercitation ullamc</p>
<p><i>Nouveau</i> paragraphe</p>
On peut formater des tables en utilisant :
<table>
<tr> <th>Nom</th> <th>Prénom</th> <th>Note 1</th> <th>Note 2</th></tr>
<tr> <td>Foo</td> <td>Bar</td> <td> 15</td> <td>12</td> </tr>
<tr> <td>Doe </td> <td>Jonh</td> <td colspan="2">Absent</td></tr>
</table> On peut créer des listes énumérées (avec <ol>, ordered list) ou non énumérées (avec <ul>, unordered list). Chaque ligne est limitée par une balise <li> ( list item)
<ul>
<li> Un élément </li>
<li> <ol> <li> Un autre élément </li>
<li> <ol> <li> Un sous-élément</li>
<li> Un autre sous-élément</li>
</ol>
</li>
</ol>
<li>Le dernier</li>
</ul>
On peut faire référence à une autre ressource en utilisant un lien hyper-texte (balise <a/> et son attribut href). La cible du lien peut être absolue (une URL complète avec le protocole, par exemple https://www.lri.fr) ou relative (par exemple foo.html). Si l'URL est relative, le chemin est substitué à la dernière composante de l'URL de la page courante. Si l'URL commence par un # elle référence, l'attribut id d'un élément de la page:
<a href="https://www.lri.fr">Le LRI</a>
<a href="../../../index.html">Un lien</a>
<a href="#foo">On va vers le titre</a>
…
<h1 id="foo">Le titre</h1>
On peut appliquer un style CSS :
<a href="http://www.lri.fr" style=" color:red">Un lien</a>
Apperçu:
Inconvénients :
<html>
<head>
<title>…</title>
<style>
a { color: red; }
</style>
</head>
<body>
<a href="…">Lien 1</a> <a href="…">Lien 2</a>
</body>
</html> Apperçu :
Inconvénient : local à une page
Fichier style.css:
a { color: red; }
Fichier test.html:
<html>
<head>
…
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
…
</html>
Modifications & déploiement aisés
Une propriété CSS est définie en utilisant la syntaxe:
nom_prop : val_prop ;
<a href="…" style=" color:red;border-style:solid;border:1pt;">Lien 1</a>
a {
color : red;
border-style: solid;
border: 1pt;
}
CSS permet de spécifier des longueurs comme valeurs de certaines propriétés (position et taille des éléments, épaisseur des bordures, …). Les longueurs doivent comporter une unité. Les unités reconnues sont:
Chaque élément de la page HTML possède une boîte rectangulaire qui délimite le contenu de l'élément:
La zone entre le contenu et la bordure s'appelle le padding (« remplissage »). La zone autour de la bordure s'appelle margin ( « marge »).
On peut spécifier jusqu'à 4 valeurs:
span {
padding:10pt 20pt 5pt 0pt;
margin:10pt 5pt;
border-width:3pt;
border-color:red blue green;
border-style:solid dotted;
}
L'attribut CSS box-sizing permet de spécifier le mode de calcul de la taille d'une boîte. Deux valeurs sont possible :
La propriété display contrôle le mode d'affichage d'un élément:
a { display: inline; … }
a { display: none; … }
a { display: block; … }
a { display: inline-block; width: 4em; height: 2em; … }
Le type de positionnement est donné par la propriété position
| static | positionnement « automatique » |
| fixed | positionnement par rapport à la fenêtre du navigateur (la boîte est supprimée du flot) |
| relative | positionnement « relatif » par rapport à la position normale |
| absolute | positionnement « absolu » par rapport à l'ancêtre le plus proche qui n'est pas static |
Pour fixed, relative et absolute, les propriétés top, bottom, left et right dénotent les décalages respectifs.
a { position: static;
… }
a { position: fixed;
right:10pt;
top: 10pt;
}
a { position: relative;
left: 10pt;
bottom: -5pt;
… }
a { position:absolute;
right:0pt;
bottom: 10pt;
}
L'attribut overflow permet de gérer le débordement. Il peut prendre les valeurs visible, hidden et auto :
Les couleurs peuvent être données:
On peut définir la couleur de fond d'une boîte avec la propriété background et la couleur du texte avec la propriété color
Certaines propriétés permettent d'alterer le rendu du texte d'un élément
| direction | ltr ou rtl (orientation du texte) |
| text-transform | capitalize, uppercase, lowercase |
| text-decoration | underline, overline, line-through |
| text-align | left, right, center, justify |
| text-indent | longueur du retrait de paragraphe |
| vertical-align | alignement vertical
par rapport à la ligne de texte baseline, top, bottom, middle ou une longueur. |
| font-family | liste de nom de polices séparées par des virgules (Helvetica, sans, "Times New Roman") |
| font-style | normal, italic |
| font-weight | normal, lighter, bold, bolder |
| font-size | soit une longueur soit xx-small, x-small, small, medium, large, x-large, xx-large |
On peut aussi spécifier un descripteur de police
@font-face {
font-family: Toto;
src: url(toto.ttf);
}
a { font-family: Toto; }
On peut sélectionner finement les éléments auxquels un style s'applique :
| * | tous les éléments |
| x | tous les éléments dont la balise est x |
| .foo | tous les éléments dont l'attribut class contient foo |
| x.foo | (sans espace) tous les éléments dont l'attribut class contient foo et dont la balise est x |
| #foo | l'élément dont l'attribut id vaut foo (les id doivent être uniques) |
| X Y | tous les éléments selectionnés par Y qui sont des descendants des éléments sélectionnés par X |
| X, Y | tous les éléments selectionnés par X ou par Y |
| X > Y | tous les éléments dont selectionné par Y qui sont des fils d'éléments sélectionnés par X |
| a:visited | les liens déjà visités |
| a:link | les liens non visités |
| X:hover | élément selectionné par X et survollé par la souris |
La spécification CSS3 en définit beaucoup d'autres …
On veut souvent pouvoir appliquer un style à un unique élément d'une page, ou a un groupe d'éléments bien défini. On utilise pour celà l'attribut id de l'élément ou l'attribut class commun à plusieurs éléments:
Fichier CSS:
—————————————————————————
#toto123 { background:red; }
.bluetext { color: blue; }
.border { border: 1pt solid green; }
Fichier HTML
—————————————————————————
<html>
<head> ... </head>
<body>
<div class="bluetext"> AAA </div>
<div id="toto123" class="border"> BBB </div>
<div class="border bluetext"> CCC </div>
</body>
</html>
L'élément d'id toto123 a un fond rouge.
Les éléments de classe bluetext sont bleus
Les éléments de classe border
une bordure verte
AAA
BBB
CCC
Les sélectionneurs CSS peuvent être composés afin de créer des chemins de sélection :
div li a { … } /* tous les a descendants d'un li descendants d'un div */
#id100 > p .foo { … } /* tous les éléments de class foo se trouvant
à n'importe quelle profondeur sous un p
lui-même étant un sous-élément direct
de l'élément d'id id100 */
p.bar { … } /* toutes les balises p qui ont la classe bar */
p .bar { … } /* toutes la balises ayant la classe bar placées
sous une balise p (attention à l'espace !) */
a, li * /* tous les a ou tous les éléments placés sous un li */
Que se passe-t-il quand un éléments est sélectionnés par plusieurs sélectionneurs ?
(nombre d'id (#foo), nombre de classes (.bar), nombre de balises)
On sélectionne les règles ayant la plus forte valeur,
comparé composantes par composantes (ordre
lexicographique).
S'il reste plusieurs règles possibles, on prend la
dernière déclaration dans l'ordre du fichier.
* { color: blue; } /* score (0, 0, 0) */
#id101 li b { color: red; } /* score (1, 0, 2) */
#id101 ol * b { color: green; } /* score (1, 0, 2) */
.class ol li b { color: pink; } /* score (0, 1, 3) */
Le score le plus élevé est (1, 0, 2). Il y a deux sélectionneurs qui ont ce score, on choisit le dernier dans l'ordre du fichier donc le texte des éléments sélectionnés sera vert.
<ul class="menu">
<li>Entrée 1
<ul class="sous-menu"> <li>Sous-entrée 1.1 </li>
<li>Sous-entrée 1.2 </li>
<li>Sous-entrée 1.3 </li>
</ul>
</li>
<li>Entrée 2
<ul class="sous-menu"> <li>Sous-entrée 2.1 </li>
<li>Sous-entrée 2.2 </li>
<li>Sous-entrée 2.3 </li>
</ul>
</li>
</ul>
Pour que le ménu soit « dépliable » lors du survol de la souris, on souhaite que :
li { padding: 10pt 0pt 10pt 0pt;
display:block;
background:orange;
color:blue;
}
.sous-menu { display : none; }
ul.menu > li:hover ul.sous-menu { display: block; }
ul.menu > li:hover ul.sous-menu > li {
background:blue;
color:orange;
}
Pour n'importe quelle propriété (color, height, …) on peut donner des valeurs symboliques :
Fichier CSS:
—————————————————————————
div { background: red; }
span { background: blue; }
div span { background: unset; }
Fichier HTML
—————————————————————————
<html>
<head> ... </head>
<body>
<div > AAA </div>
<span> BBB </span>
<div> <span> CCC </span></div>
</body>
</html>
Tous les divs sont en rouge
Tous les spans sont en bleu
Les spans sous un div n'ont
pas le couleur de fond, donc sont en rouge
AAA
BBB
CCC
On peut appliquer une transformation géométrique à un élément avec la propriété transform. On peut utiliser une liste des valeurs suivantes :
Il existe aussi une notion de transformation 3D plus complexe (application d'une matrice de transformation). Attention, les transformations s'appliquent à toute la boite (bordure comprise).
font-size: 150%
transform:scale(2,2)
On peut demander à CSS d'animer les changements de propriétés au moment de l'application d'un style, grâce à la propriété transition :
transition: prop1 duree1 fun1 del1, …, propn dureen funn deln
Attention, on ne peut animer que si les propriétés de départ et d'arriver ont des valeurs numériques (i.e. pas de inherit, unset, auto, …).
On dispose à chaque fois d'un carré avec une bordure noire et un font bleu clair, d'une largeur et hauteur de 10vmin. On anime à chaque fois une grandeur dans :hover.
.box {
width:10vmin;
height:10vmin;
background-color: #ddf;
border: solid 0.1vmin black;
}
#b1:hover { width:20vmin; transition: width 1s linear; }
…
Il arrive que certaines boites se recouvrent :
On peut utiliser la propriété z-index pour définir l'ordre d'empilement (plus elle est élevée, plus la boite est en avant plan). Le z-index par défaut vaut zéro, on a donné la propriété z-index:2; à la boîte contenant du texte :
On peut charger un style CSS de manière conditionnelle grace à l'attribut media de la balise link. La valeur de l'attribut est une formule logique où l'on peut tester le type de support d'affichage ainsi que ces caractéristiques physiques :
<link rel="stylesheet" type="text/css" href="style1.css" media="all" />
<link rel="stylesheet" type="text/css" href="style2.css" media="print" />
<link rel="stylesheet" type="text/css" href="style3.css" media="screen and landscape" />
<link rel="stylesheet" type="text/css" href="style4.css" media="screen and min-width:480px" />
<link rel="stylesheet" type="text/css" href="style5.css" media="screen and max-width:479px" />
Cela permet d'appliquer des styles spécifiques lors de l'impression d'une page ou pour des terminaux mobiles (ayant une petite taille d'écran) ou de changer de style si l'orientation de l'écran est modifiée.