Keycloak嵌入iframe登录时无限重定向问题排查与解决

问题背景 #

Chrome拦截第三方Cookie与iframe，而Keycloak会向DOM注入iframe，用于静默检查、登录并返回token，由此引发本地环境认证异常。

Keycloak初始化配置 #

_kc
  .init({
    onLoad: 'check-sso',
    responseMode: 'query',
    flow: 'implicit',
    checkLoginIframe: false,
    silentCheckSsoFallback: false,
    silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',
    pkceMethod: 'S256',
  })

问题现象 #

• 设置silentCheckSsoFallback: false可停止无限重定向，但无法执行静默检查回调，用户无法完成认证，页面空白，URL变为http://localhost:3012/voting/voter/dashboard?session_state=...
• 控制台报错：

Refused to frame 'https://<my-correct-url>.ca/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

requestStorageAccess: Must be handling a user gesture to use.
requestStorageAccess: Permission denied.
requestStorageAccess: Must be handling a user gesture to use.

• 设置checkLoginIframe: false也能停止重定向，但登录后页面无法跳转到仪表盘，因为前端未获取到KC的回调token
• 尝试修改flow、responseMode和silentCheckSsoFallback均无效，关闭Chrome的Cookie拦截设置可解决问题
• 线上HTTPS环境无此问题，因浏览器SameSite Cookie保护机制会拦截HTTP环境下的关键Cookie

原因定位（更新） #

已定位三大核心原因：

• Chrome拦截第三方Cookie
• 本地使用HTTP协议
• 首页同时初始化两个KC实例，导致URL互相冲突

补充细节：

• KC读取优先级为：localstorage > cookies > url
• HTTP环境下iframe无法使用localstorage，导致控制台出现"permission denied"错误
• Cookie被拦截时，KC会将认证信息写入URL，引发两次页面刷新；多实例并行初始化会互相修改URL
• 已调整为在各自路由中初始化KC，但HTTP环境下仍需两次请求获取token，页面会刷新两次（HTTPS环境无此问题）

内容的提问来源于stack exchange，提问作者mikeint