如何在 VS Team Service 自定义 TAB 中允许 IFRAME答案

【问题标题】：How to allow IFRAME in VS Team Service custom TAB如何在 VS Team Service 自定义 TAB 中允许 IFRAME
【发布时间】：2016-11-03 07:30:17
【问题描述】：

我有一个在 VSTS 中添加自定义 TAB 的扩展，见下图

它在 chrome 中工作得非常好，但在 IE 中却不行，结果见下图：

这是我的扩展程序中的代码：

    <script type="text/javascript">
    VSS.init();
    VSS.ready(function () {
        var webContext = VSS.getWebContext();
        var projectName = webContext.project.name;
        var assetFrame = document.getElementById("assetFrame");

        assetFrame.src = "https://samplewebsite.net/Home/Asset/" + projectName;
        VSS.notifyLoadSucceeded();

    });
</script>
<div id="rtlTabBody">
    <iframe id="assetFrame" style="width:100%" frameborder="0"></iframe>
</div>

我是否需要在代码或 VSTS 本身中配置某些内容以允许 iframe？

【问题讨论】：

内容页站点是否由您管理？
@Eddie-MSFT 你的意思是https://samplewebsite.net/？是的
然后尝试更新该站点以使其显示在其他框架中：stackoverflow.com/questions/14141388/…。
@Eddie-MSFT 我尝试将 iframe 嵌入到另一个不是 VSTS 的 Web 应用程序中，它工作得非常好，你认为 VSTS 会阻止我们嵌入 IFRAME 吗？
不，VSTS 允许这样做。 “如果您的网页可以托管在 iframe 中，则它可以托管在 Visual Studio Team Services 中作为集线器。”这是来自 VSTS 文档的描述：visualstudio.com/en-us/docs/integrate/extensions/develop/…

标签： javascript html iframe azure-devops visual-studio-extensions

【解决方案1】：

您尝试嵌入的网站的内容安全策略 (CSP) 似乎已将其自身配置为不允许将其嵌入其他网站。

要么指定：

frame-ancestors 'none'

或者它是旧的等价物：

X-Frame-Options: DENY

我怀疑是后者，因为 X-Frame-Options 已被 CSP and Chrome only partially implements it 弃用。

【讨论】：