Dialog API's messageParent not working with OWA

Question

I'm using the Office Javascript API for my Outlook add-in. I am running outlook-web-16.01 (https://outlook.live.com/owa/).

I can get the dialog popup by calling UI.displayDialogAsync. But calling UI.messageParent doesn't result in DialogMessageReceived getting triggered on the parent page. I am running both parent and dialog on the same domain.

Manually closing the dialog does however trigger DialogEventReceived on the parent and with a 12006.

I also noticed that the dialog has this error on the JS console right after loading, but not sure if it is related:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://outlook.live.com') does not match the recipient window's origin ('MyOrigin').

I am using the OfficeDev example from GitHub.

My code to launch the dialog on the parent page copied from here,

function dialogCallback(asyncResult) {
  if (asyncResult.status == "failed") {

      // In addition to general system errors, there are 3 specific errors for 
      // displayDialogAsync that you can handle individually.
      switch (asyncResult.error.code) {
          case 12004:
              console.log("Domain is not trusted");
              break;
          case 12005:
              console.log("HTTPS is required");
              break;
          case 12007:
              console.log("A dialog is already opened.");
              break;
          default:
              console.log(asyncResult.error.message);
              break;
      }
  }
  else {
      dialog = asyncResult.value;
      /*Messages are sent by developers programatically from the dialog using office.context.ui.messageParent(...)*/
      dialog.addEventHandler(Microsoft.Office.WebExtension.EventType.DialogMessageReceived, messageHandler);

      /*Events are sent by the platform in response to user actions or errors. For example, the dialog is closed via the 'x' button*/
      dialog.addEventHandler(Microsoft.Office.WebExtension.EventType.DialogEventReceived, eventHandler);

      console.log(`handler registered`);
  }
}

function messageHandler(arg) {
    console.log(`handler called`);
    dialog.close();
    console.log(arg.message);
}

function eventHandler(arg) {

    // In addition to general system errors, there are 2 specific errors 
    // and one event that you can handle individually.
    switch (arg.error) {
        case 12002:
            console.log("Cannot load URL, no such page or bad URL syntax.");
            break;
        case 12003:
            console.log("HTTPS is required.");
            break;
        case 12006:
            // The dialog was closed, typically because the user the pressed X button.
            console.log("Dialog closed by user");
            break;
        default:
            console.log("Undefined error in dialog window");
            break;
    }
}

  var dialogUrl = 'MyOrigin/outlook/function-file/dialog.html';
  Office.context.ui.displayDialogAsync(dialogUrl, { height: 50, width: 50 }, dialogCallback);

And for the dialog HTML, I am doing exactly the same of this code.

Answer 1

After debugging Microsoft Office library I found the issue. In order for messaging to work properly, your URL's in manifest files should be prefixed with the https://

As soon as I updated my Manifest, it all starts working.

Just make sure your URLs in AppDomains prefixed with https://

  <AppDomains>
    <AppDomain>https://app.polarcrm.com</AppDomain>
    <AppDomain>https://localhost:44321</AppDomain>
  </AppDomains>

This is the details of my implementation: https://yaplex.com/blog/office-addin-messageparent-not-working