Missing JWT token with Safari (macOS and iOS)

[erossini]

Is there an existing issue for this?

• [X] I have searched the existing issues

Describe the bug

I had this behaviour roughly a year ago. Now, in my new application, I'm facing the same issue, but the old solution didn't work. So, I have a Blazor application with NET6. 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.

Previously, I checked that on macOS and iOS the token could be read only once and then the browser forgets it.

I received a suggestion from the Microsoft Forum to add in the ws: and wss: like that

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://*.mydomain.com/";

    context.Response.Headers.Add("X-Content-Type-Options", "nosniff");
    context.Response.Headers.Add("Content-Security-Policy",
        $"default-src 'self' {mainUrl} {oidcAuthority} 'ws:' 'wss:' " +
            "https://code.cdn.mozilla.net " +
#if DEBUG
            "https://dc.services.visualstudio.com " +
#endif
            "https://api.mydomain.com " +
            "'unsafe-inline' 'unsafe-eval'; " +
        $"script-src 'self' {mainUrl} 'unsafe-inline' 'unsafe-eval'; " +
        $"connect-src 'self' {oidcAuthority} https://code.cdn.mozilla.net https://api.mydomain.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();
});

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.

Do you have any idea how can I fix it?

[erossini]

Hi guys, do you have any update for it? Can I do anything to help you?

[javiercn]

@erossini thanks for contacting us.

I am not 100% sure of what/how you are using the auth bits. Could you create a minimal repro project as a public github repository so that we can take a look?

[ghost]

Hi @erossini. We have added the "Needs: Author Feedback" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

See our Issue Management Policies for more information.

[erossini]

Hi @javiercn, I have just came back from holiday. I'll create a project asap.

[erossini]

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.

[erossini]

HI @javiercn @mkArtakMSFT @blowdart @radical Happy New Year all!

Did you have a chance to see my demo?

[javiercn]

@erossini we are coming back from the holidays, it'll take a bit until we catch up.

[IvanJosipovic]

I am also seeing this problem in Blazor in .Net 7. 95% of the exceptions are from Macs.

NuGet Packages = 7.0.2 SDKversion = 7.0.102

[surayya-MS]

@erossini, thank you for providing a demo. I was able o reproduce the bug on a Mac using Safari.

[surayya-MS]

I did some more digging and seems like it is not a Blazor bug.

@erossini, in the demo you provided token is null and the reason is that Safari is no longer sending cross-site cookies. The only fix for this that I could find is: allow sending cross-site cookies, Go to Safari > Preferences > Privacy and uncheck Prevent cross-site tracking.

You could maybe show these instructions on Home page for Safari users so they could use your app.

[erossini]

OK, I can add an alert for the user. What I don't understand is the token has a value and the user is recognized across the application for all the time the user is using the website.

In fact, the user is logged and I can get its details like email reading the claims. The token is null only when I read it in the function where I call the APIs.

Generally speaking, if I have a website like an e-commerce, it is very unlike that users change the Privacy settings only for my website, I'm not Microsoft. So, it could be big loss of users.

Could you recommend a workaround?

[javiercn]

@surayya-MS talk to me sometime this week about this issue, I want to understand more about Go to Safari > Preferences > Privacy and uncheck Prevent cross-site tracking.

[erossini]

@javiercn do you have any update about it? Thank you in advance.

[javiercn]

@erossini I have been out for a couple of weeks.

I believe I chatted with @surayya-MS that was looking into it, but I don't remember the exact conclusions. Let me check with her again.

[javiercn]

@erossini a couple of things that caught my eye are:

• https://github.com/erossini/BlazorJWTTest/blob/main/Conjoint/Client/Services/ApiTokenCacheService.cs#L55

That is not being checked, and might return false.

If you are on .NET 7.0, you can turn on logging on the client, to get more details on what is happening

* Turn logging level to the max by adding this to your Program.cs
  * builder.Logging.SetMinimumLevel(LogLevel.Trace);
* On the developer tools window, filter the console log messages by:
  * Microsoft.AspNetCore.Components.WebAssembly.Authentication

[erossini]

In attachment 2 files: one is the logging client side on macOS from Safari, the other one on Windows 10 on Microsoft Edge.

Cosole-Windows-Edge.log Console macOS.txt

[javiercn]

@erossini this is not using .NET 7.0, isn't it? The improved logging is only available in .NET 7.0

[javiercn]

@erossini I see now what is happening.

There is an error in your app in the line that I pointed you to. RequestAccessToken only deals with provisioning a token without user interaction. In OIDC this is done via a hidden iframe that gets rendered on to the page. 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.

[erossini]

@javiercn thank you so much for your message. I use the Identity Server implemented by Skoruba (https://github.com/skoruba/Duende.IdentityServer.Admin). The connection is via AddOidcAuthentication. You can see my settings in the demo project.

The flow is that the user has to login against the Identity Server and then the Identity Server redirects the user to the Authentication page (here the code).

How can I fix my project then?

[javiercn]

@erossini unfortunately, that type of guidance is outside of the scope that we can provide in this repo. If you are using a third-party identity provider, you need to check in their docs how to configure the flow.

[erossini]

OK. What is the best practice/recommendation for working with OIDC? What is the best practice/recommendation for protecting the APIs based on OIDC?

Thank you in advance.

[javiercn]

OK. What is the best practice/recommendation for working with OIDC? What is the best practice/recommendation for protecting the APIs based on OIDC?

There are multiple options and each one has different trade-offs, what I can tell you is that Code+PKCE is what AAD and AAD B2C use, and it is a generally accepted solution for SPAs.