[SOLVED] B2C Custom Policy LoadUri against a CDN fails to load signin form

B2C Custom Policy LoadUri against a CDN fails to load signin form

We have a B2C with custom policies for sign Up, Sign In and Social login, the base page layout is loaded from a CDN (base.html) our custom page layout is as simple as this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Login</title>
        <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
        <div class="container">
            <div class="d-flex justify-content-center h-100">
                <div class="card">
                    <div id="api"></div>
                </div>
            </div>
        </div>
        <script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
        <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    </body>
</html>

Inside our Custom Policy we use a ContentDefinition like this:

       <ContentDefinition Id="api.signuporsignin">
        <LoadUri>https://XXXXX.z16.web.core.windows.net/{OIDC:ClientId}/base.html</LoadUri>
        <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
        <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.4</DataUri>
        <Metadata>
          <Item Key="DisplayName">Signin and Signup</Item>
        </Metadata>
      </ContentDefinition>

Which works fine because is retrieving the base.html from static website (STA) instead of the Azure CDN configured over the blob STA. If we change the LoadUri pointing to https://xxx.azureedge.net/{OIDC:ClientId}/base.html which is the CDN endpoint B2C returns an error saying there was a problem loading scripts on page and not rendering the login form.

Using both URL's from static websoite and CDN in any browser renders the page correctly which is white empty with just a Login title.

I think is a CORS problems when B2C tries to request this page from CDN. I have configured CORS in my STA, adding my B2C tenant like picture below but not working at all:

Any help configuring B2C against a CDN please?

Solution

If there is a CORS problem here, it could be in the CDN: https://learn.microsoft.com/en-us/azure/cdn/cdn-cors.

According to the documentation, you can create a rule to set the proper response header: