@azure/msal-browser 5.16.0 → 5.17.1

package/src/config/Configuration.ts

@@ -67,6 +67,23 @@ export type BrowserAuthOptions = {
      */
     postLogoutRedirectUri?: string | null;
 
+    /**
+     * URI of a first-party, top-level "popup-relay" page used to acquire tokens
+     * interactively from inside a cross-origin iframe that an untrusted host has
+     * embedded (where third-party storage partitioning and COOP break the normal
+     * popup flow). When set, `acquireTokenPopup` opens this page top-level
+     * instead of navigating the popup straight to the IdP, and the page must call
+     * `runPopupRelay()`. Resolved relative to the app origin, so it must be
+     * same-origin as the embedded frame.
+     *
+     * This is a browser SPA-only mechanism (`PublicClientApplication` in
+     * `@azure/msal-browser`): it brokers the standard interactive popup
+     * auth-code flow through a same-origin page. It does not apply to native
+     * app, platform broker (WAM), Nested App Auth, or confidential-client /
+     * server-side scenarios.
+     */
+    popupRelayUri?: string;
+
     /**
      * Array of capabilities which will be added to the claims.access_token.xms_cc request property on every network request.
      */
@@ -271,6 +288,7 @@ export function buildConfiguration(
                 ? window.location.href.split("?")[0].split("#")[0]
                 : "",
         postLogoutRedirectUri: "",
+        popupRelayUri: "",
         clientCapabilities: [],
         OIDCOptions: {
             responseMode: Constants.ResponseMode.FRAGMENT,

package/src/crypto/BrowserCrypto.ts

@@ -25,6 +25,14 @@ const AES_GCM = "AES-GCM";
 const HKDF = "HKDF";
 // SHA-256 hashing algorithm
 const S256_HASH_ALG = "SHA-256";
+// JWK values used by browser-internal WebCrypto helpers.
+const JSON_WEB_KEY_CURVE_P256 = "P-256";
+const JSON_WEB_KEY_TYPE_EC = "EC";
+const JSON_WEB_KEY_TYPE_RSA = "RSA";
+const MISSING_JWK_KTY_SUBERROR = "missing_jwk_kty";
+const UNSUPPORTED_JWK_KTY_SUBERROR = "unsupported_jwk_kty";
+const MISSING_JWK_MEMBER_SUBERROR = "missing_jwk_member";
+const EMPTY_JWK_MEMBER_SUBERROR = "empty_jwk_member";
 // MOD length for PoP tokens
 const MODULUS_LENGTH = 2048;
 // Public Exponent
@@ -44,13 +52,27 @@ const DERIVE_KEY = "deriveKey";
 // Suberror
 const SUBTLE_SUBERROR = "crypto_subtle_undefined";
 
-const keygenAlgorithmOptions: RsaHashedKeyGenParams = {
+export const RSA_KEYGEN_ALGORITHM_OPTIONS: RsaHashedKeyGenParams = {
     name: PKCS1_V15_KEYGEN_ALG,
     hash: S256_HASH_ALG,
     modulusLength: MODULUS_LENGTH,
     publicExponent: PUBLIC_EXPONENT,
 };
 
+export const RSA_SIGN_ALGORITHM_OPTIONS: Algorithm = {
+    name: PKCS1_V15_KEYGEN_ALG,
+};
+
+export const ECDSA_P256_KEYGEN_ALGORITHM_OPTIONS: EcKeyGenParams = {
+    name: "ECDSA",
+    namedCurve: JSON_WEB_KEY_CURVE_P256,
+};
+
+export const ECDSA_SHA256_SIGN_ALGORITHM_OPTIONS: EcdsaParams = {
+    name: "ECDSA",
+    hash: { name: S256_HASH_ALG },
+};
+
 /**
  * Check whether browser crypto is available.
  */
@@ -157,16 +179,18 @@ export function createNewGuid(): string {
 }
 
 /**
- * Generates a keypair based on current keygen algorithm config.
+ * Generates a keypair based on the provided algorithm config.
  * @param extractable
  * @param usages
+ * @param algorithm
  */
 export async function generateKeyPair(
     extractable: boolean,
-    usages: Array<KeyUsage>
+    usages: Array<KeyUsage>,
+    algorithm: AlgorithmIdentifier
 ): Promise<CryptoKeyPair> {
     return window.crypto.subtle.generateKey(
-        keygenAlgorithmOptions,
+        algorithm,
         extractable,
         usages
     ) as Promise<CryptoKeyPair>;
@@ -188,32 +212,36 @@ export async function exportJwk(key: CryptoKey): Promise<JsonWebKey> {
  * @param key
  * @param extractable
  * @param usages
+ * @param algorithm
  */
 export async function importJwk(
     key: JsonWebKey,
     extractable: boolean,
-    usages: Array<KeyUsage>
+    usages: Array<KeyUsage>,
+    algorithm: AlgorithmIdentifier
 ): Promise<CryptoKey> {
     return window.crypto.subtle.importKey(
         KEY_FORMAT_JWK,
         key,
-        keygenAlgorithmOptions,
+        algorithm,
         extractable,
         usages
     ) as Promise<CryptoKey>;
 }
 
 /**
- * Signs given data with given key
+ * Signs given data with given key.
  * @param key
  * @param data
+ * @param algorithm
  */
 export async function sign(
     key: CryptoKey,
-    data: ArrayBuffer
+    data: ArrayBuffer,
+    algorithm: AlgorithmIdentifier
 ): Promise<ArrayBuffer> {
     return window.crypto.subtle.sign(
-        keygenAlgorithmOptions,
+        algorithm,
         key,
         data
     ) as Promise<ArrayBuffer>;
@@ -428,3 +456,70 @@ export async function hashString(plainText: string): Promise<string> {
     const hashBytes = new Uint8Array(hashBuffer);
     return urlEncodeArr(hashBytes);
 }
+
+const JWK_THUMBPRINT_REQUIRED_MEMBERS: Record<string, Array<string>> = {
+    [JSON_WEB_KEY_TYPE_EC]: ["crv", "kty", "x", "y"],
+    [JSON_WEB_KEY_TYPE_RSA]: ["e", "kty", "n"],
+};
+
+function getJwkThumbprintMembers(
+    publicJwk: JsonWebKey
+): Record<string, string> {
+    const kty = publicJwk.kty;
+    if (typeof kty !== "string" || kty.length === 0) {
+        throw createBrowserAuthError(
+            BrowserAuthErrorCodes.invalidPublicJwk,
+            "",
+            MISSING_JWK_KTY_SUBERROR
+        );
+    }
+
+    const requiredMembers = JWK_THUMBPRINT_REQUIRED_MEMBERS[kty];
+    if (!requiredMembers) {
+        throw createBrowserAuthError(
+            BrowserAuthErrorCodes.invalidPublicJwk,
+            "",
+            UNSUPPORTED_JWK_KTY_SUBERROR
+        );
+    }
+
+    return requiredMembers.reduce((thumbprintMembers, memberName) => {
+        const memberValue = publicJwk[memberName as keyof JsonWebKey];
+        if (typeof memberValue !== "string") {
+            throw createBrowserAuthError(
+                BrowserAuthErrorCodes.invalidPublicJwk,
+                "",
+                MISSING_JWK_MEMBER_SUBERROR
+            );
+        }
+
+        if (memberValue.length === 0) {
+            throw createBrowserAuthError(
+                BrowserAuthErrorCodes.invalidPublicJwk,
+                "",
+                EMPTY_JWK_MEMBER_SUBERROR
+            );
+        }
+
+        thumbprintMembers[memberName] = memberValue;
+        return thumbprintMembers;
+    }, {} as Record<string, string>);
+}
+
+/**
+ * Computes an RFC 7638 JWK thumbprint for a public key.
+ * The required members for the JWK key type are serialised in lexicographic order
+ * and the SHA-256 digest is returned as a base64url string.
+ * @internal
+ */
+export async function computeJwkThumbprint(
+    publicJwk: JsonWebKey
+): Promise<string> {
+    const thumbprintMembers = getJwkThumbprintMembers(publicJwk);
+    // RFC 7638 §3.3: use only required members, sorted lexicographically
+    const thumbprintJson = JSON.stringify(
+        thumbprintMembers,
+        Object.keys(thumbprintMembers).sort()
+    );
+    return hashString(thumbprintJson);
+}

package/src/crypto/CryptoOps.ts

@@ -123,7 +123,8 @@ export class CryptoOps implements ICrypto {
         // Generate Keypair
         const keyPair: CryptoKeyPair = await BrowserCrypto.generateKeyPair(
             CryptoOps.EXTRACTABLE,
-            CryptoOps.POP_KEY_USAGES
+            CryptoOps.POP_KEY_USAGES,
+            BrowserCrypto.RSA_KEYGEN_ALGORITHM_OPTIONS
         );
 
         // Generate Thumbprint for Public Key
@@ -131,15 +132,9 @@ export class CryptoOps implements ICrypto {
             keyPair.publicKey
         );
 
-        const pubKeyThumprintObj: JsonWebKey = {
-            e: publicKeyJwk.e,
-            kty: publicKeyJwk.kty,
-            n: publicKeyJwk.n,
-        };
-
-        const publicJwkString: string =
-            getSortedObjectString(pubKeyThumprintObj);
-        const publicJwkHash = await this.hashString(publicJwkString);
+        const publicJwkHash = await BrowserCrypto.computeJwkThumbprint(
+            publicKeyJwk
+        );
 
         // Generate Thumbprint for Private Key
         const privateKeyJwk: JsonWebKey = await BrowserCrypto.exportJwk(
@@ -147,7 +142,12 @@ export class CryptoOps implements ICrypto {
         );
         // Re-import private key to make it unextractable
         const unextractablePrivateKey: CryptoKey =
-            await BrowserCrypto.importJwk(privateKeyJwk, false, ["sign"]);
+            await BrowserCrypto.importJwk(
+                privateKeyJwk,
+                false,
+                ["sign"],
+                BrowserCrypto.RSA_KEYGEN_ALGORITHM_OPTIONS
+            );
 
         // Store Keypair data in keystore
         await this.cache.setItem(
@@ -278,7 +278,8 @@ export class CryptoOps implements ICrypto {
         const tokenBuffer = encoder.encode(tokenString);
         const signatureBuffer = await BrowserCrypto.sign(
             cachedKeyPair.privateKey,
-            tokenBuffer
+            tokenBuffer,
+            BrowserCrypto.RSA_SIGN_ALGORITHM_OPTIONS
         );
         const encodedSignature = urlEncodeArr(new Uint8Array(signatureBuffer));
 

package/src/error/BrowserAuthErrorCodes.ts

@@ -24,6 +24,7 @@ export const redirectBridgeEmptyResponse = "redirect_bridge_empty_response";
 export const redirectInIframe = "redirect_in_iframe";
 export const blockIframeReload = "block_iframe_reload";
 export const blockNestedPopups = "block_nested_popups";
+export const popupRelayUnsupportedFlow = "popup_relay_unsupported_flow";
 export const iframeClosedPrematurely = "iframe_closed_prematurely";
 export const silentLogoutUnsupported = "silent_logout_unsupported";
 export const noAccountError = "no_account_error";
@@ -41,6 +42,7 @@ export const getRequestFailed = "get_request_failed";
 export const failedToParseResponse = "failed_to_parse_response";
 export const unableToLoadToken = "unable_to_load_token";
 export const cryptoKeyNotFound = "crypto_key_not_found";
+export const invalidPublicJwk = "invalid_public_jwk";
 export const authCodeRequired = "auth_code_required";
 export const authCodeOrNativeAccountIdRequired =
     "auth_code_or_nativeAccountId_required";

package/src/interaction_client/PopupClient.ts

@@ -19,6 +19,7 @@ import {
     PkceCodes,
     CommonAuthorizationUrlRequest,
     ProtocolUtils,
+    Authority,
 } from "@azure/msal-common/browser";
 import {
     initializeAuthorizationRequest,
@@ -34,6 +35,8 @@ import {
 import { EndSessionPopupRequest } from "../request/EndSessionPopupRequest.js";
 import { NavigationOptions } from "../navigation/NavigationOptions.js";
 import * as BrowserUtils from "../utils/BrowserUtils.js";
+import * as PopupRelay from "../popup_relay/relayClient.js";
+import { base64Decode } from "../encode/Base64Decode.js";
 import { PopupRequest } from "../request/PopupRequest.js";
 import {
     createBrowserAuthError,
@@ -375,9 +378,26 @@ export class PopupClient extends StandardInteractionClient {
                     this.performanceClient
                 );
 
+                /*
+                 * When a popup-relay page is configured, open it top-level
+                 * (same first-party origin) instead of navigating the popup
+                 * straight to the IdP, and carry the /authorize URL in its hash.
+                 * The relay page opens the IdP child popup and relays the
+                 * response back via postMessage (see waitForPopupResponse).
+                 */
+                const popupRelayUri = this.config.auth.popupRelayUri;
+                const popupNavigateUrl = popupRelayUri
+                    ? PopupRelay.buildPopupRelayUrl(
+                          popupRelayUri,
+                          this.getRelayStateId(request.state, correlationId),
+                          { method: "GET", url: navigateUrl },
+                          correlationId
+                      )
+                    : navigateUrl;
+
                 // Show the UI once the url has been created. Get the window handle for the popup.
                 const popupWindow: Window = this.initiateAuthRequest(
-                    navigateUrl,
+                    popupNavigateUrl,
                     popupParams
                 );
                 this.eventHandler.emitEvent(
@@ -497,18 +517,13 @@ export class PopupClient extends StandardInteractionClient {
             earJwk: earJwk,
             codeChallenge: pkce.challenge,
         };
-        const popupWindow =
-            popupParams.popup || this.openPopup("about:blank", popupParams);
-
-        const form = await Authorize.getEARForm(
-            popupWindow.document,
-            this.config,
-            discoveredAuthority,
+        const popupWindow = await this.openPostFormPopup(
             popupRequest,
-            this.logger,
-            this.performanceClient
+            discoveredAuthority,
+            popupParams,
+            correlationId,
+            true
         );
-        form.submit();
 
         // Monitor the popup for the hash. Return the string value and close the popup when the hash is received. Default timeout is 60 seconds.
         const responseString = await invokeAsync(
@@ -621,20 +636,14 @@ export class PopupClient extends StandardInteractionClient {
             this.logger
         );
 
-        const popupWindow =
-            popupParams.popup || this.openPopup("about:blank", popupParams);
-
-        const form = await Authorize.getCodeForm(
-            popupWindow.document,
-            this.config,
-            discoveredAuthority,
+        const popupWindow = await this.openPostFormPopup(
             request,
-            this.logger,
-            this.performanceClient
+            discoveredAuthority,
+            popupParams,
+            correlationId,
+            false
         );
 
-        form.submit();
-
         // Monitor the popup for the hash. Return the string value and close the popup when the hash is received. Default timeout is 60 seconds.
         const responseString = await invokeAsync(
             this.waitForPopupResponse.bind(this),
@@ -794,8 +803,30 @@ export class PopupClient extends StandardInteractionClient {
                 validRequest
             );
 
+            /*
+             * When a popup-relay page is configured, open it top-level (same
+             * first-party origin) and carry the end-session URL in its hash,
+             * exactly like the login flow. The relay page opens the IdP child
+             * popup and the post-logout redirect page (running the redirect
+             * bridge) relays completion back via postMessage — so logout works
+             * from an embedded, cross-origin iframe where a direct popup to the
+             * IdP cannot. See runPopupRelay / waitForPopupResponse.
+             */
+            const popupRelayUri = this.config.auth.popupRelayUri;
+            const popupNavigateUrl = popupRelayUri
+                ? PopupRelay.buildPopupRelayUrl(
+                      popupRelayUri,
+                      this.getRelayStateId(
+                          validRequest.state || "",
+                          this.correlationId
+                      ),
+                      { method: "GET", url: logoutUri },
+                      this.correlationId
+                  )
+                : logoutUri;
+
             // Open the popup window to requestUrl.
-            const popupWindow = this.openPopup(logoutUri, popupParams);
+            const popupWindow = this.openPopup(popupNavigateUrl, popupParams);
             this.eventHandler.emitEvent(
                 EventType.POPUP_OPENED,
                 validRequest.correlationId,
@@ -1074,11 +1105,94 @@ export class PopupClient extends StandardInteractionClient {
         return `${BrowserConstants.POPUP_NAME_PREFIX}.${this.config.auth.clientId}.${homeAccountId}.${this.correlationId}`;
     }
 
+    /**
+     * Decodes the per-request library-state id from the encoded request state.
+     */
+    private getRelayStateId(state: string, correlationId: string): string {
+        return ProtocolUtils.parseRequestState(
+            base64Decode,
+            state,
+            correlationId
+        ).libraryState.id;
+    }
+
+    /**
+     * Opens the interactive popup for a POST-form /authorize request. Shared by
+     * the auth-code POST and EAR flows, which are identical apart from the form
+     * builder (`isEAR` selects the EAR vs auth-code builders). When a
+     * popup-relay page is configured the form is carried to the relay page
+     * (which opens the IdP child popup); otherwise the form is submitted
+     * directly into the popup.
+     */
+    private async openPostFormPopup(
+        request: CommonAuthorizationUrlRequest,
+        discoveredAuthority: Authority,
+        popupParams: PopupParams,
+        correlationId: string,
+        isEAR: boolean
+    ): Promise<Window> {
+        const popupRelayUri = this.config.auth.popupRelayUri;
+        if (popupRelayUri) {
+            const getFormData = isEAR
+                ? Authorize.getEARFormData
+                : Authorize.getCodeFormData;
+            const formData = await getFormData(
+                this.config,
+                discoveredAuthority,
+                request,
+                this.logger,
+                this.performanceClient
+            );
+            const relayUrl = PopupRelay.buildPopupRelayUrl(
+                popupRelayUri,
+                this.getRelayStateId(request.state, correlationId),
+                {
+                    method: "POST",
+                    action: formData.action,
+                    fields: formData.fields,
+                },
+                correlationId
+            );
+            return this.initiateAuthRequest(relayUrl, popupParams);
+        }
+
+        const popupWindow =
+            popupParams.popup || this.openPopup("about:blank", popupParams);
+        const getForm = isEAR ? Authorize.getEARForm : Authorize.getCodeForm;
+        const form = await getForm(
+            popupWindow.document,
+            this.config,
+            discoveredAuthority,
+            request,
+            this.logger,
+            this.performanceClient
+        );
+        form.submit();
+        return popupWindow;
+    }
+
     protected async waitForPopupResponse(
         request: CommonAuthorizationUrlRequest | CommonEndSessionRequest,
         popupWindow: Window,
         popupWindowParent: Window
     ): Promise<string> {
+        /*
+         * When a popup-relay page is configured the response is relayed back to
+         * this frame by the relay page via postMessage, and the relay popup's
+         * lifecycle (including the user dismissing it before signing in) must be
+         * tracked here. This takes precedence over the default bridge response
+         * hook, whose BroadcastChannel cannot reach a partitioned cross-site
+         * frame and which does not track the relay popup.
+         */
+        if (this.config.auth.popupRelayUri) {
+            return PopupRelay.waitForPopupRelayResponse(
+                this.config.system.popupBridgeTimeout,
+                this.logger,
+                request,
+                popupWindow,
+                this.performanceClient
+            );
+        }
         if (this.waitForPopupResponseHook) {
             return this.waitForPopupResponseHook(
                 request,

package/src/packageMetadata.ts

@@ -1,3 +1,3 @@
 /* eslint-disable header/header */
 export const name = "@azure/msal-browser";
-export const version = "5.16.0";
+export const version = "5.17.1";

package/src/popup_relay/constants.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ */
+
+/**
+ * postMessage envelope type used to relay an auth response from a popup-relay
+ * page (see `runPopupRelay`) back to the embedded frame that opened it. See
+ * {@link BrowserAuthOptions.popupRelayUri}.
+ *
+ * Kept dependency-free so both the relay-page entry (`./index.js`) and the
+ * client-side helpers (`./relayClient.js`) can import it without either bundle
+ * pulling in the other's dependencies.
+ *
+ * @internal
+ */
+export const POPUP_RELAY_RESPONSE_TYPE = "msal:popup-relay-response:v1";