B2C Custom policy CORS issue

Question

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

Answer 1

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.

Answer 2

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