OfficeJS Word Addin | Dialog API's messageParent not working across domains on MAC

Question

Microsoft Word on MAC version: 15.29.1 (161215)

Let's assume following IIS hosted setup for OfficeJS Word Addin:

1. Word Addin website with CNAME addin.xyz.com
2. API website with CNAME api.xyz.com and Google Auth provider configured.

Addin Manifest

<?xml version="1.0" encoding="UTF-8"?>
<OfficeApp 
      xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" 
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" 
      xmlns:ov="http://schemas.microsoft.com/office/taskpaneappversionoverrides"
      xsi:type="TaskPaneApp">

  <Id>07D08B11-F0F4-4BE1-9FE3-7E6648AAEB80</Id>

  <Version>1.0.0.0</Version>
  <ProviderName>xyz</ProviderName>
  <DefaultLocale>en-US</DefaultLocale>
  <DisplayName DefaultValue="xyz" />
  <Description DefaultValue="xyz"/>

  <IconUrl DefaultValue="https://addin.xyz.com/Images/Button32x32.png" />

  <AppDomains>
    <AppDomain>https://api.xyz.com</AppDomain>
    <AppDomain>AppDomain2</AppDomain>
    <AppDomain>AppDomain3</AppDomain>
  </AppDomains>

  <Hosts>
    <Host Name="Document" />
  </Hosts>
  <DefaultSettings>
    <SourceLocation DefaultValue="https://addin.xyz.com/login/index" />
  </DefaultSettings>

  <Permissions>ReadWriteDocument</Permissions>
</OfficeApp>

I am using OfficeJS Dialog API for Addin authentication following the steps mentioned in link below:

https://dev.office.com/docs/add-ins/develop/dialog-api-in-office-add-ins#using-the-dialog-apis-in-an-authentication-flow

Authentication flow

1. Word Addin on Mac initiates the auth flow by redirecting to getToken API url in dialog:

    var accessToken = {};
    var dlg;
    var messageBanner = null;

    // The initialize function must be run each time a new page is loaded.
    Office.initialize = function (reason) {
        $(document).ready(function () {               
            // Initiate login.
            signIn();
        });
    };

    function signIn() {
        if (Office.context.requirements.isSetSupported('DialogAPI', 1.1)) {
            // Use Office UI methods;
            var signInUrl = "https://api.xyz.com/getToken";
            Office.context.ui.displayDialogAsync(signInUrl,
                { height: 70, width: 40 },
                function (result) {
                    dlg = result.value;
                    dlg.addEventHandler(Office.EventType.DialogMessageReceived, processMessage);
                });
        }
        else {
            // Alternate path
            console.log('DialogAPI not available. Check <Requirements> section in manifest.');
        }
    }

    function processMessage(arg) {
        dlg.close();
        accessToken = JSON.parse(arg.message);
        if (accessToken.token) {                
            window.location.href = '/home/index';
        }
    }

2. Since API is protected by Google Auth it redirects to Google login page inside the dialog.

3. Upon successful login, the callback url i.e. API's getToken url gets invoked.

4. API generates the required auth token and callbacks parent window passing the token using messageParent method:

    Office.initialize = function (reason) { 
        Office.context.ui.messageParent(JSON.stringify({ token: <apiToken> }));
    }

5. At this point, the handler in parent window (taskpane) should get invoked, however, it doesn't. Upon root causing, it was found that the page loaded in parent window is from a (sub)domain i.e. addin.xyz.com which is different from page that is loaded in child dialog i.e. api.xyz.com

Please note that the said issue occurs only on MAC and was found working on Windows.

Answer 1

Due to the security concern in current MAC implementation, we have limitation for messageParent that "The page calling this API must be on the same domain as the parent." https://dev.office.com/reference/add-ins/shared/officeui.messageparent

In your example they are in different domains, (although in the same sub-domain,) and that's why it is failing.

Answer 2

Jignesh,

I'm new to this...but struggling through I think similar challenges.

I'm trying to use Firebase for authentication in a Word add-in.

Since Word for Windows uses IE11 (gack!), my auth flow opens an IE11 window which shares cookies etc. with the embedded browser.

But on Mac, the taskpane is webkit, not default browser...see a previous question of mine and a clearly knowledgeable answer here: What browser does Office 2016 on Mac use for taskpanes?.

I'm trying to steer clear of using Office.js authentication...just to stick with one method across my projects.

But I can't figure out how to stop an auth flow in my Mac Word 2016 taskpane triggering the default browser, which bears to relation to the embedded webkit view that contains my taskpane.