Can't get HTMLComponent to send message back to page code

Ask the community
,
1

I created an HTMLcomponent using the example code provided by Wix.

I can send a message from the page code to the HTMLcomponent and that works.
When the windows.parent.postMessage() within the HTMLcomponent executes, this does not fire the onMessage() event in the page code.
Otherwise, the HTMLcomponent code works and is able to connect to the 3rd party API and renders a PDF.

I have narrowed down the issue to the url string within the postMessage(). I tried both the https:// and http:// versions of my website url (both with and without the www.) but that did not work. The funny thing is when I use the “*” as the url, then it does work.

But according to Wix recommendations as well as the Monzilla docs page regarding postMessage(), they both say never use “*”, in order to avoid exposure of data to a malicious site.

My page contains 2 objects, a button (buttonHTML) and the HTMLcomponent (html1)

What am I missing?

page code

$w.onReady(function () {
});

export function html1_message(event) {
    if (event.data) {
        console.log("Request came from: "+ event.origin);
        console.log(`Message received by page code: ${event.data}`);
    }
}

export function buttonHTML_click(event) {
    $w("#html1").postMessage("Message from page code");
}

HTMLcomponent code

<!doctype html>
<html>
<head>
 
  <script type="text/javascript">
function init() {
  // when a message is received from the page code
  window.onmessage = (event) => {
    if (event.data) {
      console.log("HTML Code Element received a message!");
      insertMessage(event.data);
    }
  }
}

// display received message
function insertMessage(msg) {
  document.getElementById('demo').innerHTML = msg;
  sendReturnMessage("Message from the HTML Component!");
}

// send message to the page code
function sendReturnMessage(msg) {
 try {
     console.log("We are going to try and run postMessage().");
     window.parent.postMessage(msg, "https://mywebsite.org/");
     console.log("We just completed running postMessage().");     
 } catch ( error ) {
     console.log(error.message);     
 }
}
</script>
</head>
<body onload="init();" >
     <h1>HTML Component Test</h1>
     <h3>(PDF Viewer Test)</h3>
     <p id="demo">Message will go here</p>
     <div id="adobe-dc-view"></div>
     <script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
     <script type="text/javascript">
     document.addEventListener("adobe_dc_view_sdk.ready", function(){ 
		var adobeDCView = new AdobeDC.View({clientId: "my api key here", divId: "adobe-dc-view"});
		adobeDCView.previewFile({
			content:{location: {url: "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}},
			metaData:{fileName: "Bodea Brochure.pdf"}
		}, {embedMode: "SIZED_CONTAINER"});
	});
</script>      
  </body>
</html>
2

I can remember having that same problem a couple of years ago but cant remember how i fixed it. Can you set up -
try{
window . parent . postMessage ( msg , “https://mywebsite.org” );
}
catch(err){
console.log(err);
}
to see if there is an error being thrown in console?

3

I tried inserting the try-catch block as you suggested, there are no errors. I put console.log messages before and after the postMessage(), and both messages printed fine, indicating that the postMessage completed successfully without hitting the catch block. I did find an error with my function init declaration (space between the ()). I fixed that, but that didn’t make any change to code running

4

yeah, sounds like the issue may just be url target related since it works properly with *. Are you using the base url for your whole site? or just the specific page?

5


I have been using this for ~2 years now without any problems

6

@devadrianhankin Solved it. The correct url has to be:
“https://www.mysiteurl.com/” (insert your sitename)

The trailing slash is needed in order to get it to work.

Now I have a different issue. Whenever I move the mouse around inside of the HTMLcomponent or on the page, or leave the HTMLcomponent, it fires the “window.onmessage = (event)” from the init() function within the HTMLcomponent.

I really only want the event to fire if I send the message from the page code, (eg: I pressed the button). I’m going to get false messages. How did you deal restricting the event to only fire if it gets the message from the page code.

7

ahh the slash was needed. makes sense. Your new issue seems weird, i dont think i can help there, my event only fires on message

8