¿Se rompe el postMessage de origen cruzado en IE10?

Estoy tratando de hacer que postMessage ejemplo de postMessage trivial …

  • en IE10
  • entre ventanas / tabs (vs. iframes)
  • a través de orígenes

Elimine cualquiera de estas condiciones, y las cosas funcionan bien 🙂

Pero, por lo que puedo decir, entre-ventana postMessage solo parece funcionar en IE10 cuando ambas ventanas comparten un origen. (Bueno, de hecho, y extrañamente, el comportamiento es un poco más permisivo que eso: dos orígenes diferentes que comparten un host parecen funcionar también).

¿Es esto un error documentado? ¿Alguna solución provisional u otro consejo?

(Nota: esta pregunta toca los problemas, pero su respuesta es sobre IE8 e IE9, no 10)


Más detalles + ejemplo …

demo de la página del lanzador

    window.addEventListener("message", function(e){ console.log("Received message: ", e); }, false);    

demo de la página lanzada

    window.opener.postMessage("Ahoy!", "*");   

Esto funciona en: http://jsbin.com/ahuzir/1 – porque ambas páginas están alojadas en el mismo origen (jsbin.com). Pero mueva la segunda página a cualquier otro lado, y falla en IE10.

Estaba equivocado cuando originalmente publiqué esta respuesta: en realidad no funciona en IE10. Aparentemente, la gente lo ha encontrado útil por otras razones, así que lo dejo para la posteridad. Respuesta original a continuación:


Vale la pena señalar: el enlace en esa respuesta que vinculó a estados indica que postMessage no tiene un origen cruzado para las ventanas separadas en IE8 e IE9, sin embargo, también se escribió en 2009, antes de que llegara IE10. Entonces no tomaría eso como una indicación de que está arreglado en IE10.

En cuanto a postMessage sí mismo, http://caniuse.com/#feat=x-doc-messaging indica que todavía está roto en IE10, que parece coincidir con su demo. La página caniuse enlaces a este artículo , que contiene una cita muy relevante:

Internet Explorer 8+ admite parcialmente la mensajería cruzada de documentos: actualmente funciona con iframes, pero no con ventanas nuevas. Internet Explorer 10, sin embargo, admitirá MessageChannel. Firefox actualmente admite mensajes cruzados, pero no MessageChannel.

Entonces su mejor opción es tener una ruta de código basada en MessageChannel , y una alternativa a postMessage si eso no existe. No obtendrá soporte para IE8 / IE9, pero al menos funcionará con IE10.

Documentos en MessageChannel : http://msdn.microsoft.com/en-us/library/windows/apps/hh441303.aspx

Cree una página de proxy en el mismo host que el iniciador. La página de proxy tiene un iframe con fuente configurada en página remota. Cross-origin postMessage ahora funcionará en IE10 así:

  • La página remota usa window.parent.postMessage para pasar datos a la página de proxy. Como esto usa iframes, es compatible con IE10
  • La página proxy usa window.opener.postMessage para pasar los datos a la página del iniciador. Como está en el mismo dominio, no hay problemas de origen cruzado. También puede invocar directamente métodos globales en la página del iniciador si no desea utilizar postMessage, por ej. window.opener.someMethod(data)

Muestra (todas las URL son ficticias)

Página del iniciador en http://example.com/launcher.htm

    Test launcher page      

Página de proxy en http://example.com/proxy.htm

    Proxy page        

Página remota en http://example.net/remote.htm

    Remote page     

Remote page

Basándome en la respuesta por enredo, tuve éxito en IE11 [y emulé el modo IE10] usando el siguiente fragmento:

 var submitWindow = window.open("/", "processingWindow"); submitWindow.location.href = 'about:blank'; submitWindow.location.href = 'remotePage to comunicate with'; 

Luego pude comunicarme usando la típica stack postMessage, estoy usando un mensajero estático global en mi escenario (aunque no creo que sea significativo, también estoy adjuntando mi clase de mensajería)

 var messagingProvider = { _initialized: false, _currentHandler: null, _init: function () { var self = this; this._initialized = true; var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; var eventer = window[eventMethod]; var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; eventer(messageEvent, function (e) { var callback = self._currentHandler; if (callback != null) { var key = e.message ? "message" : "data"; var data = e[key]; callback(data); } }, false); }, post: function (target, message) { target.postMessage(message, '*'); }, setListener: function (callback) { if (!this._initialized) { this._init(); } this._currentHandler = callback; } } 

No importa cuánto lo intenté, no pude hacer que las cosas funcionen en IE9 e IE8

Mi configuración donde está funcionando:
Versión de IE: 11.0.10240.16590, Versiones de actualización: 11.0.25 (KB3100773)

En este momento, (2014-09-02), su mejor opción es usar un marco de proxy como se indica en la publicación de blog de msdn que detalla una solución para este problema: https://blogs.msdn.microsoft.com/ieinternals/2009 / 09/15 / html5-implementation-issues-in-ie8-and-later /

Aquí está el ejemplo de trabajo: http://www.debugtheweb.com/test/xdm/origin/

Debe configurar un marco proxy en su página que tenga el mismo origen que el elemento emergente. Envíe información de la ventana emergente al marco proxy utilizando window.opener.frames[0] . Luego use postMessage desde el marco del proxy a la página principal.

Basándose en las respuestas de LyphTEC y Akrikos, otra solución es crear un dentro de una ventana emergente en blanco, lo que evita la necesidad de una página de proxy separada, ya que la ventana emergente en blanco tiene el mismo origen que su abrelatas.

Página del iniciador en http://example.com/launcher.htm

   postMessage launcher    

postMessage launcher

click me

Página remota en http://example.net/remote.htm

   postMessage remote    

postMessage remote

No estoy seguro de cuán frágil es esto, pero está funcionando en IE 11 y Firefox 40.0.3.

Esta solución implica agregar el sitio a los Sitios de Confianza de Internet Explore y no en los sitios de la Intranet Local. Probé esta solución en Windows 10 / IE 11.0.10240.16384, Windows 10 / Microsoft Edge 20.10240.16384.0 y Windows 7 SP1 / IE 10.0.9200.17148. La página no debe estar incluida en la Zona de Intranet .

Abra la configuración de Internet Explorer (Herramientas> Opciones de Internet> Seguridad> Sitios de confianza> Sitios) y agregue la página, aquí uso * para que coincida con todos los subdominios. Asegúrese de que la página no esté en la lista en los sitios Intranet locales (Herramientas> Opciones de Internet> Seguridad> Intranet local> Sitios> Avanzado). Reinicia tu navegador y prueba de nuevo.

Agregar a sitios de confianza en Internet Explorer

En Windows 10 / Microsoft Edge , encontrará esta configuración en el Panel de control> Opciones de Internet.

ACTUALIZAR

Si esto no funciona, puede intentar restablecer todos sus ajustes en Herramientas> Opciones de Internet> Configuración avanzada> Restablecer configuración de Internet Explorer y luego Restablecer: ¡ úselo con precaución ! Entonces necesitarás reiniciar tu sistema. Después de eso, agrega los sitios a los sitios de confianza.

Consulte en qué zona está su página en Archivo> Propiedades o haciendo clic con el botón derecho.

Propiedades de la página en Internet Explorer

ACTUALIZAR

Estoy en una intranet corporativa y, a veces, funciona y otras no (configuración automática, incluso comencé a culpar al proxy corporativo). Al final usé esta solución https://stackoverflow.com/a/36630058/2692914 .

MessageChannel no funciona para IE 9-11 entre ventanas / tabs ya que depende de postMessage, que aún está roto en este escenario. La “mejor” solución es llamar a una función a través de window.opener (es decir, window.opener.somefunction (“somedata”)).

Solución con más detalle aquí

Intereting Posts