嵌入iframe时SSO认证遇X-Frame-Options: DENY错误求助

核心原因 #

你遇到的问题本质是Azure AD B2C的登录页默认设置了X-Frame-Options: deny，这是微软的安全限制，你修改自己CloudFront的响应头完全没用——因为这个限制来自test.b2clogin.com的服务器响应，不是你的应用。

可行解决方案 #

1. 改用弹出式登录窗口（最易实现的通用方案）

放弃在iframe内加载登录页，把登录流程放到独立弹出窗口：

• 触发登录时，用window.open()打开Azure B2C的授权地址，指定弹窗尺寸和目标名。
• 在弹窗的回调页（你的应用地址）中，完成认证后通过window.opener.postMessage()把认证凭证（比如ID Token）传回iframe应用。
• iframe应用监听message事件，接收凭证后完成后续Cognito用户数据同步，然后关闭弹窗。
• 注意：要提前提示用户允许弹窗，同时在postMessage时指定目标域名，避免跨域安全风险，示例代码：

  // iframe内触发登录
  const loginPopup = window.open('https://test.b2clogin.com/your-tenant/oauth2/v2.0/authorize?xxx', 'loginPopup', 'width=600,height=600');
  
  // 监听弹窗返回的消息
  window.addEventListener('message', (event) => {
    if (event.origin === 'https://your-app-domain.com') {
      const { idToken } = event.data;
      // 用idToken和Cognito交互，获取用户数据
      loginPopup.close();
    }
  });
  

2. 配置Azure AD B2C允许特定域名嵌入（仅支持自定义策略）

如果你的业务必须在iframe内加载登录页，可以通过Azure AD B2C的自定义策略解除限制：

• 先切换到自定义策略模式（内置用户流不支持此配置）。
• 在自定义策略的RelyingParty节点下添加UserJourneyBehaviors配置，指定允许嵌入的父域名：

  <RelyingParty>
    <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
    <UserJourneyBehaviors>
      <!-- 允许指定域名的iframe嵌入 -->
      <FrameOptions AllowFromOrigin="https://your-parent-app-domain.com" />
    </UserJourneyBehaviors>
    <!-- 其他配置... -->
  </RelyingParty>
  

• 注意：微软对这个配置有安全约束，仅建议在完全信任的父域名场景下使用，避免点击劫持风险。

3. 父应用代理登录流程（安全最佳实践）

让父应用负责完成整个SSO登录流程，再把凭证传递给iframe：

• 父应用触发Azure B2C登录，拿到认证凭证后，通过postMessage把凭证发送给iframe内的应用。
• iframe应用接收凭证后，直接用它和AWS Cognito交互，获取用户数据并完成登录状态初始化。
• 这个方案完全避开iframe加载第三方登录页的限制，同时减少跨域风险，是大型集成场景的推荐方案。

内容的提问来源于stack exchange，提问作者Raj Nivas T