<iframe>和<object>都是空白的,但仅限于Firefox

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标签:

<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

我的理解是,当请求包含"Origin"标头时,CORS才会起作用.这似乎没有发生在这里.我也试过使用这个头来解决CORS问题:

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

但这似乎没有效果.

广告拦截器

我在这个Firefox安装中没有广告拦截器.我还删除了所有扩展并在Firefox重启后重新测试,"空白iframe"行为保持不变,根本没有安装扩展.

观察到的行为

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

• 谷歌浏览器58.0.3029.81(64位)(macOS)
• Safari 10.1(macOS)
• Firefox 53.0(64位)(macOS)
• Microsoft Edge 38.14393.0.0(Windows 10)

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

使用Firefox,我显示一个指定大小(600x600)的空白空间.如果我使用iframe,那么它周围会出现黑色边框.如果我使用了对象,它只是一个没有边框的空白区域.

最有趣的是,如果我打开开发人员控制台并重新加载页面,我会看到获取site1.com及其CSS等的请求,但是没有针对site2.com的请求.这不是显示site2.com的问题,它根本就没有被要求.

此外,开发人员控制台不会显示任何错误或警告.如果出现错误情况或安全异常阻止加载第二个站点,我希望记录某种警告.

这让我疯狂了好几天.任何建议赞赏.

Answer 1

我在服务 2 个域的服务器上重现了该问题，然后通过以下方式修复：

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

我添加了，如X-Frame-Options 的 MDN 页面https://所示

您可以在这里观察到差异（当然，仅使用 Firefox，与其他浏览器一样，两个框架都会显示）：我推送了一个 php 页面，该页面插入了不带或带 的 https://标头，并创建了这个插入 2 个 iframe 的小提琴： Firefox 将第一个 iframe 显示为空，第二个内容位于右侧（与标题中的值相呼应）。

由于您被迫输入“序列化来源”（协议+FQDN），我想知道您是否可以输入多个条目或通配符。我对RFC 7034的理解表明你不能。

现在关于这个细节：

最有趣的是，如果我打开开发人员控制台并重新加载页面，我会看到获取 site1.com 及其 CSS 等的请求，但没有针对 site2.com 的请求。这并不是说显示 site2.com 存在问题，而是根本没有请求它。

那是因为它被缓存了。我也看到了这一点，但是强制刷新正确地表明提出了新的请求。