Series Coder en HTML5 – La communication inter documents ou Cross Document Messaging – Partie 1

Ce tutoriel est le premier dans une serie de tutoriaux exposant les possibilites de HTML5 que vous retrouverez sur ce blog. Dans cette premiere partie, je vais aborder du sujet de l’API de communication postMessage via des exemples. Dans un post futur,  je presenterai l’objet XMLHttpRequest niveau 2, la version amelioree de XMLHttpRequest.

L’API postMessage

La communication entre les cadres, onglets et fenêtres sur un navigateur était entièrement interdite. Ceci est notamment liée aux problèmes de sécurité qui peuvent subvenir en allouant l’accès et l’usurpation a d’autres données. Par ailleurs, avec l’avenue des “mashups” – une combination de differentes applications comme ceux de google maps, il  existe des scénarios d’utilisation légitimes.
Pour ce fait, les éditeurs des navigateurs se sont accordées pour présenter une nouvelle fonctionnalité : la communication inter documents (Cross Document Messaging). Cette fonctionnalité permet une communication sécurisée entre des sources différentes via cadres, ongles et fenêtres.

L’api est supportée dans

• Chrome   :  depuis la version 2.0
• Firefox    : depuis la version 3.0
• IE             : depuis la version 8.0
• Opera      : depuis la version 9.6
• Safari      : depuis la version 4.0

Pour envoyer un message. Il suffit d’utiliser  sur l’object JavaScript window:

postMessage('Hello, world', 'http://www.example.com/');

Pour recevoir ce message, il faut ajouter un gestionnaire d’évènements dans votre page. Quand le message arrive, vous pourrez alors déterminer son origine et effectuer votre traitement.

Exemple

Dans cet exemple, nous allons avoir deux fichiers html. le premier fichier situé a : http://demo.acrossmontreal.com/html5/crossMessaging/index.html, et qui représente le client, se compose d’un formulaire et d’un iframe.
Le formulaire permet de poster vers une page qui se trouve sur un autre domaine http://demo.berejeb.com/html5/crossMessaging/index.html. Cette même page est chargée dans le iframe du client, ce qui permet de suivre les modifications au moment du post. Voici le code :

form id="myForm" action="/"
input type="text" id="myMessage" value="Your message"
input type="submit" value="post Message to the frame!"
/form
iframe id="iFrame" src="http://demo.berejeb.com/html5/crossMessaging/index.html"/iframe

On va maintenant ajouter le bout de script JavaScript qui permettra de poster le message :

          window.onload = function () {
                var widget = document.getElementById("iFrame").contentWindow,
                form = document.getElementById("myForm"),
                myMessage = document.getElementById("myMessage");
                myMessage.select();
                form.onsubmit = function () {
                    widget.postMessage(myMessage.value, "http://demo.berejeb.com/html5/crossMessaging/index.html");
                    return false;
                };
            };

1. Au chargement de la page, Le script récupère la fenêtre du iframe via l’objet contentWindow, ainsi que le formulaire et le champs a envoyer.
2. Au moment du submit, le iframe va poster le contenu du champs vers l’adresse : http://demo.berejeb.com/html5/crossMessaging/index.html

C’est tout ce qu’il ya a faire au niveau du client. Passons au serveur (http://demo.berejeb.com/html5/crossMessaging/index.html), cette page va écouter les messages provenant d’un call postMessage, et va filtrer le contenu selon la source (le client). Au début, la page affiche un message :

div id="content"Nothing for the moment../div

Ajoutons le script Javascript qui permet d’écouter et de reagir :

function handleMessage (e) {
    var message;
    if (e.origin !== "http://demo.acrossmontreal.com") {
        message = "You are not allowed to post to this page!";
    }
    else {
        message = "Received: " + e.data + " from the client" + e.origin;
    }
    document.getElementById("content").innerHTML = message;
}

if (window.addEventListener) {
    window.addEventListener("message", handleMessage, false);
}
else {
    window.attachEvent("onmessage", displayMessage);
}

Le point a noter ici c’est l’évènement “message” (ou “onmessage” pour d’autres navigateus ;)).

A la réception d’un message, la méthode handleMessage est exécutée. en testant sur la propriété origin, on peut alors bloquer l’accès pour les sites non connues.
C’est tout ce qu’il y’a a faire!

Pour voir ce que cela donne, visitez : http://demo.acrossmontreal.com/html5/crossMessaging/

Notez bien que des problèmes de CSRF peuvent toujours subvenir surtout si on accepte du contenu html, il ne faut jamais se fier au contenu parvenant de l’extérieur meme si vous connaissez la provenance. Ajoutez des mécanismes de sécurité dans votre application pour palier a ca.

Conclusion

Dans cette premiere partie, on vient de voir comment effectuer de la communication inter documents via l’api postMessage. Dans un article suivant, je vais couvrir comment effectuer des appels Ajax en utilisant la version 2 de l’objet XMLHttpRequest.

Revisitez ce blog!