Keycloak-angular: access /account fails with 403 error and CORS message

3
votes

I'm using angular-keycloak 7.1.0 with keycloak 8.0.2 (and keycloak-js 8.0.2). I created an openIdConnect realm with a client, configured with Access Type: public and a fine grain OpenID Connect Configuration to create ES256 JWTs (JSON Web Token).

When I try to login via my Ionic-Angular Web-App (Chrome, Safari) the keycloak login form is displayed, if user isn't logged in yet. After submitting credentials the /token endpoint is called successfully and responds the expected JWT.

But then the keycloak-angular-lib calls 'http://localhost:8080/auth/realms/REALM_NAME/account' to access the user profile, which delivers:

Access to XMLHttpRequest at 'http://localhost:8080/auth/realms/REALM_NAME/account' from origin 
'http://localhost:1337' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is 
present on the requested resource.

Several more hints:

  • I already tried all variants of keycloak client configuration with * and +, relative and absolute paths for Web Origins and Valid Redirect URIs.

  • /token request works fine.

  • I made several changes on client scope mappers, especially on profile mapper.

  • I can access the /account path via postman

2
angularcorsangular8keycloak
What's the HTTP status code of the response? You can use the Network pane in browser devtools to check. Is it a 4xx or 5xx error rather than a 200 OK success response? - sideshowbarker
Ah, I get an http-403! - b.fiss
ah yeah OK then, that 403 error is the actual problem you need to solve. The only reason the browser is reporting a CORS error is that server systems by default almost never add any application-set custom headers to 4xx error responses. So if you fix the 403 problem, you’re likely gonna find that the CORS error goes away because (for 200 OK success responses) your existing CORS config is already working as expected. - sideshowbarker

2 Answers

2
votes

I had the similar issues and the call to profile request is cause of the CORS error

KeycloakService.loadUserProfile()

As mentioned, Setting "Full Scope allowed" to true in the scope of the client solved the problem but this was not the preferred solution in my case, as it was adding unwanted roles and audiences. Moreover I do not have access to Account client due to organisation policies and thus cannot refer "view-profile" role in my client scope.

However in my case replacing call to user profile with user info solved the issue as it avoid call to Account client

KeycloakService.getKeycloakInstance().loadUserInfo()
1
votes

In the end I found out that my scope settings were causing it. Setting "Full Scope allowed" to true in the scope of the client solved the problem.

To allow the users to access their profiles when "Full Scope allowed" is disabled I assigned the role "view-profile" to the "account" client in the client roles of the scope of the user-access-client I use for the user login. enter image description here (I didn't realise that account was a automatically created client of the realm)