angularkeycloaksingle-page-applicationmod-auth-openidc

CORS Error from Angular when redirect to Keycloak


I have an SPA application deployed on Apache side as the static files.
I use the apache module mod_auth_openidc as RP to authenticate the users.
I use Spring boot as backend API. And I use Keycloak as IDP.
During the first authentication the redirection to Keycloak is done correctly and the API calls from the SPA to the Java backend work fine. However, after the session expires, when the user clicks on a link in the SPA, he is automatically redirected to the IDP (via HTTP 302 code). But this time the browser raises a CORS error. Because the MIME type is incorrect.

Here is the configuration used on Apache side.

OIDCCryptoPassphrase a-random-secret-used-by-apache-oidc-and-balancer
OIDCClientID myapp
OIDCClientSecret xxxxxxxxxxxxxxxxxxx
OIDCScope "openid"
OIDCProviderMetadataURL https://keycloak-host/auth/realms/myclient/.well-known/openid-configuration
OIDCRedirectURI https://myapp-host/myapp/accueil

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Credentials "true"
Header always set Access-Control-Allow-Methods "GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS"
Header always set Access-Control-Max-Age "3600"
Header always set Access-Control-Allow-Headers "Content-Type, Accept, X-Requested-With, Authorization"

<Location /myapp/>
    AuthType openid-connect
    Require valid-user
    LogLevel debug
</Location>

# only Api request is forwaded to backend Java
SetEnvIf Request_URI !"/myapp/api/*" no-j 
JkMount  /myapp/api/* app1

Here is Keycloak configuration:
Valid Redirect URIs = 'https://myapp-host/*'
Web Origins = '+'

Do you have any idea of the cause of the error? Here is the error in Chrome console :

Refused to execute script from 'https://keycloak-host/auth/realms/intradef/protocol/openid-connect/auth?response_type=code&scope=openid&client_id=mayapp&state=cdPzfatA1au8hWag3puQWeYXzlc&redirect_uri=https%3A%2F%2F10.29.150.131%2Fmyapp%2Faccueil&nonce=MxMAAJWaVX0dCcHgHSp94S24_JTDJA6D8D4i6UloCx8' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.


Solution

  • 1.) You are using unsuitable flow for the SPA

    There is no reason to protect static files. SPA should initialize and manage own session with OpenId Connect Auth Code Flow + PKCE. Generally, use some certified library for your SPA technology and you should be fine.

    BTW: static CORS config is not according specification: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

    In requests with credentials, it is treated as the literal header name "*" without special semantics. Note that the Authorization header can't be wildcarded and always needs to be listed explicitly.

    2.) API is also not responding correctly

    It should respond 401 (Unauthorized), not 302 redirect. 302 is redirected for web app, not for SPA API call. SPA API call is in the background, so user won't see any login screen in the background.

    Overall design is not the best for the SPA/API approach. I would use better implementation and then you won't have CORS issue.