CORS issue while logging out from OAuth2/OIDC provider configured in Spring

[tamasmak]

Describe the bug

A CORS issue happens in the preflight request when using a fetch request while logging out from OAuth2/OIDC provider configured in Spring.
An example of the issue:

Access to fetch at 'https://keycloak.local.com/realms/test-app/protocol/openid-connect/logout?id_token_hint=...&post_logout_redirect_uri=https://vaadinapp'
(redirected from 'https://vaadinapp/logout') from origin 'https://vaadinapp/' has been blocked by CORS policy: Request header field x-csrf-token is not allowed by Access-Control-Allow-Headers in preflight response.

1. Hilla’s Authentication.logout method triggers a fetch request to /logout (Spring’s default logout handler) setting Spring’s CRSF token
2. Spring’s /logout handler redirects to the provider's RP-Initiated logout endpoint (different host) and the preflight request fails since the custom x-csrf-token header is not allowed by the provider.

Expected-behavior

The application should be redirected to the expected logout success URI without issues.
Could the fetch request handle the redirect and redirect the user to the provider's RP-Initiated logout endpoint?

Reproduction

1. Setup an OAuth2/OIDC provider for authentication for a Hilla application (e.g. using Keycloak)
2. Use the logout() method to logout the user

import { useAuth } from './auth';
const { logout } = useAuth();
<Button onClick={async () => logout()}>Sign out</Button>

System Info

Hilla 24.5.0

[platosha]

The default logout() implementation is specific to Spring Security form login. In OIDC provider case, it does not work.

What we need for the logout button is a navigation to the provider's logout page.

[platosha]

We could make logout always make a form-submitting HTML navigation to the specified URL instead of fetch. Full page reload is needed anyway.

[taefi]

So far, the implementation of the logout in useAuth (which is based on hilla-frontend) is in a way that it doesn't have any info about what's the OIDC provider's logout URL is, so that it can directly fetch that without the extra x-csrf-token header to prevent the CORS error.

Normally, a logout URL for an OIDC provider contains some sort of token to identify the user which should be logged out (in case of key-cloak it is called id-token-hint). Hence, even changing the react-auth package to store the correct OIDC provider's logout URL (e.g. upon login), it doesn't seem very secure.

What I tried was to let the fetch request to /logout be handled by the Vaadin app (to fulfil the default logout behaviours such as clearing any user related data in session and etc.) and provide the client with the OIDC provider's logout URL (as it does now). I was under the impression that getting the OIDC logout url (that contains the token) from the initiated fetch to /logout, I can override the default behaviour of the standard fetch API (which follows the redirect url), to redirect to that URL manually on the client, however, this manual redirect cannot work, since when the redirect: 'manual' is set for the fetch, the response does not contain anything about the redirect URL according to this and this.

The alternatives could be:

• To extend the OidcClientInitiatedLogoutSuccessHandler and configure that as the logout-success-handler in IdentityManagementConfiguration, to handle requesting the OIDC logout url in the backend, and only give the responsibility of redirecting to the logout-success-url to the client (which can happen without any issue ATM).
• To allow the x-csrf-token header in the OIDC provider's CORS policy (which doesn't sound like the best option).

[platosha]

The first alternative seems to be the way.