en PDF

Programmation Web Avancée
Cours 7 Web Storage Ajax
[email protected]
Plan
1 Introduction/ Généralité et rappels sur le Web/ Javascript : survol du langage
✔
2 Objets/Portée des variables/Tableaux/Rappels MVC ✔
3 Visiteur/Expressions régulières/Git ✔
4 DOM/Observers et MVC ✔
5 Évènements DOM/Rappels sur les clôtures/Set & Map ✔
6 Canvas ✔
7 Web Storage/Ajax
7.1 Webstorage
7.2 Modèle de sécurité de Javascript
7.3 Ajax
2/16
Persistance
Le développement d'application Web moderne (et en particulier mobiles) fait
apparaître un problème de persistance des données
En effet, on souhaîte pouvoir stocker l'état du programme Javascript (pour
pouvoir le restaurer plus tard). On peut aussi vouloir stocker des données
volumineuses pour pouvoir y accéder « hors connexions ».
Les solutions « naïves » ne fonctionnent pas pour Javascript :
Impossible en Javascript d'écrire dans des fichiers du répertoire utilisateur
(modèle de sécurité de Javascript)
Utilisation des cookies : ne permet pas de stocker des donnéer de grande
taille.
Envoi de données au serveur : nuit à l'interactivité
3/16
S
t
o
r
a
g
e
L'object Storage implémente une table associative clé → valeur :
.setItem(key, value) :
Associe dans l'espace de stockage la valeur value à la clé
key (toutes deux sont des chaînes de caractères arbitraires).
.getItem(key) : Renvoie la valeur associée à la clé key
.removeItem(key) : Supprime la valeur associée à la clé key
.length : Renvoie le nombre de clé associées
.key(i) : Renvoie la valeur de la ième clé
Deux objets de type Storage sont accessibles :
localStorage : stockage à durée de vie illimité
sessionStorage : stockage jusqu'à la fin de la session (fermeture de l'onglet ou
du navigateur)
4/16
Démo
On va implémeter un simple compteur de click. On stocke que le nombre de click
à la fois dans le localStorage et dans le sessionStorage.
5/16
Plan
1 Introduction/ Généralité et rappels sur le Web/ Javascript : survol du langage
✔
2 Objets/Portée des variables/Tableaux/Rappels MVC ✔
3 Visiteur/Expressions régulières/Git ✔
4 DOM/Observers et MVC ✔
5 Évènements DOM/Rappels sur les clôtures/Set & Map ✔
6 Canvas ✔
7 Web Storage/Ajax
7.1 Webstorage ✔
7.2 Modèle de sécurité de Javascript
7.3 Ajax
6/16
Accès au données depuis Javascript
Le modèle de sécurité des navigateurs Web impose une politique de même
origine pour l'accès à des données (same origin policy).
Les scripts de deux pages ne peuvent partager des données que si ces pages ont
la même origine
Deux pages ont la même origine si elles ont les même protocole, hôte et port. Si on considère : http://www.example.com/dir/page.html :
✔ http://www.example.com/dir/page2.html ✔ http://www.example.com/dir2/other.html ✔ http://user:[email protected]/dir2/other.html ✖ http://www.example2
.com/dir/page2.html ✖ http://example.com/dir/page2.html ✖ http://www.example.com:8080/dir/page2.html ✖ http
s://www.example.com/dir/page2.html ? http://www.example.com:80/dir/page2.html (dépend des navigateurs)
7/16
Politique de sécurité
Si deux pages ont la même origine, alors elle peuvent se manipuler librement
l'une/l'autre (changer leur DOM, enregistrer/supprimer des gestionnaires
d'évènements, lire l'espace de stockage et les cookies, …)
Cela pose de gros problèmes de sécurité et de confidentialité si les deux pages
n'ont pas la même origine ⇒ interdit.
Attention : un script a pour origine celle de la page qui le charge et non pas l'URL
à laquelle il est stocké
8/16
Exercice
Imaginer un scenario dans lequel une page charge légitimement un script distant
et où ce dernier collecte des informations confidentielles ?
9/16
Plan
1 Introduction/ Généralité et rappels sur le Web/ Javascript : survol du langage
✔
2 Objets/Portée des variables/Tableaux/Rappels MVC ✔
3 Visiteur/Expressions régulières/Git ✔
4 DOM/Observers et MVC ✔
5 Évènements DOM/Rappels sur les clôtures/Set & Map ✔
6 Canvas ✔
7 Web Storage/Ajax
7.1 Webstorage ✔
7.2 Modèle de sécurité de Javascript ✔
7.3 Ajax
10/16
Asynchronous Javascript and XML
Une application Web doit parfois échanger avec un serveur Web :
Calcul coûteux (en mémoire, temps, …)
Centralisation (synchronisation de plusieurs clients, vérification d'identifiants,
de licences, …)
Accès à des données distantes
Utilisation de formulaires HTML :
Nuit à l'interactivité (alternance client/serveur/client/serveur fixée, temps de
transmission)
Perte de la page courante, nécessité de sauver l'état du client localement et re
le restaurer
AJAX : API permettant d'envoyer des requêtes HTTP à un serveur depuis
Javascript de manière asynchrone, en tâche de fond et de récupérer le résultat
11/16
XmlHttpRequest
Objet contenant les (nombreuses) méthodes permettant d'envoyer une requête
GET ou POST à un serveur distant :
new XmlHttpRequest() : création de l'objet
.open(method, url, async) : crée une requête HTTP avec la méthode method
(valant "GET" ou "POST"), vers l'url url. Le booléen async (vrai par défaut)
exécute un envoi asynchrone. On le laissera toujours à vrai.
.send() : envoie la requête au serveur. L'appel retourne immédiatement si async
valait vrai lors de l'ouverture
.responseText : contient la réponse du serveur sous forme de chaîne de
caractères
.status : le code HTTP de la réponse du serveur
.readyState : Un entier entre 0 (requête non envoyée) et 4 (résultat disponible)
12/16
Traîtement asynchrone de la réponse
On se connecte à l'évennement readystatechange de l'objet XmlHttpRequest.
Exemple:
var xhr = new XmlHttpRequest();
xhr.open("GET", "page.php?user=toto", true);
xhr.addEventListener("readystatechange", function (ev) {
if (xhr.status == 200 && xhr.readyState == 4) {
console.log(xhr.responseText);
}
});
xhr.send();
13/16
Avantage/Inconvénients
Avantages :
Évite de recharger la page
Permet d'envoyer plusieurs requêtes de manière asynchrone
Permet de faire autre chose (interaction utilisateur) en attendant que la
réponse arrive
Inconvénient
Sujet à la same origin policy (donc un script ne peut parler qu'au serveur qui l'a
fourni), sauf si le serveur accepte explicitement les connexions (il faut configurer
le serveur Web spécialement).
Interface relativement bas-niveau
Ne permet pas une communication temps réel
On peut demander un résultat d'un autre type que string (document HTML, objet
JSON, …)
14/16
Démo
On souhaite faire une boite de texte qui propose de la complétion à partir d'un
dictionaire en français.
On doit écrire une partie serveur et une partie client.
15/16
Retour sur l'exercice de « sécurité »
Le script malicieux peut-il utiliser AJAX pour envoyer les cookies au serveur ?
16/16