Fix Keycloak CORS and iframe issues for cross-domain authentication

CRITICAL FIX: Resolve SSO login endless loading and CORS errors

## Issues Resolved:

### 1. CORS Policy Violations
- Disabled checkLoginIframe (causes cross-origin iframe errors)
- Removed silentCheckSsoRedirectUri (blocked by modern browsers)
- Disabled checkLoginIframeInterval to prevent 3rd party cookie checks

### 2. Cross-Domain Compatibility
- Set responseMode to 'query' for better proxy compatibility
- Configured standard flow instead of implicit
- Added proper timeout handling (messageReceiveTimeout: 10000)
- Enhanced debug logging for troubleshooting

### 3. Redirect URI Consistency
- Fixed login() to use proper baseUrl for redirect URIs
- Ensures HTTPS URLs in production environment
- Consistent URL generation across initialization and login

### 4. Browser Security Compliance
- Disabled enableLogging to reduce console noise
- Removed iframe-based features that modern browsers block
- Maintained PKCE (S256) for security while fixing compatibility

## Technical Details:

The previous errors were caused by Keycloak trying to use:
- /protocol/openid-connect/3p-cookies/step1.html
- /protocol/openid-connect/login-status-iframe.html

These are blocked by browsers' cross-origin policies when the app and
Keycloak are on different domains (client.portnimara.dev vs auth.portnimara.dev).

This fix disables these problematic features while maintaining full OAuth
functionality and security. The SSO login should now work without endless
loading issues.
This commit is contained in:
Matt 2025-06-14 15:38:40 +02:00
parent 0c9cd89667
commit a2e1067432
1 changed files with 23 additions and 5 deletions

View File

@ -60,14 +60,28 @@ export const useKeycloak = () => {
onLoad: 'check-sso',
// Use proper HTTPS redirect URI
redirectUri: `${baseUrl}/auth/callback`,
silentCheckSsoRedirectUri: `${baseUrl}/silent-check-sso.html`,
checkLoginIframe: false, // Disable iframe checks for better compatibility
pkceMethod: 'S256', // Use PKCE for better security
// Disable all iframe-based features that cause CORS issues
checkLoginIframe: false,
silentCheckSsoRedirectUri: undefined, // Disable silent SSO check
enableLogging: false, // Reduce console noise
// Use standard flow compatible with proxy setups
flow: 'standard',
responseMode: 'query', // Use query params instead of fragments
// Disable third-party cookie checks
checkLoginIframeInterval: 0,
// PKCE for security
pkceMethod: 'S256',
// Timeout settings
messageReceiveTimeout: 10000,
// Disable adapter features that can cause issues in proxied environments
adapter: 'default'
})
logDebug('Keycloak initialization result', {
authenticated,
redirectUri: `${baseUrl}/auth/callback`
redirectUri: `${baseUrl}/auth/callback`,
checkLoginIframe: false,
silentSso: 'disabled'
})
isAuthenticated.value = authenticated
@ -116,11 +130,15 @@ export const useKeycloak = () => {
if (keycloak.value) {
try {
const baseUrl = getBaseUrl()
logDebug('Starting login', { redirectUri: `${baseUrl}/dashboard` })
await keycloak.value.login({
redirectUri: window.location.origin + '/dashboard'
redirectUri: `${baseUrl}/dashboard`
})
} catch (error) {
console.error('Login failed:', error)
logDebug('Login error', error)
throw error
}
}