Angular项目iframe集成OHIF DICOM Viewer时Google OAuth兼容问题咨询

问题原因 #

Google OAuth登录页面默认设置了X-Frame-Options: deny，禁止在iframe中加载，这是Google的安全限制，无法直接绕过该响应头设置。

可行解决方案 #

1. 主应用接管OAuth认证，通过postMessage传递令牌 #

在你的Angular主应用中完成Google OAuth认证，再将令牌传递给iframe内的OHIF Viewer，跳过OHIF自身的OAuth流程：

• 步骤1：Angular主应用实现Google OAuth登录
  使用Angular OAuth库（如angular-oauth2-oidc）完成授权码流程，获取访问令牌。
• 步骤2：向iframe发送令牌

  // 主应用代码
  const ohifIframe = document.getElementById('ohif-iframe') as HTMLIFrameElement;
  const authToken = 'your-obtained-google-access-token';
  
  // 发送令牌到OHIF iframe，注意验证目标域名
  ohifIframe.contentWindow?.postMessage(
    { type: 'EXTERNAL_AUTH_TOKEN', token: authToken },
    'http://localhost:3000'
  );
  

• 步骤3：OHIF Viewer接收并使用令牌
  在OHIF的初始化代码中添加消息监听，将令牌存入本地存储或直接用于API请求：

  // OHIF侧代码
  window.addEventListener('message', (event) => {
    // 严格验证来源域名，防止恶意消息
    if (event.origin !== 'http://your-angular-app-domain') return;
    
    if (event.data.type === 'EXTERNAL_AUTH_TOKEN') {
      // 保存令牌到本地存储，供OHIF的API调用使用
      localStorage.setItem('ohif-google-token', event.data.token);
      // 触发OHIF的认证初始化逻辑，比如刷新页面或调用内部方法
      window.location.reload();
    }
  });
  

• 步骤4：修改OHIF配置
  编辑OHIF的config/default.js，禁用内置的OAuth登录流程，改为读取外部传入的令牌。

2. 使用弹出窗口完成认证 #

修改OHIF的登录逻辑，点击登录时弹出独立的Google OAuth窗口，认证完成后关闭窗口并传递令牌回iframe：

• OHIF侧触发弹出窗口

  // OHIF登录按钮点击事件
  document.getElementById('login-btn').addEventListener('click', () => {
    const authUrl = 'https://accounts.google.com/o/oauth2/v2/auth?client_id=YOUR_CLIENT_ID&redirect_uri=http://localhost:3000/auth-callback&response_type=code&scope=openid%20email';
    // 弹出固定大小的认证窗口
    window.open(authUrl, 'google-auth', 'width=600,height=600');
  });
  

• 认证回调页面传递令牌
  在OHIF的auth-callback页面中，完成授权码交换令牌后，通过window.opener.postMessage将令牌传递回主页面，再由主页面转发给iframe，最后关闭弹出窗口。

注意事项 #

• 所有跨域消息传递必须严格验证event.origin，避免XSS攻击。
• 确保Google OAuth客户端的重定向URI配置正确，包含弹出窗口或主应用的回调地址。
• OHIF的配置修改需要参考官方文档，适配不同版本的认证逻辑。

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