Programmation Web Avancée Cours 7 Web Storage Ajax kn@lri.fr
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
Storage L'object Storage implémente une table associative clé valeur : Associe dans l'espace de stockage la valeur value à la clé key (toutes deux sont des chaînes de caractères arbitraires)..setitem(key, value) :.getitem(key) : Renvoie la valeur associée à la clé key.removeitem(key) :.length :.key(i) : Supprime la valeur associée à la clé key Renvoie le nombre de clé associées 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:password@www.example.com/dir2/other.html http://www.example2.com/dir/page2.html http://example.com/dir/page2.html http://www.example.com:8080/dir/page2.html https://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) :.send() :.responsetext :.status :.readystate : 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. envoie la requête au serveur. L'appel retourne immédiatement si async valait vrai lors de l'ouverture contient la réponse du serveur sous forme de chaîne de caractères le code HTTP de la réponse du serveur 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