search

OfficeDev / office-js

A repo and NPM package for Office.js, corresponding to a copy of what gets published to the official "evergreen" Office.js CDN, at https://appsforoffice.microsoft.com/lib/1/hosted/office.js.
https://learn.microsoft.com/javascript/api/overview
Other
641 stars 92 forks source link

Office Online add-in unable to communicate with dialog via BroadcastChannel #4387

Open jim22k opened 3 weeks ago

jim22k commented 3 weeks ago

Provide required information needed to triage your issue

Dialogs opened using displayDialogAsync are unable to communicate back to the main add-in using a BroadcastChannel for Office Online.

Your Environment

Expected behavior

  1. Create a BroadcastChannel in Excel add-in and register a channel.onmessage listener.
  2. Open a dialog using Office.context.ui.displayDialogAsync(url, { promptBeforeOpen: false }) to a page in the same origin as the add-in (a requirement of displayDialogAsync).
  3. Create a BroadcastChannel in the new dialog window with the same channel id that the add-in's broadcast listener has.
  4. Call channel.postMessage(msg) from the dialog.
  5. The add-in receives the message via the broadcast channel.

Current behavior

The message is never received. Note that the message is received when run in Excel for Mac. I have also verified that BroadcastChannel works

Steps to reproduce

  1. See Expected behavior section

Link to live example(s)

Provide additional details

  1. A simple dialog page that should be able to communicate back with the add-in 
    <html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
</head>
<body>
<h2>Dialog</h2>
<script>
const channel = new BroadcastChannel("DialogTestChannel");
channel.postMessage("Can you hear me?");
</script>
</body>
</html>
  2. Code to open the dialog from the taskpane 
    const channel = new BroadcastChannel("DialogTestChannel");
channel.onmessage = (e) => {
console.log("GOT THE BROADCAST MESSAGE", e);
};
Office.context.ui.displayDialogAsync(
"https://localhost:3000/dialog.html",
{ promptBeforeOpen: false },
);

Context

Communicating using BroadcastChannel seems pointless given that Office.context.ui.messageParent exists. Why not just use that?

I tried that, but after going thru my OAuth redirect flow (cross-origin), it is no longer possible to communicate with the add-in because Office.js cannot be loaded. I suspect this is due to the fact that window.opener is null after all the redirects. See https://github.com/OfficeDev/office-js/issues/3673 (comments at the end) for other users who appear to be having this same issue with Office Online. I suspect that if my OAuth provider set the correct headers, the referrer and/or original window opener could be preserved and things would work, but I do not have control over that.

I wanted a workaround solution, and BroadcastChannel should work as a mechanism for communicating between a window and an iframe from the same origin. However, something about Office Online seems to be blocking the BroadcastChannel communication to and from the add-in.

Useful logs

Thank you for taking the time to report an issue. Our triage team will respond to you in less than 72 hours. Normally, response time is <10 hours Monday through Friday. We do not triage on weekends.

shanshanzheng-dev commented 3 weeks ago

Hi @m-hellesen, Could you help take a look this issue? Thanks.