Microsoft Teams Adal 静默身份验证失败（iframe 沙箱）答案

【问题标题】：Microsoft Teams Adal silent Authentication fail (iframe sandbox)Microsoft Teams Adal 静默身份验证失败（iframe 沙箱）
【发布时间】：2018-12-10 17:22:17
【问题描述】：

我们已经为 Microsoft Teams 开发了一个自定义选项卡，并希望使用本文中描述的 Adal 以静默方式对用户进行身份验证https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/authentication/auth-silent-aad 它在开发环境中运行良好，但在生产环境中失败！控制台显示以下错误消息：

不安全的 JavaScript 尝试从 URL 为“https://login.microsoftonline.com/common/oauth2/authorize?response_type=id_token&client_id=(...)”的框架中为来源为“https://teams.microsoft.com”的框架启动导航.顶层窗口尝试导航的框架被沙盒化，但未设置“allow-top-navigation”或“allow-top-navigation-by-user-activation”标志。

我不明白为什么开发和生产环境中的行为不同？我该如何解决？

谢谢

【问题讨论】：

你的sandbox属性中有什么？
Addeladde 指出，iframe 是由 Teams 创建的：sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-pointer-lock allow-scripts allow -同源”

标签： javascript microsoft-teams adal.js

【解决方案1】：

您需要通过为sandbox 属性提供一些属性值来允许在iframe 元素上进行顶部导航

<iframe src="yourpage.html" sandbox="allow-top-navigation"></iframe>

查看here 以了解有关这些属性值的更多信息。

【讨论】：

iframe 是由 Teams 应用程序创建的，我有办法影响 iframe 的创建方式吗？
如果您可以在该页面上添加脚本，那么可以。您可以编写脚本来获取该 iframe 并修改它的 sandbox 属性。

【解决方案2】：

把它放在你的标签页里

window.onload = function () {

        if (parent.document.getElementById("extension-tab-frame")) {
            var iframe = parent.document.getElementById("extension-tab-frame");
            iframe.sandbox = 'allow-forms allow-modals allow-popups allow-pointer-lock allow-scripts allow-same-origin allow-top-navigation';
        }
    }

【讨论】：

这会导致 DOMException Blocked a frame with origin "https://myoriginalpage.com" from accessing a cross-origin frame.