<iframe>和<object>都是空的，但只在火狐中。

Question

我试图嵌入一个网站到另一个网站。我控制着这两台服务器，我在这里将其称为"site1.com“(浏览器中的站点)和"site2.com”(我试图嵌入的站点)。

HTML嵌入代码

尝试1，使用iframe标记：

<iframe height="600" width="600" name="my other site"
        src="https://site2.com/foo/bar">
    Unable to display--your browser does not support frames.
</iframe>

尝试2，使用对象标记：

<object type="text/html" height="600" width="600" name="my other site"
        data="https://site2.com/foo/bar"></object>

我知道的事情不是问题所在

安全/不安全错配

我读过Firefox将不允许HTTP嵌入到HTTPS页面中。这两个站点都是HTTPS，所以没有不匹配的地方。加载的资源(CSS等)也是https，来源相同，因此不存在混合内容问题。

我尝试过将security.mixed_content.block_active_content设置为false，以防我弄错了，但iframe仍然是空白的。

无效或不可信证书

这两个站点都使用由适当的可信授权机构签名的有效证书，并且都未过期。实际上，我们使用的是子域通配符证书，因此它们都使用相同的证书(它们都位于同一个子域中)。

X-框架-选项

我试图嵌入的站点具有以下响应头：

X-Frame-Options: ALLOW-FROM SITE1.COM

内容-安全-策略

我试图嵌入的站点有这个响应头(为可读性而包装在这里)：

Content-Security-Policy:
    frame-ancestors https://site1.com;
    default-src 'self';
    script-src https://site1.com 'self' 'unsafe-inline';
    style-src https://site1.com 'self' 'unsafe-inline'

额外的公开，可能不需要--这些头是由Django应用服务器生成的，使用这个配置和"django-csp“模块。

X_FRAME_OPTIONS = 'Allow-From site1.com'

CSP_FRAME_ANCESTORS = ('https://site1.com',)
CSP_STYLE_SRC = ('https://site1.com', "'self'", "'unsafe-inline'")
CSP_SCRIPT_SRC = ('https://site1.com', "'self'", "'unsafe-inline'")

CORS

我的理解是，CORS只有在请求包含“原产地”标题时才会发挥作用。这似乎不是在这里发生的。我还尝试通过使用以下标题来寻址CORS：

Access-Control-Allow-Origin: https://site1.com

但这似乎没有任何效果。

广告阻滞剂

在这个Firefox安装中，我没有广告阻止器。我还删除了所有的扩展，并在Firefox重新启动后重新测试，“空白iframe”行为保持不变，根本没有安装任何扩展。

观察行为

我使用以下浏览器进行了测试。

• 谷歌Chrome 58.0.3029.81 (64位) (macOS)
• Safari 10.1 (macOS)
• 火狐53.0 (64位) (macOS)
• Microsoft Edge 38.14393.0.0 (Windows 10)

使用Chrome、Safari和Edge，框架如我所料- site2.com显示为site1.com页面中的一个框。

使用Firefox，我可以看到一个指定大小的空空间(600x600)。如果我用iframe，那么它周围有一个黑色的边框。如果我使用object，它只是一个没有边框的空白区域。

最有趣的是，如果我打开开发人员控制台并重新加载页面，我会看到获取site1.com及其CSS的请求，但是没有对site2.com提出任何请求。这并不是说展示site2.com有什么问题，它根本没有被请求过。

此外，开发人员控制台没有显示有关此问题的错误或警告。如果有错误条件或安全异常阻止第二个站点的加载，我希望会有某种警告被记录下来。

这几天我都快疯了。如有任何建议请见谅。

Answer 1

我在服务于两个域的服务器上复制了这个问题，然后以如下方式修复了它：

X-Frame-Options: ALLOW-FROM https://SITE1.COM

我添加了https://，如用于X帧选项的MDN页面中所示

您可以在这里观察到不同之处(当然，与其他浏览器一样，这两个框架都显示在火狐上)：我推出了一个php页面，该页面插入头部不带或使用 https://，并创建了插入2个iframes的这把小提琴：火狐将第一个iframe显示为空，第二个页面在右侧显示内容(在标头中回声值)。

​

​

由于您被迫放置一个“序列化源”(protocol+FQDN)，所以我想知道您是否可以放置多个条目或通配符。我对RFC 7034的理解说你不能。

关于这个细节：

最有趣的是，如果我打开开发人员控制台并重新加载页面，我会看到获取site1.com及其CSS的请求，但是没有对site2.com提出任何请求。这并不是说展示site2.com有什么问题，它根本没有被请求过。

那是因为它被缓存了。我也看到了这一点，但一次武力刷新正确地表明了一个新的要求。

Answer 2

如果您知道源代码(右键单击并查看要嵌入的url源代码-但在本例中是您控制它，以便您可以复制和粘贴)并且它只是相当少量的代码(可能是因为您使用的是iframe)，那么您可以使用HTML5 srcdoc属性嵌入html代码，而不是指向url。这将为您想要嵌入的站点(CORS等)的未知因素节省很多麻烦。如果你没有控制第二个站点，你通常不会知道。

根据caniuse.com的说法，从vsn 25开始(从2013年9月起)，srcdoc属性在火狐中得到了充分的支持。

希望这有帮助(下面是一个经过测试的小提琴示例)