'login.microsoftonline.com refused to connect' error when running in an iframe

[TimDol64]

Category

• Bug

Describe the bug

When I run my app configured to use PnP Core in an iframe, instead of the app an error message 'login.microsoftonline.com refused to connect' is displayed.

Steps to reproduce

1. Create a Blazor Server app and configure it similar to the Demo.ASPNetCore project
2. Create a static html page with an iframe with src set to the Blazor app
3. Open the html page. The error displays

Expected behavior

I expect to be able to use PnP Core in an iframe.

Environment details (development & target environment)

• SDK version: 1.5.58-nightly
• OS: Windows 10
• SDK used in: Blazor Sever
• Framework: .NET 6.0
• Browser(s): Edge v98.0.1108.50
• Tooling: Visual Studio 2022

Additional context

My scenario is to have a SharePoint-hosted add-in, where I have a SharePoint page with an iframe to host my Blazor server app.
I started with a Blazor WASM app based on the Demo.Blazor project, but I am using DevExpress controls for the UI and Aspose Words to create Word documents, so opening the app was very slow. Also, I want to keep application id and client secret hidden from users, so I want to move to Blazor Server. I tried to configure PnP Core based on the Demo.ASPNetCode project, and it's working stand alone, but not in an iframe (be it on a SharePoint page or a simple static html file).
I expect the issue is similar to what is described here:
https://community.dynamics.com/crm/f/microsoft-dynamics-crm-forum/425761/my-iframe-displays-login-microsoftonline-com-refused-to-connect---but-only-sometimes
Maybe the response is also relevant in this case: 'It seems that the OAuth 2.0 acces tokens expire and are renewed in the background but this won't apply to the iframe so attempts to redirect fail as we are no longer logged in. We reworked our code so the iframe uses html5 window.parent.postMessage, rather than attempting to redirect to a D365 webresource.'

I am new to both .NET Core and PnP Core, so all the configuration options op PnP Core are overwhelming. Knowing that I had a working scenario based on Blazor WASM: I am not stuck to a particular configuration option. My goal is to have a custom action in SharePoint document libraries, that navigates to a page where my app is running. After filling out an EditForm, I create a document, upload it to the document library where we started, and open the document in Office online. I had it working for WASM, so I am hoping that the same functionality can be achieved with Blazor Server.

// Add Microsoft.Identity.Web services
builder.Services.AddMicrosoftIdentityWebAppAuthentication(config)
        .EnableTokenAcquisitionToCallDownstreamApi(new string[] { "User.Read" })
        .AddInMemoryTokenCaches();

builder.Services.AddRazorPages().AddMvcOptions(options =>
{
    var policy = new AuthorizationPolicyBuilder()
        .RequireAuthenticatedUser()
        .Build();
    options.Filters.Add(new AuthorizeFilter(policy));
});

// Add the PnP Core SDK library
builder.Services.AddPnPCore();
builder.Services.Configure<PnPCoreOptions>(config.GetSection("PnPCore"));
builder.Services.AddPnPCoreAuthentication();
builder.Services.Configure<PnPCoreAuthenticationOptions>(config.GetSection("PnPCore"));

[jansenbe]

@TimDol64 : I'm going to move this one to a discussion, don't think this is a library issue

[TimDol64]

@jansenbe Maybe there's an alternative way to configure (more like what the Blazor wasm demo does maybe?) that doesn't suffer from this issue?

[jansenbe]

@TimDol64 : to me the chosen architecture for the task at hand could be different:

• Use SPFX (TypeScript) to implement the document library menu item via a ListView command set extension (will work on modern libraries)
• The SPFX app will pop up a pane at the left side asking for the needed input
• The SPFX app will call an Azure AD secured web service (.NET 6, using PnP Core SDK) that's responsible of:
  • Creating the document using Aspose
  • Upload the document to the calling library
• Once that's done the SPFX app can call into Graph to get a document preview url and open that

Some samples that can get you started:

• https://spblog.net/post/2020/12/10/how-to-access-sharepoint-data-from-azure-function-with-spfx-and-pnp-core : shows an SPFX web part calling into an Azure AD secured function that uses the on-behalf-of access flow and respective authentication provider in PnP Core SDK
• .NET 6 out of process v4 Azure function using PnP Core SDK: https://pnp.github.io/pnpcore/demos/Demo.AzureFunction.OutOfProcess.AppOnly/readme.html
• Sample SPFX ListView CommandSet: https://github.com/pnp/sp-dev-fx-extensions/tree/main/samples/react-command-addfolders. See more here: https://pnp.github.io/sp-dev-fx-extensions/

[TimDol64]

@jansenbe Thanks for thinking out of the box. I will certainly look into it, but it looks like there's no Blazor involved. As a desktop developer trying to move my document solutions to the web, Blazor has the huge advantage for me that I can use C#.
I have a working Blazor Wasm app that I can run in an iframe and a Blazor server app that is working stand alone, so it feels like I am 1 percent away from a solution that will work for me vs starting over and facing another learning curve. No Javascript/Typescript experience, so if I can avoid that...
The forms will have to do more than just collect a few fields; there will be quite some programming involved.
Hopefully someone can point me in the right direction (or can tell me that what I want is absolutely impossible).

[duanepfeiffer]

I'm trying to get a Blazor app running with Pnp Core but I am unable to create a PnP context. I have my startup.cs similar to what you have. I always get '{"A configuration issue is preventing authentication - check the error message from the server for details. You can modify the configuration in the application registration portal. See https://aka.ms/msal-net-invalid-client for details. Original exception: AADSTS7000218: The request body must contain the following parameter: 'client_assertion' or 'client_secret'.\r\nTrace ID: 3d39eaa3-1f3e-4b42-8660-0f9c0f671600\r\nCorrelation ID: b5dbee59-0190-4981-b1b2-286c81944cf9\r\nTimestamp: 2022-03-24 23:17:23Z"}'

All answers to this error are pointing me to Azure AD -> app registration -> Authentication -> 'Allow public client flows' but this doesn't fix the problem.
I'm wondering how you have your startup and appsettings.json setup.

[TimDol64]

Duane,

While working on this issue, I read somewhere that logging in from an iframe is not allowed for security reasons. Running the app in an iframe was not essential for me, so I ended up redirecting to my app, passing the url of the site I came from as a parameter, and redirecting back to that site when my app finished its work.

Tim