Blazor WASM with Microsoft Identity Platform within iframes

[tts-jwiebe]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

I am developing a blazor wasm application which is supposed to be used within iframes.
If i am using the application in a "normal" way everything works as expected but with iframes i get the following error as soon as i try to singout:
There was an error trying to log you out: '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'

The first solution mentioned in the error sadly isn't an option for me as i do not have any control over the top app.
Using popup APIs tho seems possible but i haven't found any documentation for that on how to exactly use them.

Expected Behavior

Signout and redirect to a given return url.

Steps To Reproduce

I've created a small demo app to demonstrate this behaviour.
https://github.com/tts-jwiebe/SingoutTest

As i do not have control over the app which will embed my application i am not able to just add "msal.js" in the top app.

Basically there are two WASM Apps. Tho only one is actually the target app.
In this example the "MainApp" is only there to show the actual app in iframes.
"SingoutTest" is the main Application which is using Microsoft Identity Platform.

I've tried to prepare the projects as much as possible.
To replicate my behaviour i just started both apps independently and opened the "MainApp".
If the ports i used aren't used on your system, you should be able to just run both apps and open http://localhost:5186

Exceptions (if any)

It's no exception but it's the error thrown or given by MSAL if "Sign out" is clicked, when the app is contained in iframes.

There was an error trying to log you out: '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'

.NET Version

8.0.2

Anything else?

I found a somewhat related issue for the MSAL.js library where someone had a similiar problem. For normal JS environments it seems, that just setting the flag allowRedirectInIframe to true would basically fix my problem. I just don't see any option for that in any of the Authentication classes available.

AzureAD/microsoft-authentication-library-for-js#2593

When initializing MSAL in the Wasm app there is an option to set the "LoginMode" to either "popup" or "redirect" i feel like there should exist a LogoutMode as well. Is it alternativly possible to set the above mentioned flag in the appsettings? Because some of the Msal settings in there look a lot like the ones used for initializing msal.js

If anyone has a solution i would greatly appreciate it. As it's planned to use the app within iframes i am bound to resolve that.
I could of course just clear all local storages to get the illusion of a signout but that probably wont be recommended.

[tts-jwiebe]

My Demo Project doesn't use the latest versions of the available NuGet Packages. The Project i am working on does though.
My Wasm csproj file contains the following packages:

<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.3" />
<PackageReference Include="Microsoft.Authentication.WebAssembly.Msal" Version="8.0.3" />

The behaviour is the same in version 8.0.2 of both referenced projects.

[javiercn]

@tts-jwiebe thanks for contacting us.

I doubt you'll be able to do this within an iframe. If the app is trying to redirect for auth, it likely means that it already tried using the pop-up and could not do it (there's a default fallback behavior to redirect) so it's likely you can't perform auth on the client inside an iframe.

In such scenario, you might want to switch to performing authentication on the server (your app host) and set a cookie (the BFF pattern).

This seems to be an unsupported scenario by msal, so there's nothing we can really do here.

[tts-jwiebe]

I will try that thanks. Do you have a sample project with BFF and MSAL by any chance?

But if i take a look at both "AuthenticationService.ts" and the "msal.js" documentation i see that msal does have a method called "logoutPopup". But in AuthenticationService.ts i can't find anything related to popups specificly with logout.

This is AuthenticationService.ts i looked at.
This is the MSAL Documentation i saw

In the AuthenticationService.ts used by Blazor Wasm i see that the method "loginPopup" is used in "singInWithPopup" within a try catch and if it fails it is going to try the redirect. Such a method does not exist for logout tho.
Logout only tries to redirect and if it fails an error is thrown. To me it seems that MSAL does support popup based logout but the AuthenticationService.ts used by WASM doesn't.

Is that on purpose?

[dotnet-policy-service]

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.