postMessage handling in IE11

user_2440262 0
Viewed 288

Suppose I have three urls:

1.http://home.com

<html>
<body>
  <iframe id="i1"></iframe>
  <script>
     var contentWindow = document.getElementById('i1').contentWindow;
     var oScript = contentWindow.document.createElement('script');
     oScript.src = "http://loader.com";
     contentWindow.document.childNodes[0].childNodes[1].appendChild(oScript);
  </script>
</body>
</html>

2.http://loader.com

var oFrame = document.createElement("iframe");
oFrame.src = "http://www.sf.com";
oFrame.onload = function() {
   oFrame.contentWindow.postMessage({ msg: 'hi'}, 'http://sf.com');
}
document.childNodes[0].childNodes[1].appendChild(oFrame);

3.http://sf.com

<html>
<head>
<script>
  window.addEventListener('message', function(event) {
    document.getElementById('h4').innerHTML = event.origin;
  });
</script>
</head>
<body>
  <h4 id="h4"></h4>
</body>
</html>

Now in any "normal" browser (edge/firefox/chrome) load the http://home.com - the chain will load script from "http://loader.com" into an iframe which will load yet another iframe with "http://sf.com" and the last iframe will displays "http://home.com" as the event origin. However in internet explorer 11 the event orgin is set to "about:". Is there a way how to get around this particular quirk ? I haven't found any docs around this particular quirk (ref: https://caniuse.com/#search=postMessage)

postmessage internet-explorer-11 javascript
1 Answers

I make a test on my side and reproduce the same issue. I also searched a lot of information but find no clue. I guess if using two iframes cause the issue. So I make another test using only one iframe and the event.origin can get the right url in IE. I use the code like below:

  1. http://home.com

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
</head>
<body id="i1">
    <script>
       var contentWindow = document.getElementById('i1').contentWindow;
       var oScript = document.createElement('script');
       oScript.src = "http://loader.com";
       document.childNodes[1].childNodes[2].appendChild(oScript);
    </script>
</body>
</html>

  2. http://loader.com

    var oFrame = document.createElement("iframe");
oFrame.src = "http://sf.com";
oFrame.onload = function () {
    oFrame.contentWindow.postMessage({ msg: 'hi' }, 'http://sf.com');
}
document.childNodes[1].childNodes[2].appendChild(oFrame);

  3. http://sf.com

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <script>
       window.addEventListener('message', function(event) {
           document.getElementById('h4').innerHTML = event.origin;
       });
    </script>
</head>
<body>
   <h4 id="h4"></h4>
</body>
</html>

Although not find any document proof but the test result let me think there might be some limitations in IE when using embed iframes. As a workaround, you could try to use only one iframe.

user_114903470
Related