msal-browser's allowRedirectInIframe doesn't work for B2C

[Zazo032]

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.37.0

Wrapper Library

Not Applicable

Wrapper Library Version

None

Public or Confidential Client?

Public

Description

We're using a loginRedirect flow in our Flutter Web application, using this plugin: https://pub.dev/packages/aad_oauth

However, we have a specific use case where our Flutter Web app needs to be rendered in an iframe inside a React app. If the user was previously logged in to the Flutter Web app, the iframe can be loaded perfectly, but if the user is not logged in to the Flutter Web app, we get this error:

BrowserAuthError: redirect_in_iframe: Redirects are not supported for iframed or brokered applications. Please ensure you are using MSAL.js in a top frame of the window if using the redirect APIs, or use the popup APIs. (window.parent !== window) => true

I tried adding this snippet to the msalConfig object used to initialize MSAL:

var msalConfig = {
    ...
    system: {
        allowRedirectInIframe: true,
    },
};

But then this error is shown in the console:

Refused to display 'https://<elided>.b2clogin.com/' in a frame because it set 'X-Frame-Options' to 'deny'.

We're testing this changes in localhost (no https), could the error be related to that? Or I'm missing extra configuration?

Error Message

BrowserAuthError: redirect_in_iframe: Redirects are not supported for iframed or brokered applications. Please ensure you are using MSAL.js in a top frame of the window if using the redirect APIs, or use the popup APIs. (window.parent !== window) => true

Refused to display 'https://<elided>.b2clogin.com/' in a frame because it set 'X-Frame-Options' to 'deny'.

Msal Logs

No response

MSAL Configuration

{
    auth: {
        clientId: config.clientId,
        authority: config.isB2C ? "https://" + config.tenant + ".b2clogin.com/tfp/" + config.tenant + ".onmicrosoft.com/" + config.policy + "/" : "https://login.microsoftonline.com/" + config.tenant,
        knownAuthorities: [ config.tenant + ".b2clogin.com", "login.microsoftonline.com"],
        redirectUri: config.redirectUri,
    },
    cache: {
        cacheLocation: config.cacheLocation,
        storeAuthStateInCookie: false,
    },
    system: {
        allowRedirectInIframe: true,
    },
}

Relevant Code Snippets

Not applicable

Reproduction Steps

Not applicable

Expected Behavior

Our Azure B2C login page is displayed inside the iframe

Identity Provider

Azure B2C Basic Policy

Browsers Affected (Select all that apply)

Chrome

Regression

No response

Source

External (Customer)

[tnorling]

The X-Frame error indicates that your B2C policy does not allow being rendered inside an iframe (the default behavior). You'll need to follow the directions here to enable the embedded use-case. We are not B2C experts so any follow up questions about this should be directed to B2C Support