Azure AD B2C Embedded signin is not working in safari

Question

Azure AD B2C Embedded signin is not working in safari

Sahil Shah 51

I have enabled JourneyFraming in custom policy as described here: https://learn.microsoft.com/en-us/azure/active-directory-b2c/embedded-login?pivots=b2c-custom-policy

    <UserJourneyBehaviors>
      <JourneyInsights TelemetryEngine="ApplicationInsights" InstrumentationKey="xxxxx" DeveloperMode="true" ClientEnabled="false" ServerEnabled="true" TelemetryVersion="1.0.0" />
      <JourneyFraming Enabled="true" Sources="https://example-site1.com https://example-2.azurewebsites.net https://www.emaple-3.com https://localhost:50000" />
      <ScriptExecution>Allow</ScriptExecution>
    </UserJourneyBehaviors>

The embedded iframe loads fine in chrome, but fails to load in safari.

Getting following error in console "Invalid 'X-Frame-Options' header encountered when loading <b2c_page_url>: ALLOW-FROM <url> is not a recognized directive. The header will be ignored."

Any idea what could be missing for Safari?

User's image

Shweta Mathur 30,426 Reputation points Microsoft Employee Moderator

2023-10-03T09:49:02.94+00:00

Hi @Sahil Shah ,

Just checking in to see if the below answer helped. If this answers your query, please don’t forget to click "Accept Answer" which might be beneficial to other community members reading this thread. And, if you have any further query do let us know.
Sahil Shah 51 Reputation points

2023-10-04T04:00:55.0133333+00:00

Hello Shweta,

The issue turned out to be because of missing custom domain. Using the b2clogin.com domain results in cookies being treated as 3rd party. This works in Chrome. But Safari blocks the same. The console errors like you suggested were just warnings and were misleading. The root cause was cookies being blocked as 3rd party because of missing custom domain.

Answer accepted by question author

1 additional answer

Your answer

Shweta Mathur 30,426 Reputation points Microsoft Employee Moderator

2023-10-03T09:49:02.94+00:00

Hi @Sahil Shah ,

Just checking in to see if the below answer helped. If this answers your query, please don’t forget to click "Accept Answer" which might be beneficial to other community members reading this thread. And, if you have any further query do let us know.
Sahil Shah 51 Reputation points

2023-10-04T04:00:55.0133333+00:00

Hello Shweta,

The issue turned out to be because of missing custom domain. Using the b2clogin.com domain results in cookies being treated as 3rd party. This works in Chrome. But Safari blocks the same. The console errors like you suggested were just warnings and were misleading. The root cause was cookies being blocked as 3rd party because of missing custom domain.

Answer 1

Shweta Mathur 30,426 Microsoft Employee Moderator

Hi @Sahil Shah

I'm glad that you were able to resolve your issue and thank you for posting your solution so that others experiencing the same thing can easily reference this! Since the Microsoft Q&A community has a policy that "The question author cannot accept their own answer. They can only accept answers by others", I'll repost your solution in case you'd like to "Accept" the answer.

User's image

Thanks!!!

Answer 2

Shweta Mathur 30,426 Microsoft Employee Moderator

Hi @Sahil Shah ,

Thanks for reaching out.

This is expected as Safari does not support the ALLOW-FROM directive.

Instead, you can use the Content-Security-Policy header to control framing. You can set the Content-Security-Policy header to frame-ancestors to allow framing from specific sources.

To allow your Azure AD B2C user interface to be embedded in an iframe, a content security policy Content-Security-Policy and frame options X-Frame-Options must be included in the Azure AD B2C HTTP response headers.

Hope this will help.

Thanks,

Shweta

Please remember to "Accept Answer" if answer helped you.

Sahil Shah 51 Reputation points

2023-09-06T14:59:07.9766667+00:00

Hello Shweta,

I understand that. And per my checks B2C is already sending both CSP and X-Frame-Options header in response. And yet Safari is complaining and not loading the B2C page, while Chrome has no issues.

As mentioned here: https://learn.microsoft.com/en-us/azure/active-directory-b2c/embedded-login?pivots=b2c-custom-policy

I have done JourneyFraming in the custom policy to include valid domains in Sources. They are correctly set in CSP headers too. Then why is it that embedding is working on Chrome but not in Safari.

Does this mean Microsoft should do some browser detection and only send CSP header and not X-Frame-Options when request comes from Safari?

This is not me in control here, it is B2C's login page that is failing to load and it is sent by Microsoft and not me. Thus seeking help here.
Shweta Mathur 30,426 Reputation points Microsoft Employee Moderator

2023-09-07T08:49:41.15+00:00

Sahil Shah

Content-Security-Policy frame-ancestors directive works for mostly all browsers. When frame-ancestors are set, X-Frame-Options is ignored, so you will not get that error message.

Did you try to remove X-Frame options?
Sahil Shah 51 Reputation points

2023-09-07T10:33:51.5+00:00

Hello Shweta,

I can't, because that page is provided by Azure B2C, not by me.

https://<tenant>.b2clogin.com/<tenant>.onmicrosoft.com/b2c_1a_username_susi/oauth2/v2.0/authorize?client_id=xxxx&redirect_uri=https%3A%2F%2Fexample.com%2Fsignin-oidc&response_type=id_token&scope=openid%20profile&response_mode=form_post&nonce=<random characters>&client_info=1&x-client-brkrver=IDWeb.1.26.0.0&ui_locales=en&state=<random characters>&x-client-SKU=ID_NET6_0&x-client-ver=6.25.1.0

That is what I need, MS to provide some way to remove X-Frame-Options header when request is from Safari.
Shweta Mathur 30,426 Reputation points Microsoft Employee Moderator

2023-09-13T10:03:18.4466667+00:00

Sahil Shah

Content-Security-Policy and frame options X-Frame-Options are in built included in the Azure AD B2C HTTP response headers.

and as per this message "I_nvalid 'X-Frame-Options' header encountered when loading <b2c_page_url>: ALLOW-FROM <url> is not a recognized directive. The header will be ignored._" it just an indicator that x-Frame-option would be ignored.

However, if you want to remove some header (which would potentially break other browsers) you can use a custom rule in Azure Front Door WAF (Web Application Firewall) (ref.: https://learn.microsoft.com/en-us/azure/web-application-firewall/afds/waf-front-door-custom-rules).

But in this scenario, it seems something else is preventing the Safari from loading the page.

Thanks,

Shweta

Share via

Azure AD B2C Embedded signin is not working in safari

1 additional answer

Your answer