Angular 14集成Keycloak Angular出错的原因及解决方法

1. 错误原因 #

Keycloak默认启用严格的iframe嵌入限制，会给响应头设置X-Frame-Options: deny，禁止自身页面被任何外部网站嵌入到iframe中。而Keycloak Angular的静默SSO（silent-check-sso）功能，正是通过在Angular页面中嵌入Keycloak认证页面的iframe来实现无感知登录状态检查的，这种冲突直接导致浏览器阻止iframe加载，认证流程卡壳，最终页面无法正常渲染，显示空白。

2. 最简单可靠的修复方式 #

直接在Keycloak管理控制台修改对应客户端的安全配置，允许你的Angular应用域名嵌入Keycloak页面：

• 登录Keycloak管理后台（默认地址http://localhost:8080/admin）
• 进入你的目标Realm，找到绑定到Angular应用的客户端
• 切换到Security Defenses标签页
• 找到iframe Origins配置项，添加你的Angular应用地址http://localhost:4200，保存配置

如果你的Keycloak版本没有单独的iframe Origins选项，就修改X-Frame-Options的设置，将其值改为sameorigin或者设置为allow-from http://localhost:4200（部分旧版本支持）。

这种方式既保留了静默SSO的便捷性，又通过精准授权维持了安全限制，是最合理的修复方案。

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