Make popup poll interval configurable

change/@azure-msal-browser-d8b66f6f-0c1a-488c-b774-bdbd6b7736cf.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Make popup poll interval configurable #5276",
+  "packageName": "@azure/msal-browser",
+  "email": "hemoral@microsoft.com",
+  "dependentChangeType": "patch"
+}

lib/msal-browser/docs/configuration.md

@@ -103,6 +103,7 @@ See [Caching in MSAL](./caching.md) for more.
 | `asyncPopups` | Sets whether popups are opened asynchronously. When set to false, blank popups are opened before anything else happens. When set to true, popups are opened when making the network request. Can be set to true for scenarios where `about:blank` is not supported, e.g. desktop apps or progressive web apps | boolean | `false` |
 | `allowRedirectInIframe` | By default, MSAL will not allow redirect operations to be initiated when the application is inside an iframe. Set this flag to `true` to remove this check. | boolean | `false` |
 | `cryptoOptions` | Config object for crypto operations in the browser. | See [below](#crypto-config-options.) | See [below](#crypto-config-options.) |
+| `pollIntervalMilliseconds` | Interval of time in milliseconds between polls of popup URL hash during authenticaiton. | integer (milliseconds) | `30` |
 
 #### Logger Config Options
 

lib/msal-browser/src/config/Configuration.ts

@@ -5,7 +5,7 @@
 
 import { SystemOptions, LoggerOptions, INetworkModule, DEFAULT_SYSTEM_OPTIONS, Constants, ProtocolMode, LogLevel, StubbedNetworkModule, AzureCloudInstance, AzureCloudOptions, ApplicationTelemetry } from "@azure/msal-common";
 import { BrowserUtils } from "../utils/BrowserUtils";
-import { BrowserCacheLocation } from "../utils/BrowserConstants";
+import { BrowserCacheLocation, BrowserConstants } from "../utils/BrowserConstants";
 import { INavigationClient } from "../navigation/INavigationClient";
 import { NavigationClient } from "../navigation/NavigationClient";
 
@@ -140,6 +140,10 @@ export type BrowserSystemOptions = SystemOptions & {
      * Options related to browser crypto APIs
      */
     cryptoOptions?: CryptoOptions;
+    /**
+     * Sets the interval length in milliseconds for polling the location attribute in popup windows (default is 30ms)
+     */
+    pollIntervalMilliseconds?: number;
 };
 
 export type CryptoOptions = {
@@ -259,6 +263,7 @@ export function buildConfiguration({ auth: userInputAuth, cache: userInputCache,
         allowRedirectInIframe: false,
         allowNativeBroker: false,
         nativeBrokerHandshakeTimeout: userInputSystem?.nativeBrokerHandshakeTimeout || DEFAULT_NATIVE_BROKER_HANDSHAKE_TIMEOUT_MS,
+        pollIntervalMilliseconds: BrowserConstants.DEFAULT_POLL_INTERVAL_MS,
         cryptoOptions: {
             useMsrCrypto: false,
             entropy: undefined

lib/msal-browser/src/interaction_client/PopupClient.ts

@@ -290,7 +290,7 @@ export class PopupClient extends StandardInteractionClient {
              * Polling for popups needs to be tick-based,
              * since a non-trivial amount of time can be spent on interaction (which should not count against the timeout).
              */
-            const maxTicks = this.config.system.windowHashTimeout / BrowserConstants.POLL_INTERVAL_MS;
+            const maxTicks = this.config.system.windowHashTimeout / this.config.system.pollIntervalMilliseconds;
             let ticks = 0;
 
             this.logger.verbose("PopupHandler.monitorPopupForHash - polling started");
@@ -348,7 +348,7 @@ export class PopupClient extends StandardInteractionClient {
                     clearInterval(intervalId);
                     reject(BrowserAuthError.createMonitorPopupTimeoutError());
                 }
-            }, BrowserConstants.POLL_INTERVAL_MS);
+            }, this.config.system.pollIntervalMilliseconds);
         });
     }
 
@@ -390,7 +390,7 @@ export class PopupClient extends StandardInteractionClient {
                 clearInterval(intervalId);
                 this.cleanPopup(popupWindow);
                 resolve();
-            }, BrowserConstants.POLL_INTERVAL_MS);
+            }, this.config.system.pollIntervalMilliseconds);
         });
     }
 

lib/msal-browser/src/interaction_client/SilentAuthCodeClient.ts

@@ -58,7 +58,7 @@ export class SilentAuthCodeClient extends StandardInteractionClient {
             this.logger.verbose("Auth code client created");
 
             // Create silent handler
-            const silentHandler = new SilentHandler(authClient, this.browserStorage, authCodeRequest, this.logger, this.config.system.navigateFrameWait);
+            const silentHandler = new SilentHandler(authClient, this.browserStorage, authCodeRequest, this.logger, this.config.system);
 
             // Handle auth code parameters from request
             return silentHandler.handleCodeResponseFromServer(

lib/msal-browser/src/interaction_client/SilentIframeClient.ts

@@ -107,7 +107,7 @@ export class SilentIframeClient extends StandardInteractionClient {
             nativeBroker: NativeMessageHandler.isNativeAvailable(this.config, this.logger, this.nativeMessageHandler, silentRequest.authenticationScheme)
         });
         // Create silent handler
-        const silentHandler = new SilentHandler(authClient, this.browserStorage, authCodeRequest, this.logger, this.config.system.navigateFrameWait);
+        const silentHandler = new SilentHandler(authClient, this.browserStorage, authCodeRequest, this.logger, this.config.system);
         // Get the frame handle for the silent request
         const msalFrame = await silentHandler.initiateAuthRequest(navigateUrl);
         // Monitor the window for the hash. Return the string value and close the popup when the hash is received. Default timeout is 60 seconds.

lib/msal-browser/src/interaction_handler/SilentHandler.ts

@@ -5,17 +5,19 @@
 
 import { UrlString, StringUtils, CommonAuthorizationCodeRequest, AuthorizationCodeClient, Constants, Logger } from "@azure/msal-common";
 import { InteractionHandler } from "./InteractionHandler";
-import { BrowserConstants } from "../utils/BrowserConstants";
 import { BrowserAuthError } from "../error/BrowserAuthError";
 import { BrowserCacheManager } from "../cache/BrowserCacheManager";
-import { DEFAULT_IFRAME_TIMEOUT_MS } from "../config/Configuration";
+import { BrowserSystemOptions, DEFAULT_IFRAME_TIMEOUT_MS } from "../config/Configuration";
 
 export class SilentHandler extends InteractionHandler {
 
     private navigateFrameWait: number;
-    constructor(authCodeModule: AuthorizationCodeClient, storageImpl: BrowserCacheManager, authCodeRequest: CommonAuthorizationCodeRequest, logger: Logger, navigateFrameWait: number) {
+    private pollIntervalMilliseconds: number;
+
+    constructor(authCodeModule: AuthorizationCodeClient, storageImpl: BrowserCacheManager, authCodeRequest: CommonAuthorizationCodeRequest, logger: Logger, systemOptions: Required<Pick<BrowserSystemOptions, "navigateFrameWait" | "pollIntervalMilliseconds">>) {
         super(authCodeModule, storageImpl, authCodeRequest, logger);
-        this.navigateFrameWait = navigateFrameWait;
+        this.navigateFrameWait = systemOptions.navigateFrameWait;
+        this.pollIntervalMilliseconds = systemOptions.pollIntervalMilliseconds;
     }
 
     /**
@@ -82,7 +84,7 @@ export class SilentHandler extends InteractionHandler {
                     resolve(contentHash);
                     return;
                 }
-            }, BrowserConstants.POLL_INTERVAL_MS);
+            }, this.pollIntervalMilliseconds);
         });
     }
 

lib/msal-browser/src/utils/BrowserConstants.ts

@@ -34,7 +34,7 @@ export const BrowserConstants = {
     /**
      * Default popup monitor poll interval in milliseconds
      */
-    POLL_INTERVAL_MS: 50,
+    DEFAULT_POLL_INTERVAL_MS: 30,
     /**
      * Msal-browser SKU
      */

lib/msal-browser/test/interaction_handler/SilentHandler.spec.ts

@@ -15,6 +15,7 @@ import { TestStorageManager } from "../cache/TestStorageManager";
 import { BrowserCacheManager } from "../../src/cache/BrowserCacheManager";
 
 const DEFAULT_IFRAME_TIMEOUT_MS = 6000;
+const DEFAULT_POLL_INTERVAL_MS = 30;
 
 const testPkceCodes = {
     challenge: "TestChallenge",
@@ -128,7 +129,7 @@ describe("SilentHandler.ts Unit Tests", () => {
     describe("Constructor", () => {
 
         it("creates a subclass of InteractionHandler called SilentHandler", () => {
-            const silentHandler = new SilentHandler(authCodeModule, browserStorage, defaultTokenRequest, browserRequestLogger, DEFAULT_IFRAME_TIMEOUT_MS);
+            const silentHandler = new SilentHandler(authCodeModule, browserStorage, defaultTokenRequest, browserRequestLogger, { navigateFrameWait: DEFAULT_IFRAME_TIMEOUT_MS, pollIntervalMilliseconds: DEFAULT_POLL_INTERVAL_MS });
             expect(silentHandler instanceof SilentHandler).toBe(true);
             expect(silentHandler instanceof InteractionHandler).toBe(true);
         });
@@ -137,22 +138,22 @@ describe("SilentHandler.ts Unit Tests", () => {
     describe("initiateAuthRequest()", () => {
 
         it("throws error if requestUrl is empty", async () => {
-            const silentHandler = new SilentHandler(authCodeModule, browserStorage, defaultTokenRequest, browserRequestLogger, DEFAULT_IFRAME_TIMEOUT_MS);
+            const silentHandler = new SilentHandler(authCodeModule, browserStorage, defaultTokenRequest, browserRequestLogger, { navigateFrameWait: DEFAULT_IFRAME_TIMEOUT_MS, pollIntervalMilliseconds: DEFAULT_POLL_INTERVAL_MS });
             await expect(silentHandler.initiateAuthRequest("")).rejects.toMatchObject(BrowserAuthError.createEmptyNavigationUriError());
             //@ts-ignore
             await expect(silentHandler.initiateAuthRequest(null)).rejects.toMatchObject(BrowserAuthError.createEmptyNavigationUriError());
         });
 
         it("Creates a frame asynchronously when created with default timeout", async () => {
-            const silentHandler = new SilentHandler(authCodeModule, browserStorage, defaultTokenRequest, browserRequestLogger, DEFAULT_IFRAME_TIMEOUT_MS);
+            const silentHandler = new SilentHandler(authCodeModule, browserStorage, defaultTokenRequest, browserRequestLogger, { navigateFrameWait: DEFAULT_IFRAME_TIMEOUT_MS, pollIntervalMilliseconds: DEFAULT_POLL_INTERVAL_MS });
             const loadFrameSpy = sinon.spy(silentHandler, <any>"loadFrame");
             const authFrame = await silentHandler.initiateAuthRequest(testNavUrl);
             expect(loadFrameSpy.called).toBe(true);
             expect(authFrame instanceof HTMLIFrameElement).toBe(true);
         }, DEFAULT_IFRAME_TIMEOUT_MS + 1000);
 
         it("Creates a frame synchronously when created with a timeout of 0", async () => {
-            const silentHandler = new SilentHandler(authCodeModule, browserStorage, defaultTokenRequest, browserRequestLogger, 0);
+            const silentHandler = new SilentHandler(authCodeModule, browserStorage, defaultTokenRequest, browserRequestLogger, { navigateFrameWait: 0, pollIntervalMilliseconds: DEFAULT_POLL_INTERVAL_MS } );
             const loadFrameSyncSpy = sinon.spy(silentHandler, <any>"loadFrameSync");
             const loadFrameSpy = sinon.spy(silentHandler, <any>"loadFrame");
             const authFrame = await silentHandler.initiateAuthRequest(testNavUrl);
@@ -171,7 +172,7 @@ describe("SilentHandler.ts Unit Tests", () => {
                 }
             };
 
-            const silentHandler = new SilentHandler(authCodeModule, browserStorage, defaultTokenRequest, browserRequestLogger, DEFAULT_IFRAME_TIMEOUT_MS);
+            const silentHandler = new SilentHandler(authCodeModule, browserStorage, defaultTokenRequest, browserRequestLogger, { navigateFrameWait: DEFAULT_IFRAME_TIMEOUT_MS, pollIntervalMilliseconds: DEFAULT_POLL_INTERVAL_MS });
             // @ts-ignore
             silentHandler.monitorIframeForHash(iframe, 500)
                 .catch(() => {
@@ -191,7 +192,7 @@ describe("SilentHandler.ts Unit Tests", () => {
                 }
             };
 
-            const silentHandler = new SilentHandler(authCodeModule, browserStorage, defaultTokenRequest, browserRequestLogger, DEFAULT_IFRAME_TIMEOUT_MS);
+            const silentHandler = new SilentHandler(authCodeModule, browserStorage, defaultTokenRequest, browserRequestLogger, { navigateFrameWait: DEFAULT_IFRAME_TIMEOUT_MS, pollIntervalMilliseconds: DEFAULT_POLL_INTERVAL_MS });
             // @ts-ignore
             silentHandler.monitorIframeForHash(iframe, 2000)
                 .catch(() => {
@@ -227,7 +228,7 @@ describe("SilentHandler.ts Unit Tests", () => {
                 }
             };
 
-            const silentHandler = new SilentHandler(authCodeModule, browserStorage, defaultTokenRequest, browserRequestLogger, DEFAULT_IFRAME_TIMEOUT_MS);
+            const silentHandler = new SilentHandler(authCodeModule, browserStorage, defaultTokenRequest, browserRequestLogger, { navigateFrameWait: DEFAULT_IFRAME_TIMEOUT_MS, pollIntervalMilliseconds: DEFAULT_POLL_INTERVAL_MS });
             // @ts-ignore
             silentHandler.monitorIframeForHash(iframe, 1000)
                 .then((hash: string) => {