Is it possible to send window messages to an embedded website?

Question

I'm creating a script that runs on every website (using temperMonkey). On a shortcut I inject a form into the page. So if I am in stackoveflow, I pres cmd+esc and I embed a local vuejs page

Step 1: Inject an iframe to (say) stack overflow and send a message to the embedded site**

var iframe = document.createElement("iframe");
  iframe.type="text/html"
  iframe.src="http://localhost:8080/webhighlights"
  iframe.id="localFrame"
var data = {title: document.title,   url: window.location,}
  iframe.onload= function(){
      var t = document.getElementById('localFrame'); 
    t.contentWindow.postMessage({
        data
    }, 'http://localhost:8080/webhighlights');
  }

Step 2: get the message from the site that has embedded me:

mounted: function () {
/* eslint-disable */
    window.top.addEventListener('message',receiveMessage, false);
      function receiveMessage (event) {
        console.log('event data: ', event)
      }
}

The message doesn't come through. The error I get in the console is Failed to execute 'postMessage' on 'Window': Location object could not be cloned. at HTMLIFrameElement.iframe.onload

Answer 1

You are sending a message to your iframe's context, so from this iframe you don't want to listen for top's messages, but only for this iframe's window ones.

Change

window.top.addEventListener('message',...

to

window.addEventListener('message',...

If you want to understand better how messaging works, I invite you to read this answer of mine.
Baiscally with an iframe, one port is in the main context, under HTMLIframeElement.contentWindow, and the other one is in the iframe's context, under window. To communicate between both contexts, each context should listen to and talk in their own port.

---

When this is fixed you will face a new issue that the location object can't be cloned. Since apparently you only want to send the current URL of the main page, then only send this:

var data = {title: document.title,   url: window.location.href };