Blazor: missing JWT token with Safari (macOS and iOS) - asp.net-core

Question

I have a Blazor application with NET6. The authentication is via Identity Server (Skoruba Duende). I created this repo here with a basic project without CSS).
When the application calls the API, I add the user token in the Header.
request.Headers.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", token);
To retrieve the user token, I have a function that read the token from the cache or from IAccessTokenProvider.
IAccessTokenProvider _accessToken;
private async Task<AccessToken> RequestUserToken()
{
try
{
var tokenResult = await _accessToken.RequestAccessToken();
tokenResult.TryGetToken(out var token);
Console.WriteLine(token);
return token;
}
catch (AccessTokenNotAvailableException aex)
{
throw new ApplicationException($"Exception {aex}");
}
catch (Exception ex)
{
throw new ApplicationException(
$"AccessTokenNotAvailable Exception Exception {ex}");
}
}
The application sends successfully requests to the API from Windows and Android. When I run the application on macOS and iOS devices, the token is not found and then there is an error.
To debug this issue, I run the web application on a Mac. On the Mac, the application is working fine with Microsoft Edge and Chrome but not with Safari.
On iPhone and iPad, this issue is present on Safari and Chrome. It works fine on Microsoft Edge.
Add more details
I'm creating application with Blazor in NET6. To call the API via an Azure API Management, I have to pass a token in the request adding
request.Headers.Authorization =
new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", token);
In this request, I have to pass the token that comes from an Identity Server. So, first, the user has to authenticate to the identity server and then receives the JWT token.
The configuration is
builder.Services.AddOidcAuthentication(options =>
{
builder.Configuration.Bind("oidc", options.ProviderOptions);
options.UserOptions.RoleClaim = "role";
})
.AddAccountClaimsPrincipalFactory<MultipleRoleClaimsPrincipalFactory<RemoteUserAccount>>();
builder.Services.AddAuthorizationCore();
Also, to apply the security, I add in the Program.cs this lines
app.Use((context, next) =>
{
context.Response.GetTypedHeaders().CacheControl =
new Microsoft.Net.Http.Headers.CacheControlHeaderValue()
{
MustRevalidate = true,
NoCache = true,
NoStore = true,
};
string oidcAuthority = builder.Configuration.GetValue(typeof(string), "oidc:Authority").ToString();
string mainUrl = "https://test.mywebsite.com/";
#if DEBUG
mainUrl = "https://localhost:7040";
#endif
context.Response.Headers.Add("X-Content-Type-Options", "nosniff");
context.Response.Headers.Add("Content-Security-Policy",
$"default-src 'self' {mainUrl} {oidcAuthority} " +
"https://code.cdn.mozilla.net " +
#if DEBUG
"https://dc.services.visualstudio.com " +
#endif
"https://api.myapi.com " +
"'unsafe-inline' 'unsafe-eval'; " +
$"script-src 'self' {mainUrl} 'unsafe-inline' 'unsafe-eval'; " +
$"connect-src 'self' {oidcAuthority} https://code.cdn.mozilla.net https://api.myapi.com;" +
$"img-src 'self' {mainUrl} data:; " +
$"style-src 'unsafe-inline' {mainUrl} " +
"https://code.cdn.mozilla.net " +
";" +
"base-uri 'self'; " +
"form-action 'self'; " +
"frame-ancestors 'self';");
context.Response.Headers.Add("Referrer-Policy", "same-origin");
context.Response.Headers.Add("Permissions-Policy", "geolocation=(), microphone=()");
context.Response.Headers.Add("X-XSS-Protection", "1; mode=block");
context.Response.Headers.Add("X-Frame-Options", "SAMEORIGIN");
context.Response.Headers.Add("SameSite", "Strict");
return next.Invoke();
});
So, after that I can read the JWT token with this code:
IAccessTokenProvider _accessToken;
private async Task<AccessToken> RequestUserToken()
{
try
{
var tokenResult = await _accessToken.RequestAccessToken();
tokenResult.TryGetToken(out var token);
Console.WriteLine(token);
return token;
}
catch (AccessTokenNotAvailableException aex)
{
throw new ApplicationException($"Exception {aex}");
}
catch (Exception ex)
{
throw new ApplicationException(
$"AccessTokenNotAvailable Exception Exception {ex}");
}
}
The application is working on Windows for any browser. On iOS and macOS I can read the token if I use Safari. It is working if I use Microsoft Edge and Chrome.
I have just created this repo here (sorry the project is very basic without CSS).
When you run the application, click on Log in. Then, you will redirect to the Identity Server when you can use the following credentials:
Username: MSTest
Password: MSTest!2023
Then, you can see a new link called Simulation. The Simulation calls the API using the user token.
For your convenient, I deployed the test website here
When you run the app on Windows with Edge, for example, you can see that the call to the API is working.
But when you run the website on an iPhone you get an error.
Microsoft answer
I opened an issue on GitHub under aspnetcore.
Safari Intelligent Tracking Prevention is blocking the cookie from
being sent on the hidden iframe, which is why Surayya's suggestion
works, as it disables that mechanism.
On your app, you are failing to check for the result of
AccessTokenResult if you do, you'll see that it has an error status on
it, hence why TryGetToken returns false. This is all expected so far,
and the way to deal with it, is by performing the authentication flow
interactively.
I am not sure what provider you are using, but the way this works in
AAD is that the flow is code+PKCE and a refresh_token with a duration
of 24h is emitted, which the app then uses to refresh the access
tokens when needed.
This is also why our built-in handler throws an exception when it
can't provision the token, so that you can perform an interactive flow
and provision the token that way.
At this point, I don't know how to secure the APIs via Identity Server with a method that works. Can you recommend/advice me how to do it?