[keycloak-user] CORS header on /auth endpoint

[LAGIER Aymeric]

Hi,


I have an angular 4 app protected by the mod_auth_openidc apache module<https://github.com/zmartzone/mod_auth_openidc>. My API is also protected by the same apache module.


Configuration (mod_auth_openidc configuration is omitted) :

    # API

    <Location "/api">
        ProxyPass http://monapi.com
        ProxyPassReverse http://monapi.com
        AuthType openid-connect
        Require valid-user
    </Location>



    # Angular
    <Location "/">
      AuthType openid-connect
      Require valid-user
    </Location>


My angular app calls /api via an AJAX call through the angular http client :


 this.http.get('/api',  { withCredentials: true } ).subscribe(function (data) {
            console.log(data);
 });


Everything is configured to work with the authorization code flow and CORS is configured to "*" in my keycloak client.


Everything works fine when the apache session is valid.

If my angular app is started and my apache session is expired, when I try to call /api, the apache module returns a HTTP 302 response :


HTTP/1.1 302 Found
Date: Mon, 04 Dec 2017 15:43:49 GMT
Server: Apache/2.4.25 (Unix)
Set-Cookie: mod_auth_openidc_state_OceqhOzOyuDZCbg7G0dZJh-JCbM=(....); Path=/; HttpOnly
Location: http://keycloak/auth/realms/<REALM-NAME>/protocol/openid-connect/auth?response_type=code&scope=openid&client_id=<CLIENT_ID>&state=OceqhOzOyuDZCbg7G0dZJh-JCbM&redirect_uri=http%3A%2F%2Fapp%3A8070%2Fredirect_uri&nonce=l-vH7oI71dUuOpT0BRixiJZgME2lY29AMrEIlLZjQAI
Content-Length: 460
Keep-Alive: timeout=5, max=99
Connection: Keep-Alive
Content-Type: text/html; charset=iso-8859-1


The HTTP 302 is followed and the following request is sent:


GET http://keycloak/auth/realms/<REALM-NAME>/protocol/openid-connect/auth?response_type=code&scope=openid&client_id=<CLIENT_ID>&state=<STATE>&redirect_uri=http%3A%2F%2Fapp%3A8070%2Fredirect_uri&nonce=<NONCE> HTTP/1.1
Host: keycloak:8080
Connection: keep-alive
Accept: application/json, text/plain, */*
Origin: http://app:8070
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
Referer: http://app:8070/dashboard
Accept-Encoding: gzip, deflate
Accept-Language: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7
Cookie: AUTH_SESSION_ID=6cb9e14d-3a85-484d-b40b-2b447affe8be; KEYCLOAK_IDENTITY=<VALUE>; KEYCLOAK_SESSION=<VALUE>


Keycloak validates my cookies and returns another HTTP 302 to go back to the application domain :


HTTP/1.1 302 Found
Connection: keep-alive
Cache-Control: no-store, must-revalidate, max-age=0
Set-Cookie: KC_RESTART=<VALUE>; Version=1; Path=/auth/realms/ALA; HttpOnly
Set-Cookie: KC_RESTART=; Version=1; Expires=Thu, 01-Jan-1970 00:00:10 GMT; Max-Age=0; Path=/auth/realms/<REALM-NAME>; HttpOnly
Set-Cookie: KEYCLOAK_IDENTITY=<VALUE>; Version=1; Path=/auth/realms/ALA; HttpOnly
Set-Cookie: KEYCLOAK_SESSION=<VALUE>; Version=1; Expires=Tue, 05-Dec-2017 01:43:49 GMT; Max-Age=36000; Path=/auth/realms/<REALM-NAME>
Set-Cookie: KEYCLOAK_REMEMBER_ME=; Version=1; Comment=Expiring cookie; Expires=Thu, 01-Jan-1970 00:00:10 GMT; Max-Age=0; Path=/auth/realms/<REALM-NAME>; HttpOnly
P3P: CP="This is not a P3P policy!"
Location: http://app:8070/redirect_uri?state=<STATE>&code=<CODE>
Content-Length: 0
Date: Mon, 04 Dec 2017 15:43:49 GMT


The problem is that CORS headers are not returned by the keycloak server so the browser doesn't accept the response :


Failed to load http://keycloak/auth/realms/<REALM-NAME>/protocol/openid-connect/auth?response_type=code&scope=openid&client_id=<CLIENT_ID>&state=<STATE>&redirect_uri=http%3A%2F%2Fapp%3A8070%2Fredirect_uri&nonce=<NONCE>: Redirect from 'http://keycloak/auth/realms/<REALM-NAME>/protocol/openid-connect/auth?response_type=code&scope=openid&client_id=<CLIENT_ID>&state=<STATE>&redirect_uri=http%3A%2F%2Fapp%3A8070%2Fredirect_uri&nonce=<NONCE>' to 'http://app:8070/redirect_uri?state=<STATE>&code=<CODE>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://app:8070' is therefore not allowed access.


By manually injecting the 2 missing CORS headers "Access-Control-Allow-Origin" and "Access-Control-Allow-Credentials", the redirect is done but there's a problem on the next redirect :


GET http://app:8070/redirect_uri?state=<STATE> HTTP/1.1
Host: app:8070
Proxy-Connection: keep-alive
Accept: application/json, text/plain, */*
Origin: null
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36
Referer: http://app:8070/dashboard
Accept-Encoding: gzip, deflate
Accept-Language: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7
Cookie: mod_auth_openidc_state_9v609458FxkBuhIFpPyQDd0UNr0=<STATE>


Because the Origin is null, the browser also refuse the response  :


Failed to load http://app:8070/redirect_uri?state=<STATE>&code=<CODE>: Redirect from 'http://app:8070/redirect_uri?state=<STATE>&code=<CODE>' to 'http://app:8070/api' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.


The origin = null seems to respect the specification : https://www.w3.org/TR/cors/#generic-cross-origin-request-algorithms (See section 7.1.7 step 6).


Do you know how to solve these problems ?


Thanks in advance,

Regards


Aymeric