X-Frame-Options set to Deny when using loginPopup - MSAL Login within iframed Web App

[ianaguilar]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

4.23.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

none

Public or Confidential Client?

Public

Description

MSAL on an iframed web app.

before windows update: the msalInstance.loginpopup works perfectly when called inside an iframed webapp. The pop up shows perfectly fine(chrome & edge), authenticates the user upon entering the OTP sent to Mobile Authenticator and displays no error on the webapp.

However, upon updating the windows version to Windows 11 Enterprise 24H2 - the msalInstance.loginPopup suddenly wont work anymore on edge but works perfectly on chrome.. When trying to authenticate,. the browser console shows "Refused to display https://login.microsoftonline.com/ in a frame becuase it set 'x-frame-option' to deny"

Error Message

Refused to display https://login.microsoftonline.com/ in a frame becuase it set 'x-frame-option' to deny

MSAL Logs

No response

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

{ 
auth: {
        clientId: config_clientId,
        authority: config_authority,
        redirectUri: config_redirectUri,
    },
    cache: {
        cacheLocation: "sessionStorage", 
        storeAuthStateInCookie: false
    }
}

Relevant Code Snippets

useEffect(() => {
    msalInstance
      .handleRedirectPromise()
      .then(() => {
        const account = msalInstance.getAllAccounts()[0];
        if (!account) {
          msalInstance
            .loginPopup(loginRequest)
            .then((loginResponse) => {
              setUserEmailAdd(loginResponse.account.username);
              setAuthenticated(true);
            })
            .catch((error) => {
            });
        } else {
          setUserEmailAdd(account.username);
          setAuthenticated(true);
        }
      })
      .catch((error) => {
      });
  }, []);

Reproduction Steps

1. User opens the web app.
2. User authenticates using the msalInstance.loginPopup

Expected Behavior

User should be able to authenticated upon entering the OTP on his mobile authenticator with the otp displayed on the loginPopup

Identity Provider

Entra ID (formerly Azure AD) / MSA

Browsers Affected (Select all that apply)

Edge

Regression

No response