What should be the added to the web origin for cordova ios app created using angular

Getting advice
1

i have a Cordova app for ios created using angular. i want to know what should be the web origin?
if i add “" in the web origin the app works with Keycloak version 10. when i update the Keycloak version to 13 the "” in the web origin does not work.
min reproducible code: https://github.com/sanket-bhalerao/keycloak-cordova-angular
export for the Keycloak config are under “keycloak_exports” dir in the repo

i imported example-realm.json file for the initial setup, and added “*” in the web origin when the initial setup did not work.

error screenshot.

image
image2044×308 86.9 KB

am i missing any settings? please let me know in case of any suggestions.

2
3

@jangaraj i went through the post and tried few things from it. All the configuration works fine with webapp, the issue is specific to the iOS app (android app works fine). do you have any specific suggestion about the web origin configuration (or any other configuration for that matter) that can help with sorting out the issue with the iOS app?
P.S. when i say iOS app it is Angular code converted to cordova iOS app and uses keycloak.

4

Don’t trust to developer console. Origin null can be misleading error and that can be caused by different problem and not by missing origin. Use curl and simulate complete preflight request and check response (of course paste it here if you really need help).

One obvious problem:

"webOrigins": ["localhost"]

Did you read origin specification?:

Origin: <scheme> "://" <hostname> [ ":" <port> ]

There can be other problems, so debug prefligh with curl always.

5

hi @jangaraj, can you share some examples or references for the preflight debug?
also what I should be on the lookout for while testing.

6 
curl -X OPTIONS \
 -H "Origin: http://myorigin:8080" \
 -H "Access-Control-Request-Method: DELETE" \
 -H "Access-Control-Request-Headers: authorization,x-requested-with" \
  -k https://play.monitoringartist.com/auth/realms/master/protocol/openid-connect/token \
 --silent --verbose 2>&1

And example response in this case:

< HTTP/1.1 200 OK
< Access-Control-Allow-Headers: Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization
< X-XSS-Protection: 1; mode=block
< Referrer-Policy: no-referrer
< Date: Tue, 29 Jun 2021 11:38:04 GMT
< Connection: keep-alive
< Access-Control-Allow-Origin: http://myorigin:8080
< Access-Control-Allow-Credentials: true
< Strict-Transport-Security: max-age=31536000; includeSubDomains
< X-Content-Type-Options: nosniff
< Content-Length: 0
< Access-Control-Allow-Methods: POST, OPTIONS
< Access-Control-Max-Age: 3600

Will browse allow this request? No - because request was for DELETE method (even origin is allowed), but response doesn’t allow DELETE method - so there will be some CORS issue in the browser console (and I bet it won’t be saying anything about method, but something about origin). Of course I’m not saying that your app is doing DELETE request to the token endpoint - it is just example. You need to prove that’s a really Keycloak issue and it’s a origin issue.

7

command1:

curl -X OPTIONS \                                                                                                                                        1 ↵
 -H "Origin: http://localhost" \
 -H "Access-Control-Request-Method: POST" \
 -H "Access-Control-Request-Headers: authorization,x-requested-with" \
  -k http://localhost:8080/auth/realms/realmauth/protocol/openid-connect/token \
 --silent --verbose 2>&1

output:

*   Trying ::1...
* TCP_NODELAY set
* Connection failed
* connect to ::1 port 8080 failed: Connection refused
*   Trying 127.0.0.1...
* TCP_NODELAY set
* Connected to localhost (127.0.0.1) port 8080 (#0)
> OPTIONS /auth/realms/realmauth/protocol/openid-connect/token HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.64.1
> Accept: */*
> Origin: http://localhost
> Access-Control-Request-Method: POST
> Access-Control-Request-Headers: authorization,x-requested-with
> 
< HTTP/1.1 200 OK
< Access-Control-Allow-Headers: Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization
< X-XSS-Protection: 1; mode=block
< Referrer-Policy: no-referrer
< Date: Tue, 29 Jun 2021 12:04:18 GMT
< Connection: keep-alive
< Access-Control-Allow-Origin: http://localhost
< Access-Control-Allow-Credentials: true
< Strict-Transport-Security: max-age=31536000; includeSubDomains
< X-Content-Type-Options: nosniff
< Content-Length: 0
< Access-Control-Allow-Methods: POST, OPTIONS
< Access-Control-Max-Age: 3600
< 
* Connection #0 to host localhost left intact
* Closing connection 0

command2:

curl -X OPTIONS \
 -H "Origin: null" \
 -H "Access-Control-Request-Method: POST" \
 -H "Access-Control-Request-Headers: authorization,x-requested-with" \
  -k http://localhost:8080/auth/realms/realmauth/protocol/openid-connect/token \
 --silent --verbose 2>&1

output:

*   Trying ::1...
* TCP_NODELAY set
* Connection failed
* connect to ::1 port 8080 failed: Connection refused
*   Trying 127.0.0.1...
* TCP_NODELAY set
* Connected to localhost (127.0.0.1) port 8080 (#0)
> OPTIONS /auth/realms/realmauth/protocol/openid-connect/token HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.64.1
> Accept: */*
> Origin: null
> Access-Control-Request-Method: POST
> Access-Control-Request-Headers: authorization,x-requested-with
> 
< HTTP/1.1 200 OK
< Connection: keep-alive
< X-XSS-Protection: 1; mode=block
< Strict-Transport-Security: max-age=31536000; includeSubDomains
< X-Content-Type-Options: nosniff
< Referrer-Policy: no-referrer
< Content-Length: 0
< Date: Tue, 29 Jun 2021 12:06:58 GMT
< 
* Connection #0 to host localhost left intact
* Closing connection 0

with the second output, I can see that it does not have < Access-Control-Allow-Methods: POST, OPTIONS in the response. I believe this would result in the error in the browser console.

the token request that results in the error is part of the keycloak initialization, and I don’t think I can set the origin to any other value for the request.

in the case of the browser (as opposed to the ios app), the origin is set to the domain URL.
in the case of the ios app, the token request just shows null in the origin.

what should be my next step now?

8

That’s a proper investigation. I would close KEYCLOAK-18576 and I would focus on KEYCLOAK-17039 or try to search for another issues, which are describing problem with origin: null.

9

I will keep eye on KEYCLOAK-17039.
however, even if KEYCLOAK-17039 gets resolved the app still has an issue if * is not included in web origin. I would keep the KEYCLOAK-18576 open to find if there is any better way to handle it.