Microsoft-authentication-library-for-js: How to use [email protected] in strict CORS-policy browsers?

[ArneMancofi]

Please follow the issue template below. Failure to do so will result in a delay in answering your question.

Library

• [x] [email protected] or @azure/[email protected]
• [ ] @azure/[email protected]
• [ ] @azure/[email protected]
• [x] @azure/[email protected]
• [ ] @azure/[email protected]

Description

How is @azure/[email protected] + [email protected] intended to be used in browsers enforcing CORS security?

When invoking MsalService.loginPopup() while the current browser URL is pointing to the host providing the Angular SPA (e.g., http://localhost:8000), I see the following call stack:

MsalService.loginPopup()
UserAgentApplication.loginPopup()
UserAgentApplication.acquireTokenInteractive()
UserAgentApplication.acquireTokenHelper()
AuthorityFactory.saveMetadataFromNetwork()
Authority.resolveEndpointsAsync()
Authority.DiscoverEndpoints()
XhrClient.sendRequestAsync()
XMLHttpRequest.send()

At this point, I observe a CORS error in the browser's console

Access to XMLHttpRequest at 'https:// tenantID.b2clogin.com/tfp/ tenantID.onmicrosoft.com/b2c_1_signin/v2.0/.well- known/openid-configuration' from origin 'http://localhost:8000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Is there some way I can configure msal-angular to avoid this call stack when the browser's URL is not pointing to tenantID.b2clogin.com?

[tnorling]

@ArneMancofi I have not been able to reproduce this. [email protected] should not be making CORS requests. What browser are you using and are you able to repro this using the b2c sample? As a workaround, you can skip the openid-configuration network call by providing the metadata to your auth config. Instructions can be found here

[ArneMancofi]

@tnorling, thanks for your swift reply. 😃 —And thanks for your tip on how to provide authorization metadata configuration manually.

I think I now understand how it's intended to work, and how to debug problems:

Debugging MSAL HTTP OPTIONS requests failing on CORS policy

1. Realize that the HTTP OPTIONS request is not supposed to occur, and will always fail. So it must be prevented.
   Also realize that the HTTP GET call to https://tenant.b2clogin.com/.../openid-configuration is supposed to be made from Origin: yourwebapphost.

2. Take a look at the failing HTTP GET request just before the failing OPTIONS request.
   As this request will be cross-site, it must be a simple request in CORS terminology, because simple requests do not cause OPTIONS requests.

3. Figure out which of the CORS simple request requirements it violates:

   • It must use the GET, POST or HEAD method (should be OK by using GET)

   • The only headers which are allowed to be manually set are

     • Accept
     • Accept-Language
     • Content-Language
     • Content-Type (but note the additional requirements below)
     • DPR
     • Downlink
     • Save-Data
     • Viewport-Width
     • Width

   • The only allowed values for the Content-Type header are:

     • application/x-www-form-urlencoded
     • multipart/form-data
     • text/plain

4. Figure out what parts of your browser code, or which libraries, add headers or content types not listed above to XHR requests—and prevent them from doing so.

Application Insights MSAL problem

In my case, I am also using the Application Insights library in browser code, which adds RequestId: headers to XHR requests, to support distributed end-to-end tracing. Fortunately, I can provide a list of sites to exclude from header insertion, so I configured Application Insights like this:

this.appInsights = new ApplicationInsights({
  config: {
    instrumentationKey,
    enableCorsCorrelation: true,
    correlationHeaderExcludedDomains: ["b2clogin.com"]
  },
});

This makes the HTTP GET calls to https://tenant.b2clogin.com/.../openid-configuration simple requests, and they no longer fail and cause failing OPTIONS requests.

[tnorling]

Thanks for the update and the detailed info on how you solved it!