Access to XMLHttpRequest at 'xxx/.well-known/openid-configuration' from origin 'xxxx' has been blocked by CORS

Question

I am using the okta oAuth to do the authentication and authorization with angular 8 application. Since getting the ' https://dev-166545.okta.com/oauth2/aus1igd7yewoAs4xa357/.well-known/openid-configuration is causing the issue

I have added the redirect URL in the okta trusted origin. I can't add the URLs in the CORS because of company policy.

How can I solve the issue CORS

Access to XMLHttpRequest at 'https://dev-166545.okta.com/oauth2/aus1igd7yewoAs4xa357/.well-known/openid-configuration' from origin 'https://localhost:44307' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

However, in the network I can see

Answer 1

The preferred option is to add your web domain to Okta under API / trusted origins - as in step 7 of my write up

CORS is needed in order to implement open id connect for SPAs to latest security standards via Authorization Code Flow (PKCE) .

There is an alternative option in OIDC client, which is to avoid supplying the authority url and supply the redirect endpoint and token signing keys explicitly. An example of this is in my Azure code sample where I prevent a JWKS lookup by supplying the token signing keys explicitly.

However, you will be restricted to the implicit flow, which is no longer recommended, so you are weakening the security of your app - which is not in your company's interests - and also adding considerable complexity to your code.

Maybe as a next step forward my response to your stakeholders - and try to convince them to do the sensible thing of updating to the recommended industry standard security settings

Answer 2

Question needs more details. Especially preflight request/response headers, request/response headers. Don't use localhost (because mentioned browser issue) and http (because prod setup with https requires different CORS config).

Primitive curl preflight test:

curl -H "Origin: https://acme.com" \
 -H "Access-Control-Request-Method: GET" \
 -H "Access-Control-Request-Headers: X-Requested-With, :method" \
 -X OPTIONS -k https://dev-166545.okta.com/oauth2/aus1igd7yewoAs4xa357/.well-known/openid-configuration \
 --silent --verbose 2>&1 | grep Access-Control

=> give you idea what is requested and what is returned.

Type CORS != type Redirect + valid origin is for example http://localhost:8080 and not http://localhost:8080/ -> it is not clear how did you configure CORS types.

Answer 3

getClientSettings(configuration: IOpenIdOptions): UserManagerSettings {
    return {
      authority: configuration.authority + '/',
      client_id: configuration.clientId,
      redirect_uri: configuration.redirectUri,
      post_logout_redirect_uri: configuration.redirectUri,
      response_type: configuration.responseType, // "id_token token",
      scope: "openid profile email " + configuration.apiResourceId,
      filterProtocolClaims: true,
      loadUserInfo: false,
      automaticSilentRenew: true,
      monitorSession: true,
      silent_redirect_uri: configuration.silentRedirectUri,
      accessTokenExpiringNotificationTime: 20, //default 60
      checkSessionInterval: 5000, //default 2000
      silentRequestTimeout: 20000, //default: 10000 
      // When CORS is disabled, token signing keys cannot be retrieved
      //  Manual the metadata and singinKeys for okta auth
      metadata: {
        // Magic happen here. Confugure to local host 
        jwks_uri: configuration.jwksUri,
        authorization_endpoint: `${configuration.authority}/v1/authorize`,
        issuer: configuration.authority
      },
    };
  }

Appsetting.json

 "openId": {
    "authority": "https://dev-166545.okta.com/oauth2/xxxxxxxxxxxxxx",
    "clientId": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "apiResourceId": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "redirectUri": "https://localhost:44307/auth-callback",
    "silentRedirectUri": "https://localhost:44307/assets/silent-renew.html",
    "responseType": "id_token token",
    "jwksUri" : "https://localhost:44307/assets/jwks.json"
  }