Comunidad de diseño web y desarrollo en internet online

Introducción a HTML5 Web Messaging

Por jonasanx el 06 de Abril de 2012 con 30,534 visitas

HTML, CSS y Javascript Otros tutoriales por jonasanx.

HTML5 Web Messaging es una API de JavaScript que permite de una forma segura compartir información entre documentos en el mismo contexto de navegación, sin correr el riesgo de exponer el DOM a un sitio hostil. La especificación está centrada en relegar la comunicación de documentos directamente al navegador, logrando así una implementación hermosa y sin necesidad de intervención del servidor, reduciendo así su carga e incrementando la seguridad en el sitio (teóricamente).

En la Web actual es común el intercambio de información entre documentos pertenecientes o no al mismo dominio, no obstante es un problema no muy sencillo de solucionar. Un ejemplo común es cuando se tiene un anuncio publicitario contenido en un iframe alojado en un servidor externo, en el cual se necesita enviar valores relacionados con el contenido de la pagina principal, esto con la finalidad de mostrar un anuncio adecuado.

Para automatizar este proceso recurrimos a JavaScript, y lo más sencillo es que el iframe lea de alguna manera la etiqueta meta keywords de la página principal o que esta misma proporcione dicha información; sin embargo, el acceso al DOM desde cualquiera de las partes no está permitido por el navegador, esto debido principalmente a la política del mismo origen –una medida importante de seguridad presente en los navegadores modernos– que admite la comunicación sin restricciones de scripts en documentos del mismo sitio, no siendo así entre aquellos que son diferentes.


Ante esta problemática surgieron algunos mecanismos como Cross-Frame Messaging; una solución que carece de naturalidad, poco elegante y que requiere hacer malabares.

En los siguientes ejemplos se han utilizado dominios locales (revisar el apéndice) así como la ultima versión de Google Chrome.


Cross-document messaging: enviando y recibiendo mensajes


El envío de un mensaje es relativamente sencillo, no hace falta más que utilizar el método postMessage de un objeto window referenciado, ya sea de la propiedad contentWindow de un iframe, el objeto devuelto de window.open, o un nombre/indice en window.frames.

Código :

window.postMessage( Mensaje, Origen );

El primer parámetro es el mensaje que va a ser enviado. Éste puede ser una cadena de texto, un objeto, un array, etc.

El segundo parámetro es el dominio de la ventana objetivo, es decir, la ventana que va a recibir el mensaje. Si no se desea especificar un origen en concreto puede utilizarse un asterisco como comodín, sin embargo esto no es nada recomendable ya que deja enormes agujeros de seguridad. Por otra parte si el origen es el mismo que el del emisor puede utilizarse simplemente una barra diagonal: "/" (lamentablemente Google Chrome no soporta este último).

También puede añadirse un tercer parámetro, el cual debe ser un objeto MessagePort, pero esto será tratado mas adelante.

Enviar un mensaje


http://emisor.com/emisor.html

Código :

...
<body>
   <iframe src="http://receptor.com/receptor.html"></iframe>
   <button>Enviar mensaje</button>

   <script>
      var iframe = document.querySelector("iframe");
      var button = document.querySelector("button");

      var enviarMensaje = function(){
         iframe.contentWindow.postMessage("Hola, ¿como estas?", "http://receptor.com");
      };
      
      // Al dar click al botón se ejecutar el método enviarMensaje.
      button.addEventListener("click", enviarMensaje, false);
   </script>
</body>
...

Al dar click al botón se enviará un mensaje con el contenido: "Hola, ¿como estas?", al iframe alojado en receptor.com; sin embargo nuestro ejemplo no está completo con sólo enviar el mensaje, también es necesario recibirlo, pero antes de continuar es importante conocer los atributos del evento message que será disparado en receptor.com cuando se reciba un mensaje.

Atributos del evento message


El evento message está compuesto por cinco atributos que sólo pueden ser leídos, que básicamente significa que es imposible alterar el valor de cualquiera de ellos.

  • evento.data: contiene la información del mensaje enviado por el emisor.
  • evento.origin: devuelve una cadena de texto conteniendo el origen del emisor. Ej. http://emisor.com
  • evento.lastEventId: una cadena con el identificador único del actual evento de message.
  • evento.source: es una referencia al objeto window de quien envía el mensaje.
  • evento.ports: un array conteniendo un objeto de MessagePort enviado junto al mensaje.

Recibir un mensaje


http://receptor.com/receptor.html

Código :

…
  <body>
    <div id="mensaje">Aún no he recibido nada. :(</div>
    <script>
      var mensaje = document.querySelector("#mensaje");
      
      var recibirMensaje = function( evento ){

        // Verificamos que efectivamente el origen sea de emisor.com
        if (evento.origin == "http://emisor.com")
          mensaje.innerHTML = evento.data;
      };

   // Cuando se reciba un evento message se ejecutara las función recibirMensaje.
      window.addEventListener("message", recibirMensaje, false);
    </script>
  </body>
…

El funcionamiento del ejemplo anterior es simple: se comienza a escuchar al evento message; cuando un mensaje es detectado, se dispara el método recibirMensaje que simplemente verifica que el origen sea el esperado y después se coloca el texto recibido dentro del elemento #mensaje.

Si intentan mandar a la consola – console.log(evento) – la información del objeto evento, se darán cuenta que al final les aparece un error. Esto se debe a lo que mencioné al principio, el receptor sólo tiene acceso a la información que explícitamente es enviada, y al colocarlo en la consola está siempre y tratará de imprimir todo el árbol del DOM.


Como pueden ver es igual de sencillo recibir un mensaje, pero deben tener siempre presente que se tiene que verificar que en efecto, el origen sea el esperado, incluso el tipo de dato que se espera: una cadena de texto, un número, un objeto, etc. Además de que es muy importante que se controle el número de mensajes que pueden ser recibidos por minuto, de lo contrario dejarían la puerta abierta a un posible ataque de denegación de servicio.

Ahora bien, por qué no extender el ejemplo haciendo que nuestro receptor sea capaz de ser emisor también, y viceversa:

http://emisor.com/emisor.html

Código :

...
  <body>
    <iframe src="http://receptor.com/receptor.html"></iframe>
    <div id="mensaje">Esperando contestación...</div>
    
    <button>Enviar mensaje</button>

    <script>
      var iframe  = document.querySelector("iframe");
      var button  = document.querySelector("button");
      var mensaje = document.querySelector("#mensaje");

      var enviarMensaje = function(){
        iframe.contentWindow.postMessage("¿Como te llamas?", "http://receptor.com");
      };

      var recibirMensaje = function( evento ){
        if (evento.origin == "http://receptor.com")

          // Retrasamos la publicación del mensaje solo para hacerla de emoción.
          setTimeout(function(){
            mensaje.innerHTML = "Receptor: " + evento.data;
          }, 3000);

      };

      button.addEventListener("click", enviarMensaje, false);
      window.addEventListener("message", recibirMensaje, false);
    </script>
  </body>
...

http://receptor.com/receptor.html

Código :

…
  <body>
    <div id="mensaje">Aún no he recibido nada. :(</div>
    <script>
      var mensaje = document.querySelector("#mensaje");
      
      var recibirMensaje = function( evento ){
        if (evento.origin == "http://emisor.com"){
          mensaje.innerHTML = "Emisor: " + evento.data;

          // Aquí evento.source es una referencia al objeto window del emisor.
          // evento.origin contiene el origen del emisor: "http://emisor.com"
          evento.source.postMessage("iPad Pepito, por que solo iPad es «too mainstream».", evento.origin);
        }

      };

      window.addEventListener("message", recibirMensaje, false);
    </script>
  </body>
...

Ver ejemplo funcionando en el navegador




MessageChannel y MessagePort


Hasta ahora sólo hemos visto la primera mitad que compone la especificación de HTML5 web messaging; sin embargo esta también nos provee de un objeto llamado MessageChannel, el cual permite el funcionamiento de dos piezas de código independendientes (ej. corriendo en diferentes contextos de navegación) comunicarse directamente. Por ejemplo: tenemos dos iframes contenidos en un documento: por simple deducción concluimos que están en el contexto de navegación del documento principal; por otra parte, estos iframes entre sí no están en el mismo contexto; a pesar de que están juntos; uno no sabe de la existencia del otro.

Otro ejemplo: considera una situación en la cual una red social tiene incrustado un iframe de una libreta de direcciones, y otro iframe que contiene un juego en línea. El juego necesita las direcciones electrónicas de los amigos del usuario, para esto se necesita la información de la libreta de direcciones. Es aquí cuando MessageChannel hace su aparición para hacer este proceso posible, en este caso la red social actuaría como mediador en la comunicación entre ambos iframes.

Lamentablemente Firefox todavía no soporta MessageChannel.


Componentes de MessageChannel


El objeto MessageChannel está compuesto por dos puertos (port1 y por2) que no son otra cosa sino objetos de MessagePort, y estos a su vez contienen tres métodos:


  • puerto.postMessage( mensaje ): envía mensajes a través del puerto en cuestión.
  • puerto.start(): comienza el envío de mensajes a través del puerto.
  • puerto.stop(): detiene el envío de mensajes a través del puerto.

MessagePort también contiene el evento onmessage, que puede ser utilizado en lugar de agregar un addEventListener.

Ejemplo


Con la finalidad de explicar mejor cómo trabajan MessageChannel y MessagePort, en este ejemplo nos basaremos en el escenario de la red social descrito anteriormente.

Por cuestiones de infraestructura se utilizara un mismo origen; sin embargo la estructura es básicamente la misma para orígenes externos.


En primera instancia tenemos la página del juego. Lo primero que haremos es definir una función que se ejecutará cuando la estructura de nuestro documento esté completamente cargada. El objetivo primordial de esta función será el indicar a nuestro documento principal – la red social – que ya está listo para empezar a recibir correos. Para conseguir esto se crea un nuevo objeto MessageChannel, del cual su segundo puerto será enviado en un mensaje al documento principal. Después iniciamos nuestro primer puerto para procesar los mensajes que serán recibidos.

http://red-social.com/juego.html

Código :

…
<body>
<!-- En #correos serán añadidas las direcciones de correo electrónico que sean recibidas. -->
<ul id="correos"></ul>

<script>
  var documentoCargado = function(){
    
    // Definimos las variables que serán utilizadas.
    var canal, correos, recibirMensaje;
    
    // Seleccionamos lo que será nuestro contenedor de correos.
    correos = document.querySelector("#correos");

    // Creamos un objeto MessageChannel.
    canal = new MessageChannel();

    // Esta es nuestra función que será encargada de procesar los mensajes entrantes, 
    // en otras palabras, de publicar los correos que sean enviados desde la agenda.
    recibirMensaje = function( evento ){
      // creamos un nuevo elemento "li" y le añadimos el correo recibido.
      var correo = document.createElement("li");
      correo.innerText = evento.data;

      // Depues agregamos este mismo "li" a nuestro contenedor de correos (ul#correos).
      correos.appendChild( correo );
    };  
    
    // Ahora que el documento esta cargado, le enviamos un mensaje con el puerto dos a la red social (el sitio que contiene este iframe)
    // diciendo que ya estamos listos para recibir los correos.
    window.parent.postMessage("¡Estoy listo!", "http://emisor.com", [canal.port2]);

    // Por el puerto uno escuchamos la llegada de cualquier mensaje.
    canal.port1.addEventListener("message", recibirMensaje, false);
    // y abrimos el puerto.
    canal.port1.start();
  };

  // Esperemos a que se cargue el DOM. 
  // * esta es la versión con JavaScript puro de $(document).ready() de jQuery.
  window.addEventListener("DOMContentLoaded", documentoCargado, false);
</script>
</body>
…

La red social actuará como proxy: será quien enlace el juego con la agenda. Una vez que se reciba el mensaje de parte de la página del juego será enviado un mensaje a la agenda contiendo el puerto para comunicarse con el juego.

http://red-social.com/redsocial.html

Código :

…
<body>
 <iframe src="juego.html"></iframe>
  <iframe src="agenda.html"></iframe>

  <script>
  var documentoCargado = function(){
  
    // Seleccionamos nuestra agenda, la cual esta contenida en el segundo iframe
    // de nuestro documento.
    var agenda = window.frames[1];

    // Función encarga de procesar el mensaje entrante.
    var recibirMensaje = function( evento ){
      
      // Le enviamos a la agenda un mensaje avisando que puede empezar
      // a enviar información a la pagina del juego. Al mismo tiempo, le enviamos
      // el puerto (port2) por el cual puede comunicarse directamente con la pagina del juego.
            agenda.postMessage("Puede transmitir", "http://emisor.com", evento.ports)
    };
    
    // Escuchamos a cualquier evento message que pueda llegar.
    window.addEventListener("message", recibirMensaje, false);
  };

  // Esperamos a que se cargue el documento.
  window.addEventListener("DOMContentLoaded", documentoCargado, false);
  </script>
</body>
 ...

En la agenda tenemos un simple formulario con una entrada de texto, en el cual serán ingresadas las direcciones electrónicas.

http://red-social.com/agenda.html

Código :

…
<body>
<!-- Este es el formulario en donde se ingresarán las direcciones de correo electrónico que serán enviadas a la página del juego. -->
<form>
  <input type="email" placeholder="Ingrese e-mail" required>
  <button>Enviar</button>
</form>

<script>  
  var documentoCargado = function(){
    var recibirMensaje = function( evento ){
      
      // Localizamos nuestro formulario.
      var formulario = document.forms[0];

      var procesarFormulario = function( form ){
        
        // Detenemos el envio del formulario
        form.preventDefault();

        // Leemos el contenido de nuestra entrada de texto.
        var correo = formulario.querySelector("input").value;
        
        // Enviamos el correo ingresado por el puerto recibido en el mensaje (port2) que fue enviado desde la red social.
        evento.ports[0].postMessage( correo );
      };
              
      // Cuando se envíe el formulario se ejecutara la función procesarFormulario.
      formulario.addEventListener("submit", procesarFormulario, false);
        };
  
    // Escuchamos a cualquier evento message que pueda llegar.
    window.addEventListener("message", recibirMensaje, false);
  };  

  // Esperamos a que se cargue el documento.
  window.addEventListener("DOMContentLoaded", documentoCargado, false);
</script>
</body>
...

Por cuestiones de legibilidad y simpleza se omitieron todas las validaciones que deben hacerse; validar el origen, el tipo de datos, etc.


Ver el ejemplo funcionando en el navegador.



Conclusión


Esta es una tecnología asombrosa que ayudará a hacer la vida mas fácil a muchos desarrolladores, no obstante habrá que esperar un tiempo más, ya que los navegadores principales solo han implementado parcialmente HTML5 web messaging.

Referencias



Apéndice


Para simular distintos dominios se agregan entradas al archivo hosts de los dominios deseados, por ejemplo: emisor.com, receptor.com y red-social.com. En Ubuntu y Mac este archivo se encuentra en "/etc/hosts" y "system32\drivers\etc\hosts" en Windows. Se echa a andar un servidor web, como Nginx (aunque vale con cualquier otro como Lighttpd, Cherokee o el tradicional Apache) con los dominios apuntando a una misma carpeta, sin otro motivo más que de comodidad, ya que se tienen los archivos juntos.

Archivo hosts

Código :

127.0.0.1 emisor.com
127.0.0.1 receptor.com
127.0.0.1 red-social.com

Configuración ejemplo de Nginx

Código :

server {
  listen   80;

  # Tres dominios distintos apuntando a la misma carpeta.
  server_name  emisor.com alias receptor.com red-social.com; 
  location / {
    root   /home/jonasanx/public_html;
    autoindex  on; 
  }
}


Escrito por Jonathan Javier { Twitter: @jonasanx } para Cristalab.com

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Envia un comentario (9)

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate