<iframe>和<object>都是空的,但只在Firefox中

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

HTMLembedded代码

尝试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不允许HTTPembeddedHTTPS页面。 这两个网站都是HTTPS,所以没有不匹配。 加载的资源(CSS等)也是来自同一个来源的https,所以没有混合内容的问题。

我曾尝试将security.mixed_content.block_active_content设置为false ,以防我误解了这一点,但iframe仍然是空白的。

无效或不可信的证书

这两个网站都使用有效的证书,由适当的受信任机构签署,并且没有过期。 实际上,我们使用的是子域通配符证书,所以它们都使用相同的证书(它们都在同一个子域中)。

X-框架,选项

我试图embedded的网站有这个响应标题:

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

内容安全,策略

我试图embedded的网站有这个响应标题(这里包装为了可读性):

 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应用服务器使用这个configuration和“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仅在请求包含“Origin”标题时才起作用。 这似乎并没有发生在这里。 我也尝试使用这个头来解决CORS问题:

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

但是这似乎没有效果。

广告拦截器

我在Firefox安装中没有广告拦截器。 我也删除了所有的扩展,并在Firefox重新启动后重新testing,“空白iframe”行为保持不变,根本没有安装扩展。

观察到的行为

我已经testing使用以下浏览器。

  • Google Chrome 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,我显示了一个指定大小的空白空间(600×600)。 如果我使用iframe,那么周围有一个黑色边框。 如果我使用的对象,这只是一个没有边界的空白区域。

最有趣的是,如果我打开开发者控制台并重新加载页面,我会看到请求获取site1.com及其CSS等等,但是没有为site2.com 做出请求 。 这并不是说有一个问题显示site2.com,它从来没有要求。

此外,开发人员控制台不会显示有关此错误或警告。 如果有错误情况或安全exception阻止加载第二个站点,我希望某种警告被logging。

这已经让我疯狂了几天。 任何build议感激。

我在我的服务器上重现了这个问题,它服务于2个域,然后通过这种方式修复它:

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

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

你可以观察到这里的差异(当然,只有Firefox和其他浏览器一样,这两个框架都显示出来了):我推了一个php页面,在没有或者用 https:// 情况下插入页眉,并且创建了这个插入2个iframe的小提琴 :Firefox将第一个iframe显示为空,第二个显示右侧的内容(与标题中的值相反)。

Firefox的截图

由于您不得不放置“序列化来源”(协议+ FQDN),我想知道是否可以放置多个条目或通配符。 我对RFC 7034的理解是不能的。

现在关于这个细节:

最有趣的是,如果我打开开发者控制台并重新加载页面,我会看到请求获取site1.com及其CSS等等,但是没有为site2.com做出请求。 这并不是说有一个问题显示site2.com,它从来没有要求。

那是因为它被缓存了。 我也看到了这一点,但是正确地展示了一个新的要求。

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

根据caniuse.com的srcdoc属性从vsn 25起(自2013年9月以来)在Firefox的全面支持。

希望这有助于(这是一个测试jsfiddle的例子)