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:
parent
0c9cd89667
commit
a2e1067432
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue