PostMessage from a sandboxed iFrame to the main window, origin is always null

Question

There's something I don't get about the event origin with javascript postMessage event.

Here is my main page:

<html>
<body>

<h1>Test</h1>
<h2>Outside</h2>

<iframe src="iframe-include.html" 
    width="100%" height="100" 
    sandbox="allow-scripts"></iframe>

<script type="text/javascript">
window.addEventListener('message', function (event) {
    console.log(event);
}, false);
</script>

</body>
</html>

And my iFrame content

<html>
<body>

<h3>Inside</h3>

<script type="text/javascript">
var counter = 1,
    domain = window.location.protocol + '//' + window.location.host,
    send = function () {
        window.setTimeout(function () {
            console.log('iframe says:', domain);
            window.parent.postMessage(counter, domain);
            counter += 1;
            send();
        }, 3000);
    };

send();
</script>

</body>
</html>

Looking at the console, the origin property of the event object is always null, even if the domain variable in the iFrame is correct.

My console says:

iframe-include.html:11 iframe says: http://127.0.0.1:8181
iframe.html:11 MessageEvent {isTrusted: true, data: 2, origin: "null", lastEventId: "", source: Window…}

In every doc, it says that it's important to check on event.origin inside de "message" event listener. But how to do that if it's always null?

Thanks for the help

Possible duplicate of [Failed to execute 'postMessage' on 'DOMWindow': The target origin provided does not match the recipient window's origin ('null')](http://stackoverflow.com/questions/22194409/failed-to-execute-postmessage-on-domwindow-the-target-origin-provided-does) — Paul Sweatte, Jul 26 '16 at 20:53
No, it is a completely different issue, although the cause is the same. I am having it too... — Sych, Jan 09 '17 at 14:14
@kintsukuroi What do you mean exactly? I just copy-pasted the output from the Chrome console. Just tried right now and I have the same result — rekam, Aug 31 '18 at 06:48
@rekam I mean this: iframe-include.html:11 iframe says: http://127.0.0.1:8181 iframe.html:11 MessageEvent {isTrusted: true, data: 2, origin: "null", lastEventId: "", source: Window…}, how did you get to that info? — kintsukuroi, Sep 03 '18 at 06:49
really just copy-pasted chrome console content. The text "iframe-include.html:11 iframe says..." is not visible in the console, but when I paste it, it is here. I use Chromium 67 on Ubuntu 17.10 — rekam, Sep 04 '18 at 07:10

score 10 · Answer 1 · answered Aug 27 '19 at 08:30

As pointed out here, there is a perfectly fine way to determine the sender in that scenario, without giving the allow-same-origin permission:

  // Sandboxed iframes which lack the 'allow-same-origin'
  // header have "null" rather than a valid origin. This means you still
  // have to be careful about accepting data via the messaging API you
  // create. Check that source, and validate those inputs!
  var frame = document.getElementById('sandboxed');
  if (e.origin === "null" && e.source === frame.contentWindow)
    alert('Result: ' + e.data);

Note that the origin isn't null, it's "null".

score 5 · Accepted Answer · answered Sep 19 '17 at 12:14

5

Since the iframe is sandboxed it lost access to its origin data.

adding allow-same-origin to the iframe sandbox property will make it work again.

answered Sep 19 '17 at 12:14

Miguel Castro

66
1
3

Is it possible to set the origin data manually after it is lost? – kintsukuroi Aug 30 '18 at 03:34

PostMessage from a sandboxed iFrame to the main window, origin is always null

2 Answers2

Linked