Azure AD B2C Embedded signin is not working in safari

Question

Azure AD B2C Embedded signin is not working in safari

Sahil Shah 26

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

Answer 1

Shweta Mathur 19,626 Microsoft Employee

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 26 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 19,626 Reputation points Microsoft Employee

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 26 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 19,626 Reputation points Microsoft Employee

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

Azure AD B2C Embedded signin is not working in safari

1 answer

Activity