@microsoft/sp-adaptive-card-extension-base 1.23.2 → 1.24.0-beta.3

package/lib-esm/isolation/IsolatedAdaptiveCardExtensionService.js

@@ -0,0 +1,499 @@
+import { _ensureIsolatedDomainUrl } from '@microsoft/sp-component-base';
+import { ServiceKey, _BROKER_IN_USE_KEY, _BrowserUtilities } from '@microsoft/sp-core-library';
+import { _QosMonitor, _TraceLogger } from '@microsoft/sp-diagnostics';
+import { _AadTokenProviders } from '@microsoft/sp-http-base';
+import { PageContext } from '@microsoft/sp-page-context';
+import { _PerformanceExperiment, _SPPerfExperiment } from '@msinternal/sp-telemetry';
+import { isRemoveIsolatedDomainOnDisposeKSActivated, isTargetBotDriveAceAspxKSActivated, isFixIframeNameKSActive } from '../common/Killswitches';
+const TIMEOUT_INTERVAL = 15000;
+const EMBEDDED_PAGE_CONTAINER = 'embedded-page-container';
+/**
+ * @internal
+ */ export class IsolatedAdaptiveCardExtensionService {
+    /**
+   * @internal
+   */ get _pageContext() {
+        if (!this._pContext) {
+            // Since this service can be autocreated, we must consume services after autocreation has finished
+            this._pContext = this._serviceScope.consume(PageContext.serviceKey);
+        }
+        return this._pContext;
+    }
+    disposeEntry(instanceId, isolatedDomain) {
+        this._isolatedListeners.delete(instanceId);
+        if (!isRemoveIsolatedDomainOnDisposeKSActivated()) {
+            this._callbackCache.delete(instanceId);
+            // reduce the number of Isolated ACEs tied to a isolated domain
+            const frame = this._isolatedFrames.get(isolatedDomain);
+            if (frame) {
+                frame.childInstanceIds.delete(instanceId);
+                // remove the isolated domain when there is no isolated aces depending on it.
+                if (frame.childInstanceIds.size === 0) {
+                    document.body.removeChild(frame.iframe);
+                    this._isolatedFrames.delete(isolatedDomain);
+                }
+            }
+        }
+    }
+    /**
+   * Load an isolated Adaptive Card Extension.
+   *
+   * @remarks Only loads one iframe per isolated domain.
+   *
+   * @param args - {@link _ILoadIsolatedAdaptiveCardExtensionParameters}
+   */ load(args) {
+        const { callback, instanceId, listenerId } = args;
+        // Normalize the domain since we are using it as dictionary keys
+        const isolatedDomain = args.isolatedDomain.toLowerCase();
+        let isolatedFrame = this._isolatedFrames.get(isolatedDomain);
+        if (!isolatedFrame) {
+            const monitor = this._createLoadMonitor();
+            const iframe = document.createElement('iframe');
+            // to fix isTeamsHosted in Teams 2.1 and in old Teams isBrowserHosted check
+            if (!isFixIframeNameKSActive() && window.name === EMBEDDED_PAGE_CONTAINER) {
+                iframe.name = EMBEDDED_PAGE_CONTAINER;
+            }
+            const isVCD1P = _BrowserUtilities.isTeams1PVivaDesktopHosted();
+            iframe.src = this._configureIframeSrc(isolatedDomain, args);
+            /*
+       * Initialize the iframe as hidden and full screen.
+       * This effectively sets up the isolated iframe as an overlay over the application.
+       */ iframe.hidden = true;
+            iframe.scrolling = 'no';
+            iframe.style.overflow = 'hidden';
+            iframe.style.height = '100%';
+            iframe.style.width = '100%';
+            iframe.style.top = '0';
+            iframe.style.left = '0';
+            iframe.style.position = 'fixed';
+            iframe.style.zIndex = '99999';
+            iframe.style.border = 'none';
+            iframe.setAttribute('allow', 'geolocation');
+            iframe.setAttribute('data-automation-id', 'isolated_ACE_iframe');
+            document.body.appendChild(iframe);
+            const isolatedFrameKey = isolatedDomain.toLowerCase();
+            isolatedFrame = {
+                iframe,
+                frameMonitor: monitor,
+                isReady: false,
+                messageQueue: [],
+                retryCount: 0,
+                childInstanceIds: new Set()
+            };
+            isolatedFrame.timeoutId = setTimeout(()=>{
+                this._handleIframeTimeout(isolatedFrameKey, isVCD1P);
+            }, TIMEOUT_INTERVAL);
+            this._isolatedFrames.set(isolatedFrameKey, isolatedFrame);
+        }
+        if (!isRemoveIsolatedDomainOnDisposeKSActivated()) {
+            isolatedFrame.childInstanceIds.add(instanceId);
+        }
+        const entry = this._isolatedListeners.get(instanceId);
+        if (!entry) {
+            const listenerEntry = this._createIsolatedListenerEntry(isolatedDomain, isolatedFrame.iframe, args);
+            this._isolatedListeners.set(instanceId, listenerEntry);
+        } else if (!entry.listeners.get(listenerId)) {
+            entry.listeners.set(listenerId, {
+                callback
+            });
+        }
+        // When we are creating a new isolated ACE during authoring, we need to tell the isolated app to initialize a new ACE instance.
+        if (!args.isRenderedFromPersistedData) {
+            this.sendInitialize(args);
+        } else {
+            this._handleRenderingFromPersistedData(args);
+        }
+        // If the ACE has previously loaded, then send the latest data to the listener.
+        // Otherwise, when the isolated domain iframe has loaded we will automatically notify the listener.
+        const callbackArgs = this._callbackCache.get(instanceId);
+        if (callbackArgs) {
+            this._invokeCallback(instanceId, callbackArgs, listenerId);
+        }
+    }
+    /**
+   * Display the iframe with the ACE quick view.
+   *
+   * @param args - {@link _IRenderIsolatedQuickViewParameters}
+   */ renderQuickView(args) {
+        const { instanceId, isSelectAction, listenerId, pageTheme, targetRect, theme, viewId } = args;
+        this._sendMessage(this._getIsolatedFrame(instanceId), instanceId, {
+            serviceAction: 'Action',
+            action: {
+                action: {
+                    type: 'QuickView',
+                    isSelectAction,
+                    pageTheme,
+                    targetRect,
+                    theme,
+                    viewId
+                },
+                instanceId,
+                listenerId
+            }
+        });
+    }
+    setDisplayMode(displayMode) {
+    // not implemented
+    }
+    setRenderType(newRenderType) {
+    // not implemented
+    }
+    /**
+   * Send an action to an isolated ACE.
+   *
+   * @param action - {@link _IIsolatedAction}
+   */ sendAction(action) {
+        const { instanceId } = action;
+        this._sendMessage(this._getIsolatedFrame(instanceId), instanceId, {
+            serviceAction: 'Action',
+            action
+        });
+    }
+    /**
+   * Send an action to ACE onBeforeAction in an isolated domain.
+   *
+   * @param action - {@link _IIsolatedOnBeforeAction}
+   */ sendOnBeforeAction(action) {
+        const { instanceId } = action;
+        this._sendMessage(this._getIsolatedFrame(instanceId), instanceId, {
+            serviceAction: 'OnBeforeAction',
+            action
+        });
+    }
+    sendInitialize(args) {
+        const { instanceId, manifestId } = args;
+        this._sendMessage(this._getIsolatedFrame(instanceId), instanceId, {
+            serviceAction: 'Initialize',
+            instanceId,
+            manifestId
+        });
+    }
+    updateACEData(instanceId, aceData) {
+        if (this._isolatedListeners.has(instanceId)) {
+            this._sendMessage(this._getIsolatedFrame(instanceId), instanceId, {
+                aceData,
+                instanceId,
+                serviceAction: 'UpdateACEData'
+            });
+        }
+    }
+    handleLocationRequest(instanceId, location, locationError) {
+        this._sendMessage(this._getIsolatedFrame(instanceId), instanceId, {
+            location,
+            locationError,
+            instanceId,
+            serviceAction: 'LocationResponse'
+        });
+    }
+    _createLoadMonitor() {
+        return new _QosMonitor('IsolatedAdaptiveCardExtensionService.load');
+    }
+    _createRetryMonitor() {
+        return new _QosMonitor('IsolatedAdaptiveCardExtension.iframeReload');
+    }
+    _createTokenRequestMonitor() {
+        return new _QosMonitor('IsolatedAdaptiveCardExtensionService.onTokenRequested');
+    }
+    _createGetAuthTokenMonitor() {
+        return new _QosMonitor('IsolatedAdaptiveCardExtensionService._getAuthToken');
+    }
+    _configureDestUrlParams(loadArgs) {
+        const { dashboardListId, itemId } = loadArgs;
+        const destUrlParams = new URLSearchParams(window.location.search);
+        destUrlParams.append('dashboardListID', dashboardListId);
+        destUrlParams.append('id', itemId);
+        if (_SPPerfExperiment.getVariantAndTrackExperiment(_PerformanceExperiment.WEXOOPIF) === 1) {
+            destUrlParams.append('OOPIF', '1');
+        }
+        destUrlParams.append('deviceContext', _BrowserUtilities.isTeams1PVivaDesktopHosted() ? 'TeamsDesktop' : 'WebView');
+        destUrlParams.append('parentWindowOrigin', window.location.origin);
+        return destUrlParams;
+    }
+    _configureIframeSrc(isolatedDomain, loadArgs) {
+        const isolatedUrlBase = _ensureIsolatedDomainUrl(isolatedDomain, this._pageContext.web.absoluteUrl);
+        const destUrlParams = this._configureDestUrlParams(loadArgs);
+        const { serviceDestinationEndpoint } = loadArgs;
+        const layoutPage = !isTargetBotDriveAceAspxKSActivated() && serviceDestinationEndpoint !== undefined ? serviceDestinationEndpoint : 'adaptivecardextensions.aspx';
+        const destUrl = `/_layouts/15/${layoutPage}?${destUrlParams.toString()}`;
+        if (_BrowserUtilities.isUsingSecureBroker()) {
+            return `${isolatedUrlBase}/_layouts/15/brokerlogon.aspx?spfx=true&${_BROKER_IN_USE_KEY}=true&dest=${encodeURIComponent(isolatedUrlBase + destUrl)}`;
+        } else {
+            return isolatedUrlBase + destUrl;
+        }
+    }
+    _createIsolatedListenerEntry(isolatedDomain, iframe, args) {
+        const { listenerId, callback, manifestId } = args;
+        return {
+            isolatedDomain,
+            iframe: iframe,
+            listeners: new Map([
+                [
+                    listenerId,
+                    {
+                        callback
+                    }
+                ]
+            ]),
+            manifestId
+        };
+    }
+    _handleRenderingFromPersistedData(args) {
+    // not implemented
+    }
+    /**
+   * @internal
+   * @param instanceId - string
+   * @returns IIsolatedFrame instance
+   */ _getIsolatedFrame(instanceId) {
+        const entry = this._isolatedListeners.get(instanceId);
+        return entry ? this._isolatedFrames.get(entry.isolatedDomain) : undefined;
+    }
+    _sendMessage(isolatedFrame, instanceId, message) {
+        if (isolatedFrame) {
+            this._postOrQueueMessage(isolatedFrame, message, instanceId);
+        } else {
+            this._logError(`No entry for ${instanceId}`);
+        }
+    }
+    /**
+   * Notify listeners of a change with the ACE;
+   *
+   * @param instanceId - ACE instance.
+   * @param args - {@link _IsolatedServiceCallbackParameters}
+   * @param listenerId - Optional. If provided, only invoke the callback for this listener.
+   */ _invokeCallback(instanceId, args, listenerId) {
+        const entry = this._isolatedListeners.get(instanceId);
+        this._callbackCache.set(instanceId, args);
+        if (entry) {
+            if (listenerId) {
+                entry.listeners.get(listenerId)?.callback(args);
+            } else {
+                entry.listeners.forEach((listener)=>listener.callback(args));
+            }
+        } else {
+            this._logError(`No entry for ${instanceId}`);
+        }
+    }
+    /**
+   * Trace log an error.
+   *
+   * @param errorMessage - Message to create a new `Error` object.
+   */ _logError(errorMessage) {
+        _TraceLogger.logError(IsolatedAdaptiveCardExtensionService._logSource, new Error(errorMessage));
+    }
+    _getAuthToken(applicationId, claims, origin) {
+        const qosMonitor = this._createGetAuthTokenMonitor();
+        const configurableTokenProvider = _AadTokenProviders.configurable;
+        if (!configurableTokenProvider._oboThirdPartyTokenCallback) {
+            qosMonitor.writeUnexpectedFailure('oboThirdPartTokenCallbackUndefined');
+            this._logError('Unexpected message: oboThirdPartyTokenCallback is not defined.');
+            return;
+        }
+        configurableTokenProvider._oboThirdPartyTokenCallback(applicationId, claims).then((token)=>{
+            const originURL = new URL(origin);
+            const isolatedFrame = this._isolatedFrames.get(originURL.hostname);
+            this._sendMessage(isolatedFrame, '', {
+                token,
+                applicationId,
+                serviceAction: 'OBOToken'
+            });
+            qosMonitor.writeSuccess();
+        }).catch((err)=>{
+            qosMonitor.writeUnexpectedFailure('oboThirdPartTokenCallbackFailure');
+            this._logError(`Unexpected message: ${JSON.stringify(err)}`);
+        });
+    }
+    _postOrQueueMessage(isolatedFrame, message, instanceId) {
+        if (isolatedFrame.isReady) {
+            message.messageType = 'serviceMessage';
+            isolatedFrame.iframe.contentWindow.postMessage(message, '*');
+        } else {
+            isolatedFrame.messageQueue.push([
+                instanceId,
+                message
+            ]);
+        }
+    }
+    constructor(serviceScope){
+        this._callbackCache = new Map();
+        this._isolatedFrames = new Map();
+        this._isolatedListeners = new Map();
+        this._handleIframeTimeout = (isolatedFrameKey, isVCD1P)=>{
+            const frame = this._isolatedFrames.get(isolatedFrameKey);
+            const { frameMonitor, retryMonitor, tokenMonitor } = frame;
+            /*
+     * There is a rare case the iframe is running into a "reset connection" error. This is because the
+     * client/server is unable to communicate for an unknown reason. When we run into this, we will attempt to refresh the iframe once.
+     */ if (frame.retryCount < 1) {
+                frame.retryCount += 1;
+                frame.retryMonitor = this._createRetryMonitor();
+                // Use a shorter interval for the retry, this would put the retry around ~P95
+                frame.timeoutId = setTimeout(()=>this._handleIframeTimeout(isolatedFrameKey, isVCD1P), TIMEOUT_INTERVAL - 500);
+                return;
+            } else if (retryMonitor) {
+                retryMonitor.writeUnexpectedFailure('reloadFailed');
+            }
+            /*
+     * If this timeout has been executed then the isolated ACE application
+     * did not send the `Ready` message to the host applicaton. By checking if
+     * the `tokenMonitor` exists we can verify whether framedteamslogon even requested
+     * a token. If it doesn't exist, then we assume we are stuck in the MSAL interactive flow.
+     * This would be unexpected in Teams but is a known issue in browsers with ITP or 3P
+     * cookies blocked.
+     */ if (frameMonitor && !frameMonitor.hasEnded) {
+                try {
+                    if (tokenMonitor) {
+                        frameMonitor.writeUnexpectedFailure('tokenTimeout');
+                        if (!tokenMonitor.hasEnded) {
+                            tokenMonitor.writeUnexpectedFailure('timeout');
+                        }
+                    } else {
+                        if (isVCD1P) {
+                            // We should never hit this, but adding for completeness
+                            frameMonitor.writeUnexpectedFailure('authorizeTimeout');
+                        } else {
+                            frameMonitor.writeExpectedFailure('authorizeTimeout');
+                        }
+                    }
+                } catch (e) {
+                    frameMonitor.writeUnexpectedFailure('unexpectedFailure', e);
+                }
+            }
+        };
+        /**
+   * Message handler for isolated domain iframes.
+   *
+   * @param message - {@link _IsolatedAdaptiveCardExtensionApplicationMessageEvent}
+   */ this._handleIsolatedApplicationMessage = (message)=>{
+            const { data } = message;
+            if (data.messageType === 'applicationMessage') {
+                const { instanceId, kind } = data;
+                switch(kind){
+                    case 'Card':
+                        this._invokeCallback(instanceId, {
+                            aceData: data.aceData,
+                            card: data.card,
+                            cacheObject: data.cacheObject,
+                            type: kind
+                        });
+                        break;
+                    case 'CloseQuickView':
+                        const qvFrame = this._isolatedFrames.get(new URL(message.origin).hostname);
+                        if (qvFrame) {
+                            qvFrame.iframe.hidden = true;
+                        }
+                        break;
+                    case 'Error':
+                        this._invokeCallback(instanceId, {
+                            error: data.error,
+                            type: kind
+                        });
+                        break;
+                    case 'OpenQuickView':
+                        const frame = this._isolatedFrames.get(new URL(message.origin).hostname);
+                        if (frame) {
+                            frame.iframe.hidden = false;
+                        }
+                        break;
+                    case 'OpenUrl':
+                        this._invokeCallback(instanceId, {
+                            type: kind,
+                            url: data.url
+                        });
+                        break;
+                    case 'LocationRequest':
+                        this._invokeCallback(instanceId, {
+                            type: kind
+                        });
+                        break;
+                    case 'RenderCompleted':
+                        this._invokeCallback(instanceId, {
+                            type: kind,
+                            didUpdate: data.didUpdate
+                        });
+                        break;
+                    case 'Ready':
+                        /*
+           * Once we get this message from the isolated ACE application, we know it has been loaded
+           * and we can start sending messages to the isolated frame.
+           */ const isolatedFrame = this._isolatedFrames.get(new URL(message.origin).hostname);
+                        if (isolatedFrame) {
+                            if (isolatedFrame.retryMonitor) {
+                                isolatedFrame.retryMonitor.writeSuccess();
+                            }
+                            clearTimeout(isolatedFrame.timeoutId);
+                            isolatedFrame.frameMonitor.writeSuccess();
+                            isolatedFrame.isReady = true;
+                            for (const [id, msg] of isolatedFrame.messageQueue){
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                this._sendMessage(this._getIsolatedFrame(id), id, msg);
+                            }
+                            isolatedFrame.messageQueue = [];
+                        }
+                        break;
+                    case 'OBOTokenRequest':
+                        const { applicationId, claims } = data;
+                        this._getAuthToken(applicationId, claims, message.origin);
+                        break;
+                    case 'PropertyPaneConfiguration':
+                        this._invokeCallback(instanceId, {
+                            propertyPaneConfiguration: data.propertyPaneConfiguration,
+                            type: kind
+                        });
+                        break;
+                    default:
+                        this._logError(`Unexpected message: ${JSON.stringify(message.data)}`);
+                        break;
+                }
+            } else if (data.messageType === 'bridgeMessage' && data.bridgeAction === 'onTokenRequested') {
+                /*
+       * When we load in Teams, we use framedteamslogon to ensure the isolated app iframe has a valid cookie.
+       * If it doesn't then framedteamslogon will request a token from the host app to use to call the
+       * /Authenticate API, which will set a new session cookie on the iframe and then redirect to the isolated
+       * ACE applicaton.
+       */ const monitor = this._createTokenRequestMonitor();
+                const { applicationId, claims } = data;
+                const isolatedFrame = this._isolatedFrames.get(new URL(message.origin).hostname);
+                if (!isolatedFrame) {
+                    monitor.writeUnexpectedFailure('missingIsolatedFrame');
+                    return;
+                }
+                isolatedFrame.tokenMonitor = monitor;
+                const configurableTokenProvider = _AadTokenProviders.configurable;
+                if (!configurableTokenProvider._oboThirdPartyTokenCallback) {
+                    monitor.writeUnexpectedFailure('missingThirdPartyTokenCallback');
+                    return;
+                }
+                try {
+                    configurableTokenProvider._oboThirdPartyTokenCallback(applicationId, claims).then((token)=>{
+                        if (!isolatedFrame.iframe.contentWindow) {
+                            throw new Error('missingContentWindow');
+                        }
+                        isolatedFrame.iframe.contentWindow.postMessage({
+                            token,
+                            messageType: 'dashboardMessage',
+                            kind: 'Token'
+                        }, '*');
+                        monitor.writeSuccess();
+                    }).catch((e)=>{
+                        monitor.writeUnexpectedFailure('oboThirdPartyTokenCallbackError', e);
+                    });
+                } catch (e) {
+                    /*
+         * This is to account for an exception when calling the `_oboThirdPartyTokenCallback`.
+         * We've seen in the past where it unexpectedly returned `undefined` causing the Promise
+         * chain to never be executed.
+         */ monitor.writeUnexpectedFailure('unexpectedException', e);
+                }
+            }
+        };
+        this._serviceScope = serviceScope;
+        window.addEventListener('message', this._handleIsolatedApplicationMessage);
+    }
+}
+IsolatedAdaptiveCardExtensionService.serviceKey = ServiceKey.create('sp-adaptive-card-extension-base::IsolatedAdaptiveCardExtensionService', IsolatedAdaptiveCardExtensionService);
+IsolatedAdaptiveCardExtensionService._logSource = {
+    id: 'IsolatedAdaptiveCardExtensionService'
+};
+
+//# sourceMappingURL=./IsolatedAdaptiveCardExtensionService.js.map