我正试图将一个网站embedded到另一个网站。 我控制这两个服务器,我将在这里将其称为“site1.com”(浏览器中的站点)和“site2.com”(我试图embedded的站点)。
尝试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仍然是空白的。
这两个网站都使用有效的证书,由适当的受信任机构签署,并且没有过期。 实际上,我们使用的是子域通配符证书,所以它们都使用相同的证书(它们都在同一个子域中)。
我试图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仅在请求包含“Origin”标题时才起作用。 这似乎并没有发生在这里。 我也尝试使用这个头来解决CORS问题:
Access-Control-Allow-Origin: https://site1.com
但是这似乎没有效果。
我在Firefox安装中没有广告拦截器。 我也删除了所有的扩展,并在Firefox重新启动后重新testing,“空白iframe”行为保持不变,根本没有安装扩展。
我已经testing使用以下浏览器。
使用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显示为空,第二个显示右侧的内容(与标题中的值相反)。
由于您不得不放置“序列化来源”(协议+ 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的例子)