Enabling CORS on Azure Active Directory

Question

I am trying to get a access token from Azure Active Directory programmatically using the following method in an Angular 6 application.

    let body1 = new FormData()
    body1.append("resource", environment.config.clientId)
    body1.append("grant_type", "client_credentials")
    body1.append("client_id", environment.config.clientId)
    body1.append("client_secret", "*****")

    return this._http.post("https://login.microsoftonline.com/" + environment.config.tenant + "/oauth2/token", body1)

I was able to retrieve an access token through this url in Postman but am blocked by CORS when calling it through my application. Error is below.

    Failed to load https://login.microsoftonline.com/*****/oauth2/token: 
Response to preflight request doesn't pass access control check: No 'Access-
Control-Allow-Origin' header is present on the requested resource. Origin 
'http://localhost:4200' is therefore not allowed access.

So, how do I enabled CORS on the Azure Active Directory for all domains?

Solution

Simple, you do not.

What you are doing is exposing your app's client secret to the public. Remember that the request will be made from the user's device. So they can observe it and capture your secret. This is why the token endpoint does not support CORS, and probably never will.

UPDATE: The token endpoint does now support CORS, if you configure a reply URL with the SPA platform. This allows usage of Authorization Code flow with PKCE. MSAL.js 2.0 supports this flow. Note this still does not involve a client secret.

The way to acquire tokens from a front-end JS app is to use Implicit Grant Flow or Authorization Code flow with PKCE. Or if you do need an app-only token, then you must do the request you tried from a back-end application.

Implicit grant flow allows you to get tokens directly from the authorization endpoint as the user signs in. You can use ADAL.JS/MSAL.JS to assist in this. You cannot have tokens without a user identity as your native app cannot prove its identity.

Comments

[Philippe Signoret]

+1 To this answer. CORS is blocking you because you are trying to do something in a browser which you should never do in a browser.

[kg123]

Thanks @juunas for the information. I am using adal in my application for user sign in, but there is a part of the application where I want the user to be able to see some specific private without having to sign in (I am unable to make the data I'm trying to retrieve public) . This application isn't going to be deployed and is essentially a proof of concept, so I'm looking for a workaround to this issue. Do you know a way to programmatically login so the user wouldn't have to? With adal or not?

[juunas]

You will need a back-end for your app that gets the data and returns it for the front-end.

[Tim Reilly]

Hmmmm... What are supposed to do if we want to use PKCE flow on the browser? Hasn't the implicit flow been removed from recommended best practice?

[juunas]

I don't think PKCE is supported yet in Azure AD for this scenario. So implicit is the way to go for the time.

[juunas]

Or use cookies for front-end and do the auth in back-end

[jb007]

"The token endpoint does now support CORS" how exactly do you enable this?

[juunas]

You need to add a "SPA" platform to your app registration and add reply URLs to it.

[jb007]

Adding "SPA" almost worked since now prelight options request now returns OK. However, even though the preflight response has Access-Control-Allow-Origin: * , the browser still has error in console from origin 'localhost:44386' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[juunas]

Are you using the new version of MSAL.js? npmjs.com/package/@azure/msal-browser