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

时间：2017-04-20 21:03:00

标签： html http firefox nginx iframe

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

＆＃xA;＆＃ xA;

HTML嵌入代码

＆＃xA;＆＃xA;

尝试1，使用iframe标记：

＆＃xA;＆＃xA; 
 ＆lt; iframe height =”600“width =”600“name =”my other site“＆＃xA; SRC = “https://site2.com/foo/bar” ＆GT;＆＃XA;无法显示 - 您的浏览器不支持框架。＆＃xA;＆lt; / iframe＆gt;＆＃xA;
＆＃xA;＆＃xA;

尝试2，使用对象标签：

＆＃xA;＆＃xA; 
 ＆lt; object type =“text / html”height =“600”width =“600”name =“我的其他网站”＆＃xA; data =“https://site2.com/foo/bar”＆gt;＆lt; / object＆gt;＆＃xA;
＆＃xA;＆＃xA;

我知道的事情不是问题

＆＃xA;＆＃xA;

安全/不安全不匹配

＆＃xA;＆＃xA;

我读过Firefox不允许将HTTP嵌入到HTTPS页面。这两个站点都是HTTPS，因此没有不匹配。加载的资源（CSS等）也是https，来自同一个来源，因此没有混合内容问题。

＆＃xA;＆＃xA;

我尝试过设置 security.mixed_content .block_active_content 到 false ，如果我弄错了，但iframe仍然是空白的。

＆＃xA;＆＃xA;

证书无效或不受信任

＆＃xA;＆＃xA;

这两个站点都使用有效的证书，由适当的受信任机构签名，并且未过期。实际上，我们使用的是子域通配符证书，因此它们都使用相同的证书（它们都在同一个子域中）。

＆＃xA;＆＃xA;

X-Frame-Options < / h3>＆＃xA;＆＃xA;

我试图嵌入的网站有这个响应头：

＆＃xA;＆＃xA; 
  X-Frame-Options：ALLOW-FROM SITE1.COM＆＃xA;
＆＃xA;＆＃xA;

Content-Security-Policy

＆＃ xA;＆＃xA;

我想要嵌入的网站有这个响应标题（为了便于阅读而包含在这里）：

＆＃xA;＆＃xA; 
 <代码>内容安全-政策：＆＃XA; frame-ancestors https：//site1.com;＆＃xA; default-src'self';＆＃xA; script-src https://site1.com'self''unsafe-inline';＆＃xA; style-src https://site1.com'self''unsafe-inline'＆＃xA;
＆＃xA;＆＃xA;

额外披露，可能不需要 - 这些标题由Django应用服务器生成，使用此配置和“django-csp”模块。

＆＃xA;＆＃xA; 
  X_FRAME_OPTIONS ='允许 - 来自site1.com'和＃xA;＆＃xA; CSP_FRAME_ANCESTORS =（'https://site1.com'，）＆＃xA; CSP_STYLE_SRC =（'https://site1.com'，'' self'“，”'unsafe-inline'“）＆＃xA; CSP_SCRIPT_SRC =（'https://site1.com'，''self'”，“'unsafe-inline'”）＆＃xA;
＆＃xA;＆＃xA;

CORS

＆＃xA;＆＃xA;

我的理解是，当请求包含“Origin”标头时，CORS才会起作用。这似乎没有发生在这里。我也尝试使用这个头来解决CORS：

＆＃xA;＆＃xA; 
  Access-Control-Allow-Origin：https：/ /site1.com

但似乎无效。

＆＃xA;＆＃xA;

广告阻止程序

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA ;

观察到的行为

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;
    ＆＃xA;
  • 谷歌浏览器58.0.3029.81（64位）（macOS）
    • ＆＃xA;
  • Safari 10.1（macOS）
    • ＆＃xA;
  • Firefox 53.0（64位）（macOS ）
    • ＆＃xA;
  • Microsoft Edge 38.14393.0.0（Windows 10）
    • ＆＃xA;
＆＃xA;＆＃xA;

使用Chrome，Safari和边缘，框架显示我想象 - site2.com在site1.com页面内显示为一个框。

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

这让我很生气几天。任何建议表示赞赏。

＆＃xA;

2 个答案:

答案 0 :(得分：4)

我在我的服务器上重现了这个问题，该服务器为2个域提供服务，然后以这种方式修复：

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

我添加了https://，如MDN page for X-Frame-Options

中所示

你可以在这里观察区别（当然只有Firefox，就像其他浏览器一样显示两个框架）：我推了一个插入标题without或with {{1}的php页面}，并创建了插入2个iframe的this fiddle：Firefox将第一个iframe显示为空，第二个显示内容（在标题中回显值）。

screenshot of firefox

由于您被迫放置“序列化原点”（协议+ FQDN），我想知道您是否可以放置多个条目或通配符。我对RFC 7034的理解说你做不到。

现在关于这个细节：

  

最有趣的是，如果我打开开发者控制台并且   重新加载页面，我看到了获取site1.com及其CSS和的请求   等等，但没有为site2.com提出请求。不是那样的   显示site2.com时出现问题，根本没有请求。

那是因为它被缓存了。我也看到了，但强制刷新正确地显示了一个新的请求。

答案 1 :(得分：1)

如果您知道源代码（右键单击并查看要嵌入的URL的来源 - 但在这种情况下您可以控制它以便复制和粘贴）并且它只是相当少量的代码（可能因​​为您＆＃39 ;重新使用iframe），然后你可以使用HTML5 srcdoc属性来嵌入html代码，而不是指向url。对于你想要嵌入的网站（CORS等等）的未知因素，这将节省很多麻烦，如果你不能控制第二个网站，你通常不会知道。

根据caniuse.com，srcdoc属性在Firefox中得到了全面的支持，自从vsn 25开始（因此自2013年9月起）。

希望这会有所帮助（这是一个经过测试的jsfiddle示例）

相关问题
最新问题