introduction guillaume piolle (+ nicolas prigent)guillaume.piolle.fr/doc/devweb-intro.pdf · une br...
TRANSCRIPT
-
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