B2C Custom policy CORS issue

Vikas Tiwari 766 Reputation points
2020-12-08T05:46:37.477+00:00

Hi @AmanpreetSingh-MSFT ,

I am adding custom css and company branding using custom policies and facing following issue, I appreciate your help on this:

1) If I add CORS allowed origin as "" its working fine but if I add "https://your-tenant-name.b2clogin.com" I am getting error "contains script errors preventing it from being loaded" though I don't have any script its simple HTML.
From security point of view I don't want to set allowed origin as "", can you help me to understand what else I missing?

2) On customization of UI, I want to put "Forgot your password" link at bottom below to "Sign in" button to closely match to my existing login page. Is there anyway to customize content loaded on runtime under <div id="api"></div>?

Thanks,
Vikas

Microsoft Entra External ID
Microsoft Entra External ID
A modern identity solution for securing access to customer, citizen and partner-facing apps and services. It is the converged platform of Azure AD External Identities B2B and B2C. Replaces Azure Active Directory External Identities.
2,663 questions
0 comments
Accepted answer
  1. AmanpreetSingh-MSFT 56,311 Reputation points
    2020-12-08T12:54:37.843+00:00

    Hi @Vikas Tiwari · Thank you for reaching out. Please find my comments inline:

    1) If I add CORS allowed origin as * its working fine but if I add "https://your-tenant-name.b2clogin.com" I am getting error "contains script errors preventing it from being loaded" though I don't have any script its simple HTML.
    From security point of view I don't want to set allowed origin as "", can you help me to understand what else I missing?

    Setting https://your-tenant-name.b2clogin.com should work as allowed origin as * is not a requirement. The script error occurs if there is a mismatch. Could you please check if it is spelled correctly? If it is correctly set, make sure Allowed headers and Exposed headers are set to *. If you still face any errors, please share the correlation id that you get along with the error.

    2) On customization of UI, I want to put "Forgot your password" link at bottom below to "Sign in" button to closely match to my existing login page. Is there anyway to customize content loaded on runtime under <div id="api"></div>?

    This can be done by updating #forgotPassword in CSS file. Please check with your front end developers on this as I don't have expertise in CSS to provide exact parameters to be used for this purpose. Here is my CSS file for your reference.

    -----------------------------------------------------------------------------------------------------------

    Please "Accept the answer" if the information helped you. This will help us and others in the community as well.

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Vikas Tiwari 766 Reputation points
    2020-12-09T06:31:02.887+00:00

    Adding my 2 cents here in case someone facing for similar issue.

    To repositioning Forgot Password apart from CSS I found below method as well and it worked fine for me:

    I have added following metadata inside ContentDefinition:

    <Metadata>
    <Item Key="setting.forgotPasswordLinkLocation">AfterInput</Item>
    </Metadata>

    It has following other values as well to set:

    AfterLabel
    AfterInput
    AfterButtons
    none

    0 comments