window.postMessage to script.google.com as popup

Question

When run: MyPopWindow.postMessage("Test", 'mydomaine'); I have a error on MyPopWindow whith script.google.com:

(program):1 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('mydomaine') does not match the recipient window's origin ('https://script.google.com').

When run: MyPopWindow.postMessage("Test", 'https://script.google.com'); I have a error on MyPopWindow:

dropping postMessage.. was from host mydomaine but expected host https : // ******-script.googleusercontent.com

Source in page on mydomaine:

  window.addEventListener("DOMContentLoaded", function() {
    window.addEventListener("message", function(e) {
        // wait for child to signal that it's loaded.
        if ( e.data === "loaded" && e.origin === iframe.src.split("/").splice(0, 3).join("/")) {
            // send the child a message.
            alert(e.data);
        }
    })
}, false)

Source on my Google Apps Script runing as WebApp:

        document.addEventListener('DOMContentLoaded', function () {
            // signal the parent that we're loaded.
            window.parent.postMessage("loaded", "*");
            
            // listen for messages from the parent.
            window.addEventListener("message", function(e) {
            if(event.origin !== 'mydomain') return;
                  var message = e.data;
                  alert(message);
            }, false);
        });

Leila

Answer 1

This error message comes from one of App Scripts Javascript driver files. This is extra security Google added on to prevent people from using the postMessage system.

It seems Google wants to force you to use one of their accepted protocols for communication between windows/domains, namely the Execution API. I have attempted other methods like passing URL parameters, but so far none have worked because I could not access them from within the iframe that all apps scripts run in.

I believe the Execution API is your best bet.

Reams

Yes, you're right. "I believe the Execution API is your best bet." - no :P – Leila

how would you use Execution API to comunicate between iframe (embedded web app) and the main domain? I am little bit lost here? – Donnettedonni

Answer 2

To send a message from the Google apps Script window/iframe to the parent window, I've found out that the following code works for me;

if(window.parent.parent !== window.top){
window.top.postMessage("Test", "mydomaine");
};

Sadly, I haven't, at least yet, found a way to send messages from the parent window to the Google apps script window/iframe.

-------Edit-------

I found the solution on sending a message to iframe from parent window! It's really quite simple;

The code of the parent window;

  fetch('your google apps scipt webapp url', {
  method: 'POST',
  body: JSON.stringify('the message you want to send to the 
  iframe')
  })
  .then(response => {
  if (response.ok) {
  console.log('String sent successfully to Google Apps 
  Script');
  } else {
  console.error('Error sending string to Google Apps 
  Script');
  }
  })
  .catch(error => {
  console.error('Error:', error);
  });

The code of the .gs file in your Google apps script;

    const userProperties = PropertiesService.getUserProperties();
    
    function doPost(request) {
    var payload = JSON.parse(request.postData.contents);
    userProperties.setProperty('retrievedMessage', payload);
    }

Then, In any function in the .gs file you can use:

   const retrievedMessage = userProperties.getProperty('retrievedMessage');

Note:

In the above I am using the GAS Properties Service which offers 3 methods:

1. Script Properties
2. User Properties (What I used in my example code)
3. Document Properties

Rissa