-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Développement webIntroduction
Guillaume Piolle (+ Nicolas Prigent)
CentraleSupélec – mineure Développement web
4 janvier 2017
GP Dev web : introduction 1 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Une brève histoire du Web
1 Une brève histoire du WebPrésentationLes premières années
du web
2 Clients et serveurs
3 TCP/IP, DNS, URLs
4 Le protocole HTTP
5 HTML et CSS
6 Extensions du web
GP Dev web : introduction 2 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Présentation
Présentation
World Wide Web : une des applications d’Internet, la plus connue
maispas la plus ancienne.
À l’origine : technologie pour la publication de documents
hypertextes(notion de liens entre documents).
Standards techniques régis par le World Wide Web Consortium
(W3C,http://www.w3.org/).
Technologies de base : URL (adressage des pages),
HTTP(communication), HTML (mise en forme).
GP Dev web : introduction 3 / 71
http://www.w3.org/
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Les premières années du web
Les premières années du web
1989 : Tim Berners-Lee débute un projet « hypertexte » au
CERN.
Objectif : partage de docu-ments en interne (intranet).
Draft original : InformationManagement : A Proposal.
En parallèle, le CERN basculeen TCP/IP et est connecté
àInternet.
GP Dev web : introduction 4 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Les premières années du web
Les premières années du web
La station NeXT de Tim Berners-Lee,premier serveur web du
monde.
GP Dev web : introduction 5 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Les premières années du web
Les premières années du web
1990 : Robert Cailliau rejoint le projet, naissance du
terme“WorldWideWeb”, première page web en ligne, navigateur
basique.
GP Dev web : introduction 6 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Les premières années du web
Les premières années du web
1991 : Le projet est rendu public.
1992 : Création du serveur NCSA HTTPd (ancêtre d’Apache) et
dunavigateur ViolaWWW (fondé sur HyperCard).
GP Dev web : introduction 7 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Les premières années du web
Les premières années du web
1993 : Création des navigateurs NCSA Mosaic et Lynx,
apparitiondans les médias grand public. Premières images en
ligne.
GP Dev web : introduction 8 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Les premières années du web
Les premières années du web
GP Dev web : introduction 9 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Les premières années du web
Les premières années du web
1994 : Fondation de Yahoo ! et Netscape, Mosaic devient
Navigator.Premières publicités en ligne.
1995 : Échec de The Microsoft Network, création d’Internet
Exploreret Apache. Moteur de recherche Altavista.
. . .
GP Dev web : introduction 10 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Les premières années du web
Les premières années du web
Microsoft Internet Explorer 1.0
GP Dev web : introduction 11 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Les premières années du web
Les premières années du web
La première version du site web d’AltaVista
GP Dev web : introduction 12 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Clients et serveurs
1 Une brève histoire du Web
2 Clients et serveurs
3 TCP/IP, DNS, URLs
4 Le protocole HTTP
5 HTML et CSS
6 Extensions du web
GP Dev web : introduction 13 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Modèle client-serveur
Client
Navigateur (browser) sur le poste utilisateur, demande une page
puisl’affiche. Exemples de navigateurs :Firefox, Internet Explorer,
Chrome, Konqueror, Safari, Opera, Lynx. . .
Client léger : navigateur standard (universel) ;
Client lourd : plugin ou logiciel à installer (Java Web Start,
NoTouch Deployment .NET. . . ).
Serveur
Logiciel sur la machine hébergeant les pages. Le serveur
reçoit la requête,récupère la page et l’envoie au
client.Exemples de serveurs web : Apache HTTP server, MS
InternetInformation Services (IIS), Nginx, Google GWS. . .
GP Dev web : introduction 14 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Principes : lecture d’une page web
GP Dev web : introduction 15 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
TCP/IP, DNS, URLs
1 Une brève histoire du Web
2 Clients et serveurs
3 TCP/IP, DNS, URLs
4 Le protocole HTTP
5 HTML et CSS
6 Extensions du web
GP Dev web : introduction 16 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
TCP/IP, communications en mode connecté
Une connexion par page (HTTP ≤ 1.0, 1991-1996)Plutôt que de
gérer la perte de paquets ou la remise en ordre au
niveauapplicatif, le web utilise TCP/IP :
Le client ouvre une connexion TCP sur le serveur et fait sa
requête.
Le serveur répond et ferme la connexion.
Connexions persistantes (HTTP 1.1, 1997)
Avec l’évolution des pages web (chaque page web est a priori
composéede plusieur fichiers), ouvrir une connexion par fichier
nuit auxperformances. Ainsi, la même connexion sert pour plusieurs
requêtes :
Le client ouvre une connexion TCP sur le serveur et fait sa
requête.
Le serveur répond et attend la requête suivante.
GP Dev web : introduction 17 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
DNS et localisation des serveurs
DNS (Domain Name System) est un service distribué
permettant(notamment) de convertir les noms des serveurs en
adresses IP.
$ nslookup www.centralesupelec.frServer : 212.27.40.240Address :
212.27.40.240#53
Non-authoritative answer :Name : www.centralesupelec.frAddress :
138.195.9.117
Une adresse IP ne correspond pas forcément à un seul Fully
QualifiedDomain Name, et un FQDN ne correspond pas forcément à
une seule IP.
GP Dev web : introduction 18 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Organisation des serveurs DNS
GP Dev web : introduction 19 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Résolution DNSExemple : résolution de fr.wikipedia.org
GP Dev web : introduction 20 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
URLs
Uniform Resource Locator, RFC 2396
(urn:ietf:rfc:2396)
protocole:// adresse [:port] [/ chemin] [/ fichier]
http://www.centralesupelec.fr/
ftp://ftp.inria.fr/pub/Apache/tomcat/
mailto:[email protected]
file:/var/log/messages
news:comp.ai.alife
À l’origine uniquement ASCII, UTF-8 accepté depuis 2010.URI =
Universal Resource Identifier (Locator ou Name)
GP Dev web : introduction 21 / 71
http://www.centralesupelec.fr/ftp://ftp.inria.fr/pub/Apache/tomcat/mailto:[email protected]:/var/log/messagesnews:comp.ai.alife
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Le protocole HTTP
1 Une brève histoire du Web
2 Clients et serveurs
3 TCP/IP, DNS, URLs
4 Le protocole HTTPPrésentation de HTTPHTTP/2Cookies
HTTPAuthentification HTTPWebDAV
5 HTML et CSS
6 Extensions du webGP Dev web : introduction 22 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Présentation de HTTP
Présentation de HTTP
HyperText Transfer Protocol, RFC 2616 (v1.1)Protocole de niveau
application (couche 5) entre le client et le serveur,orienté vers
le transfert de documents.
S’appuie sur une connexion TCP (par défaut sur le port 80)
entre leclient et le serveur (suite à une résolution DNS à
partir de l’URL)
Communication en ASCII : Commande ou statut + en-tête (options)
+contenu éventuel (possiblement dans un autre encodage)
Principales commandes HTTP
GET : Demande d’une page ;
HEAD : Demande des en-têtes de la réponse ;
POST : Lancement d’une exécution.
GP Dev web : introduction 23 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Présentation de HTTP
Présentation de HTTP
Statuts de réponse
1xx : Information (102 Processing) ;
2xx : Succès (200 OK) ;
3xx : Redirection (301 Moved Permanently) ;
4xx : Erreur client (404 Not Found) ;
5xx : Erreur serveur (500 Internal Server Error).
Paramètres d’en-tête
Requête : Type de réponse acceptée, page si modifiée
depuis,informations sur le logiciel client (User Agent). . .
Réponse : Longueur de la réponse, code MIME,
demanded’authentification, adresse de redirection, interdiction de
mise encache. . .
GP Dev web : introduction 24 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Présentation de HTTP
Présentation de HTTP
Requête HTTP typique : (historiquement) plutôt bavard. . .
GET / HTTP/1.1
Host: www.supelec.fr
User-Agent: Mozilla/5.0 (Ubuntu; X11; Linux i686; rv:8.0)
Gecko/20100101 Firefox/8.0
Accept:
text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language:
fr-fr,fr;q=0.8,en-gb;q=0.7,en;q=0.5,es-es;q=0.3,es;q=0.2
Accept-Encoding: gzip, deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Attention :
Inutile d’utiliser des moyens techniques raffinés pour masquer
votreadresse IP si votre navigateur fournit un quasi-identifiant
!
GP Dev web : introduction 25 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Présentation de HTTP
Présentation de HTTP
Évolutions entre 2011 et 2016 sur la même requête de
Firefox
GET / HTTP/1.1
Host: www.centralesupelec.fr
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:45.0)
Gecko/20100101 Firefox/45.0
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
DNT: 1
Connection: keep-alive
Attention :
Inutile d’utiliser des moyens techniques raffinés pour masquer
votreadresse IP si votre navigateur fournit un quasi-identifiant
!
GP Dev web : introduction 26 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Présentation de HTTP
Présentation de HTTP
Réponse HTTP
HTTP/1.1 200 OK
Date: Fri, 02 Dec 2011 08:42:09 GMT
Server: Apache
Set-Cookie: PHPSESSID=278949bad4adf439e6bc57707fc6bb4b;
path=/
Expires: Thu, 19 Nov 1981 08:52:00 GMT
Cache-Control: no-store, no-cache, must-revalidate,
post-check=0, pre-check=0
Pragma: no-cache
Vary: Accept-Encoding,User-Agent
Transfer-Encoding: chunked
Content-Type: text/html; charset=ISO-8859-1
910
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Présentation de HTTP
Présentation de HTTP
Demande de page si modifiée
Permet l’utilisation d’un cache local. Cf. les balises meta de
HTML pourinterdire ou restreindre le cache local :
GET / HTTP/1.1
Host: www.iana.org
If-Modified-Since: Thu, 01 Dec 2011 00:00:00 GMT
HTTP/1.1 304 Not Modified
Server: Apache/2.2.3 (CentOS)
Last-Modified: Fri, 14 Oct 2011 19:04:19 GMT
Vary: Accept-Encoding
Content-Type: text/html; charset=UTF-8
Accept-Ranges: bytes
Connection: Keep-Alive
Date: Fri, 02 Dec 2011 09:26:45 GMT
Age: 1023
X-Cntnt-Length: 4949
GP Dev web : introduction 28 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
HTTP/2
HTTP/2
Spécification publiée en mai 2015 (RFC 7540).Rétrocompatible
avec HTTP/1.1.
Évolutions par rapport à HTTP/1.1
Minifying : regroupement de ressources multipes (code
HTML,scripts, images. . . ) en un lot unique (par page, par
exemple) ;
Server push : le serveur peut envoyer plusieurs réponses pour
unemême requête, en anticipant les besoins du client ;
Multiplexage de requêtes/réponses, compression des
en-têtes,priorisation des requêtes. . .
Support par les navigateurs principaux (HTTPS uniquement !) et
par denombreux serveurs. W3Techs décembre 2016 : 10.8 % du top 10M
dessites web supportent HTTP/2.
GP Dev web : introduction 29 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Cookies HTTP
Cookies HTTP
Un protocole stateless
Du point de vue de HTTP, le serveur n’a aucune mémoire, il ne
conservepas d’état pouvant le relier au client ou aux requêtes
déjà réalisées.
En théorie (hors applis côté serveur), deux requêtes
identiques donnentlieu à des réponses identiques.
Cookies
Les cookies sont des informations textuelles ajoutées dans les
en-têtesdes requêtes/réponses HTTP afin d’introduire une
différentiation, demanière à simuler des états.Ils sont
rattachés à un domaine et peuvent avoir une date d’expirationou
une durée de vie.
GP Dev web : introduction 30 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Cookies HTTP
Cookies HTTP
Contenu des cookies
La taille des cookies est limitée (4 kio max). Ils contiennent
en général :
Soit des informations textuelles très brèves ;
Soit un identifiant correspondant à des données stockées sur
leserveur.
Utilisation des cookies
Personnalisation : Mémorisation de préférences d’affichage,
delangues, de contenus. . .
Gestion de sessions : Mémorisation de l’authentification,
d’unpanier. . .
Suivi (tracking) : Mémorisation d’historiques de visites, de
clics,d’achats. . .
GP Dev web : introduction 31 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Cookies HTTP
Cookies HTTP
Familles de cookies
Cookies de session : volatiles ;
Cookies persistants ;
Cookies « sécurisés » : via HTTPS ;HttpOnly cookies :
inaccessibles à JavaScript ou à tout ce qui n’estpas HTTP ;
Cookies tiers : principalement pour du tracking publicitaire
;
Supercookies : cookies (a priori malveillants) correspondant à
desdomaines top-level ;
Cookies zombies : reconstitués automatiquement après
suppressionpar l’utilisateur (via utilisation du cache Flash, du
localStorage deHTML5. . . ).
GP Dev web : introduction 32 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Cookies HTTP
Cookies HTTP
Vol de cookie et/ou de session
Un cookie identifiant une session authentifiée peut
éventuellement êtrevolé et rejoué, permettant à l’attaquant de
bénéficier des autorisationsde la victime.Les cookies peuvent
être obtenus :
Par eavesdropping d’une connexion insuffisamment
protégée(contremesures : HTTPS, WPA2, VPN. . . ) ;
Par détournement du traffic HTTP suite à un DNS cache
poisoning(contremesures : Secure cookies, « sécurisation » des
serveurs DNS) ;Transmission de cookies à un site tiers par
Cross-Site Scripting,éventuellement via un proxy malveillant
(contre-mesures : HttpOnlycookies, Secure cookies) ;
Utilisation du cookie sans récupération, par Cross-Site
RequestForgery (contremesures : « sécurisation » du site visé par
le CSRF).
GP Dev web : introduction 33 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Authentification HTTP
Authentification HTTP
Demandée par un paramétrage du serveur pour l’accès à un
répertoire.
GET → 401 → GET avec authentificationDemande de page protégée
:
GET...
Refus du serveur :
HTTP/0.1 401 unauthorized
WWW-Authenticate: Basic realm="toto"
Le navigateur réclame un nom et un mot de passe pour le realm «
toto »puis renvoie la demande avec nom:mdp encodé en Base64 :
GET...
Authorization: Basic Qwxpl3js
GP Dev web : introduction 34 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Authentification HTTP
Authentification HTTP
Amélioration de l’authentification Basic
Mode Digest : challenge MD5 impliquant login, mot de
passe,realm, URI et un nonce.
SPNEGO : Extension de HTTP, protocole de négotiation de
laméthode d’authentification. Le résultat peut par exemple être
NTLMou Kerberos. Introduit par Microsoft (IE5), rapidement mis en
œuvredans les navigateurs courants.
GP Dev web : introduction 35 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Authentification HTTP
Authentification HTTP
Authentification dans un tunnel chiffré
Couche SSL/TLS sur TCP/IPCorrespond aux urls https://...Suppose
un module SSL/TLS et un paramétrage du serveur (liste
d’algosacceptés, gestion de certificats cryptographiques)
Scénario
→ Le client se connecte au serveur et propose une liste d’algos
;← Le serveur choisit un algo et envoie un certificat X509 (clé
publiquesignée par une autorité) ;→ Optionnellement : idem par le
client ;→ Le client fournit une clé de session chiffrée avec la
clé publique duserveur ;Les échanges suivants sont chiffrés avec
cette clé.
GP Dev web : introduction 36 / 71
https://...
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
WebDAV
WebDAV
Web-based Distributed Authoring and Versioning
Principe : passer par HTTP pour pousser des ressources en ligne,
lesmodifier, les organiser, de manière collaborative.
Retour à la vision de Tim Berners-Lee (le web est à la fois en
lecture eten écriture, cf. fonctionnalités du navigateur
WorldWideWeb).
Création d’un groupe de travail IETF à la fin des années 90
(RFC 2518en 1999, RFC 4918 en 2007).Finalement, la gestion de
version est laissée pour un autre projet(Delta-V, RFC 3253,
interface avec SVN notamment).
Parmi les extensions de WebDAV : CalDAV, basé sur
iCalendar.
GP Dev web : introduction 37 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
WebDAV
WebDAV
Commandes HTTP exploitées
PUT : Création ou remplacement d’une ressource ;
DELETE : Suppression d’une ressource.
Extensions à HTTP :
PROPFIND, PROPPATCH : gestion de propriétés XML et de
lastructure des données ;
MKCOL : création de collections (répertoires) ;
COPY, MOVE : copie/déplacement d’une URI à une autre ;
LOCK, UNLOCK : Gestion de verrous exclusifs ou partagés.
GP Dev web : introduction 38 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
HTML et CSS
1 Une brève histoire du Web
2 Clients et serveurs
3 TCP/IP, DNS, URLs
4 Le protocole HTTP
5 HTML et CSS
6 Extensions du web
GP Dev web : introduction 39 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
HTML (HyperText Markup Language)
Langage de description de documents, à balises (CERN 1991,
standardW3C)
Restriction de SGML (Standard Generalized Markup Language,
ISO)
Censé définir la structure plutôt que la mise en page, mais.
. .
Succession rapide des premières versions : problèmes
decompatibilité, extensions propriétaires. . .
HTML5 est en cours de finalisation mais déjà largement
répandu.Il propose notamment la gestion native de contenus
multimédia, du SVG,du MathML, plus de balises sémantiques, des
champs de formulaires plusspécifiques, et une syntaxe
simplifiée.
GP Dev web : introduction 40 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Exemple de page HTML5
en globalit é . Son contenu ne s’ affiche pas dans lapage en
tant que tel −−>
Example HTML5, titre affiché dans la barre .
sans la page −−>Exemple HTML5, titre affiché dans la
Ãafentre
Les balises p et /p permettent de dé limiter les
paragraphes.
Il est possible mettre des
liens vers d’autres pages.
GP Dev web : introduction 41 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Réalisation de pages HTML
Édition
Mode texte pur, à la main
Via des outils WYSIWYG : Expression (FrontPage),
GoLive,DreamWeaver, Nvu, Mozilla Composer, Word, OpenOffice. .
.
Navigateurs très tolérants : absence de DOCTYPE, de
guillemets, debalises fermantes, de balises html ou body. . .
Validateur en ligne du W3C : http://validator.w3.org/
GP Dev web : introduction 42 / 71
http://validator.w3.org/
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
CSS (Cascading Style Sheets)
Langage de mise en forme de documents, associé à HTMLDans un
en-tête (balises , un fichier séparé (lié dans l’en-tête par)
ou à l’intérieurd’autres balises (option STYLE).
Ensemble de règles contrôlant la fonte, la couleur, la taille,
la position, lesimages de fond... S’appliquent :
À un type de balise donné (,
. . . , , ) ;
À une classe ou un identificateur spécifié dans une balise
;
À une imbrication de balises donnée ;
Aux pseudo-classes :link, :visited, :active, :hover.
GP Dev web : introduction 43 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Exemple de CSSLe CSS suivant fait que la page précédente
s’affiche ainsi
−−>
GP Dev web : introduction 44 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Extensions du web
1 Une brève histoire du Web
2 Clients et serveurs
3 TCP/IP, DNS, URLs
4 Le protocole HTTP
5 HTML et CSS
6 Extensions du webApplicatifs côté serveurApplicatifs côté
clientXML et Web Services
GP Dev web : introduction 45 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Architectures trois-tiers
c©The Silicon Whisperer
GP Dev web : introduction 46 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Où placer les traitements ?
Des combinaisons sont possibles. . .
GP Dev web : introduction 47 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Applicatifs côté serveur
Formulaires HTML
Principale source d’interaction avec l’utilisateur :
alimentation du serveuren données.
Parametre 1 Parametre 2
Parametre 3
QuelconqueAB
Chk1
Validation (GET ou POST) → traitement côté serveur et
affichaged’une nouvelle page (contenu dynamique).
GP Dev web : introduction 48 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Applicatifs côté serveur
CGI
Common Gateway InterfaceStandard pour lancer un exécutable sur
une requête du client, et renvoyerla sortie de l’exécutable au
lieu du contenu d’un fichier.Spécifie comment passer les
paramètres à l’exécutable.
Indépendant du langage.Langages couramment utilisés : Perl, C,
langages de shell, Python. . .
Problème : un processus par requête
→ Lenteur et charge mémoire, stateless.
Méthodes pour déporter la gestion des sessions vers le client
(paramètresde requête, champs cachés de formulaires,
cookies).Tend à être remplacé par des modules (cas typique de
PHP) ou desenvironnements serveur spécifiques (pour Java par
exemple).
GP Dev web : introduction 49 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Applicatifs côté serveur
CGI
#!/bin/kshecho "Content-Type: text/html"echoecho ’Resultat
testbvsh’echo ’Resultat script’#−−−−−−−−−−−−−−−−−−−eval
‘/usr/local/bin/www/cgiparse -form‘#−−−−−−−−−−−−−−−−−−−echo
"Parametre 1 : $FORM_P1
"...
# var. d’environnement : big brother is watching youecho "Votre
adr. IP : $REMOTE_ADDR
"echo "Votre navigateur : $HTTP_USER_AGENT
"echo "La page d’où vous venez : $HTTP_REFERER
"
GP Dev web : introduction 50 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Applicatifs côté serveur
PHP
Personal Home Page → PHP : Hypertext Preprocessor
À l’origine, bibliothèques PERL pour créer et maintenir une
page persodynamique.Aujourd’hui, langage indépendant, orienté
objet depuis la version 5.Collection de bibliothèques logicielles
très vasteInterprété en local (langage de scripts), par un
module Apache ou IIS,un script CGI (legacy) ou FastCGI.
Architecture classique : LAMP (Linux-Apache-MySQL-PHP)Variantes
: WAMP/MAMP.Environnements WAMP tout-en-un : Xampp, EasyPHP. .
.
À suivre : cours/BE dédié à PHP
GP Dev web : introduction 51 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Applicatifs côté serveur
Technologies Java EE
Architecture de serveurs d’applications MVC (Modèle - Vue -
Contrôleur) fondée surJava, proposant divers types de composants
logiciels.
Servlets
Objets Java côté serveur, traitent une requête HTTP et
construisent la réponsecorrespondante, en bénéficiant de toute
l’expressivité de Java.
JSP (Java Server Pages) et JSF (Java Server Faces)
Composants de présentation servant de squelette à des pages
web, pouvant inclure desappels à des méthodes Java sous forme de
balises.
EJB (Enterprise Java Beans)
Objets spécifiques à Java EE. Encapsulent des traitements
métier spécifiques, ouconstituent le modèle de l’application
(gèrent persistance et publication des données).
À suivre : deux séances de cours/BE sur Java EE
GP Dev web : introduction 52 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Applicatifs côté serveur
Autres technologies
ASP
Technologie Microsoft comparable à PHP.Propriétaire → pas de
contribs de la communauté → braindead.A très largement évolué
pour devenir ASP.NET, intégré dans leframework de développement
web de Microsoft.
Python / Zope
Python : langage de script orienté objet, adapté au web et au
réseau,nombreuses bibliothèque.Zope : serveur d’application
Python (avec BD objet) proposant destechnologies similaires à PHP,
aux Servlets/JSP, EJB. . .
Ruby on Rails
Langage (Ruby) et plate-forme (Rails) de développement rapide
pour leweb.MVC, priorité au confort du développeur, de plus en
plus à la mode.
+ environ deux milliards d’autres technos, côté serveur comme
côtéclient.
GP Dev web : introduction 53 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Applicatifs côté client
JavaScript
Inspiré de la syntaxe Java, mais très différent toutefois
!Langage interprété par le navigateur, intégré à HTML ou dans
un fichierséparé.
Entre balises ...
Essai JavaScript
function square (number) { return number∗number }
Blabladocument.write ("sqr(5)=", square(5))Blabla
GP Dev web : introduction 54 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Applicatifs côté client
JavaScript
Dans un fichier séparé
Comme paramètre de balise
Expression entre &{ et }
Comme handler d’événement
Autres événements : onMouseOver, onChange, onSubmit, onLoad. .
.
GP Dev web : introduction 55 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Applicatifs côté client
JavaScript et DOM
DOM : Document Object ModelLe document est traduit sous la forme
d’un arbre, accès direct auxcomposantes.
Exemple : Accès à la valeur d’un champ de formulaire
Voir la bibliothèque JQuery pour l’accès au DOM.
GP Dev web : introduction 56 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Applicatifs côté client
JavaScript : structure du langage à objets
Langage orienté prototype : pas de classes, que des instances
;
Constructeur = simple fonction ;
Attributs créés par la première affectation ;
Fonctions utilisables comme des méthodes.
function voiture (modèle, propio) {this .modèle = modèlethis
. proprio = propriothis . affiche = affiche
}function affiche () {
document.write ( this .modèle+" de "+this.proprio)}...
v = new voiture ("Safrane", "toto")v. affiche ()
GP Dev web : introduction 57 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Applicatifs côté client
Applets Java
Code mobile, portable, sûr
Balise HTML pour le chargement d’une applet ;
Pas d’installation (mais nécessité d’une JVM) ;
Sécurité :
Code vérifié par la JVM ;Exécution par défaut dans un « bac
à sable » (pas d’accès auxfichiers, sockets uniquement avec le
serveur source) ;Élargissement paramétrable par politique de
sécurité (voir les outilspolicytool, keytool, jarsigner).
Toute la puissance de Java (classe JApplet) : graphisme,
sockets, RMI,Corba, JDBC, Web Services. . .
Une technologie à déconseiller ?
De nombreuses JVM pour navigateurs sont (très) vulnérables, il
estdéconseillé de tout bonnement désactiver Java dans un
navigateur web.
GP Dev web : introduction 58 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Applicatifs côté client
Applets Java
Exemple d’inclusion
...
Votre browser ne supporte pas Java
...
Paramètre BASE="url" si le .class n’est pas dans le même
répertoireParamètre ARCHIVE="applet.jar" si le .class est dans un
.jar
GP Dev web : introduction 59 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
Applicatifs côté client
Flash
Langage et technologie propriétaires (Adobe)
Points comparables avec les applets Java :
Code pré-compilé, mobile ;
Exécuté dans une machine virtuelle dédiée (plugin) ;
Code censé être portable.
Différences avec les applets :
Graphismes principalement vectoriels ;
Sécurité moins expressive, très peu personnalisable ;
Propriétaire, portabilité limitée par Adobe (dernière
version rarementdispo sous Linux ou Mac, rien pour Linux 64) ;
Encore utilisé dans certains domaines, assez incompatible avec
lesprincipes d’interopérabilité du Web, en train d’être tué et
remplacé parHTML5. Problèmes de sécurité importants.
GP Dev web : introduction 60 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
XML et Web Services
XML
eXtensible Markup LanguageLangage de structuration de données
(W3C), sous-ensemble de SGML.
Balises définies suivant le besoin et la sémantique (6=
HTML).Standard et extensible.
Culture petits poisGaston LagaffeSpirou
GP Dev web : introduction 61 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
XML et Web Services
XML
Applications
OpenDocument ;
RSS/Atom ;
Pages web en XML+CSS ou XML+ XSLT ;
Format de manifests pour déploiement/compilation ;
Format pivot et d’interconnexion, paramétrage d’applications
;
Description de formulaires ou autres
(XForms/W3C,InfoPath/Microsoft, XUL/Mozilla) ;
Invocation distante : XML/RPC, SOAP (Web Services) ;
. . .
GP Dev web : introduction 62 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
XML et Web Services
DTDs et Schémas XML
Deux manières de spécifier les balises et leur organisation,
de définir unformat.
DTD (Document Type Definition)
Définit des noms de balises, de propriétés et leurs
imbrications.Pas du XML.Pas de précisions sur le domaine des
données, peu expressif.
Schémas XML
Un schéma est un document XML.Précise le type des
données.Notion de namespace pour éviter les collisions ().
GP Dev web : introduction 63 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
XML et Web Services
Analyse XML
SAX
Simple API for XML.Simple. . . pour des tâches pas compliquées
!Récupération de quelques infos, par appel de callbacks à
l’analyse.
DOM
Document Object ModelPratique pour tout
récupérer.Transformation du document en un objet
arborescent.Parcours et recherche pratiques.
Vérificateurs : XML bien formé, XML valide (par rapport à une
DTD ouun schéma).Ex : xmllint.
GP Dev web : introduction 64 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
XML et Web Services
Transformation XML
Principe : Le XML décrit la structure du document, XSLT
décritl’affichage par génération de HTML (côté client ou
serveur).XSLT : eXtensible Stylesheet Language Transformation(JAXP
pour Java, xsltproc, Cocoon sous Apache, Sablotron en PHP. . .
)
< xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
Bibliographie
XSLT et ses implémentations peuvent être une source de
vulnérabilitéssignificative.
GP Dev web : introduction 65 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
XML et Web Services
Web Services
SOAP (W3C)
Simple Object Access Protocol Requête en HTTP + XML
(schémaSOAP particulier).Invocation distante d’un service,
réponse encodée en HTTP + XML.
WSDL (W3C)
Web Services Description Language.Langage XML décrivant
l’interface d’un service Web interrogeable parSOAP : messages,
ports, codage.
UDDI (W3C)
Universal Description Discovery and Integration.Annuaire sur les
fournisseurs, les services, lien avec WSDL.Conçu comme un service
commercial, très peu utilisé finalement.
GP Dev web : introduction 66 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
XML et Web Services
Web Services
Concrètement :
Un web service = une classe Java, C# ou autre+ un fichier
.wsdl
Services REST
Representational State TransferPas de SOAP : simplement du HTTP
(GET, POST, PUT, DELETE) et desURI (style formulaires).Stateless :
le client doit mémoriser l’état.
GP Dev web : introduction 67 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
XML et Web Services
AJAX
Asynchronous JavaScript and XML (→ « Web 2.0 »)Technologie :
Javascript, objet XMLHttpRequest, DOM + exécution (etBD) côté
serveur.
GP Dev web : introduction 68 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
XML et Web Services
Autoformation
http://www.developpez.com/
http://www.developpez.net/forums/
Couvre énormément de technologies, nombreux cours et tutoriel
(souventde bonne qualité), forum très actif, modéré et orienté
professionnels.
GP Dev web : introduction 69 / 71
http://www.developpez.com/http://www.developpez.net/forums/
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
XML et Web Services
Plan de la mineure
04/01 : Introduction, serveurs web ;
11/01 : Rien ? PHP ?
18/01 : Exécution côté client [NP] ;
25/01 : Rien ? PHP ?
01/02 : Java EE 1/2 ?
15/02 : Java EE 2/2 ?
22/02 : Sécurité des applis web ;
01/03 : Rien ? BE ?
08/03 : Rien ? Soutenance BE ?
Évaluation : BE notés (Java EE + quelque chose en
PHP/JS/MySQL).
GP Dev web : introduction 70 / 71
-
Une brève histoire du Web Clients et serveurs TCP/IP, DNS, URLs
Le protocole HTTP HTML et CSS Extensions du web
XML et Web Services
Iconographie et autres sources
Tim Berners-Lee (p. 4) : Captsolo/Flickr
(http://www.flickr.com/photos/captsolo/64564258/), CC-BY-SA 2.0,
2005 ;
First Web Server (p. 5) : Coolcaesar
(http://commons.wikimedia.org/wiki/File:First_Web_Server.jpg),
GFDL/CC-BY-SA3.0, 2005.
Robert Cailliau (p. 6) : CERN, publié sous
copyleft(http://commons.wikimedia.org/wiki/File:Robert_Cailliau_On_Desk.jpg).
ViolaWWW (p. 7) : University of Berkeley, 1992.
NCSA MosaicTM “Spinning Globe” logo (p. 8) et NCSA MosaicTM 0.6
beta screenshot (p. 9) : National Center forSupercomputing
applications, University of Illinois (http
://www.ncsa.illinois.edu/News/Images/), 1993.
Logo Yahoo ! (p. 10) : Yahoo ! (http ://www.yahoo.com),
1994.
Logo Netscape (p. 10) : AOL/Netscape (récupéré sur http
://mozilla.tlk.fr/faq5.php), 1994.
Microsoft Internet Explorer 1.0 (p. 10) : Microsoft (http
://windows.microsoft.com/en-US/internet-explorer/products/history),1995.
Logo Apache (p. 10) : Apache Software Foundation (http
://www.apache.org/), 2011.
Microsoft Internet Explorer 1.0 screenshot (p. 11) :
Microsoft(http
://windows.microsoft.com/en-US/internet-explorer/products/history),
1995.
Page d’accueil Altavista (p. 12) : Altavista (récupéré sur
http ://www.webdesignshock.com/web-design-history), 1995.
Illustration résolution DNS, (p. 20), DNS iterations.svg,
créé par Mro, récupéré
surhttp://fr.wikipedia.org/wiki/Fichier:DNS_iterations.svg, licence
CC-BY-SA 3.0, 2010.
Bernard Vivinis, Client-Serveur (transparents Supélec),
08/01/2010.
GP Dev web : introduction 71 / 71
http://www.flickr.com/photos/captsolo/64564258/http://commons.wikimedia.org/wiki/File:First_Web_Server.jpghttp://commons.wikimedia.org/wiki/File:Robert_Cailliau_On_Desk.jpghttp://fr.wikipedia.org/wiki/Fichier:DNS_iterations.svg
Une brève histoire du WebPrésentationLes premières années du
web
Clients et serveursTCP/IP, DNS, URLsLe protocole
HTTPPrésentation de HTTPHTTP/2Cookies HTTPAuthentification
HTTPWebDAV
HTML et CSSExtensions du webApplicatifs côté serveurApplicatifs
côté clientXML et Web Services