如果设置了 allow-same-origin,则 amp-iframe 的来源不得等于容器
我收到此错误:
Origin of <amp-iframe> must not be equal to container
<amp-iframe sandbox=​"allow-scripts allow-same-origin" layout=​"nodisplay" frameborder=​"0" src=​"https:​/​/​localhost:​3000/​team-tracker-frame.html?team=reading" class=​"i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-error i-amphtml-layout">​…​</amp-iframe>​
if allow-same-origin is set.
See https://github.com/ampproject/amphtml/blob/master/spec/amp-iframe-origin-policy.md for details.
我的 amp iframe 如下所示(这是一个 pug 模板):
<amp-iframe
sandbox="allow-scripts allow-same-origin"
layout="nodisplay" frameborder="0"
src="https://localhost:3000/team-tracker-frame.html?team=reading">
</amp-iframe>
我的理解和直觉告诉我,通过提供
sandbox="allow-same-origin"
应该允许此框架成功加载。
随后出现另一个错误:amp-iframe.js 引发的
Uncaught TypeError:无法读取 null 的属性“contentWindow”
有人可以对此作出解释吗?当然,“ALLOW-same-origin”意味着我应该能够在同一主机上拥有一个 iframe,即 localhost:3000
我还注意到,使用 amp-web-push 允许您设置一个 iframe (helper-iframe-url="https://localhost:3000/amp-web-push-helper-frame.html"),amp 会很乐意在相同的来源上使用相同的沙盒设置加载它。
正如 amp 所言,“由于只测试了初始 URL,因此可以通过重定向轻松规避 AMP 的非同源强制”。
为了获得重定向,我使用从 tinyURL 网站生成的 URL。我创建了我的 URL 的 tinyURL 并将其放置在 src 或 amp-iframe 中,它可以正常工作。
问题是,如果将
allow-scripts
和
allow-same-origin
组合在一起,则同源的 iframe 可以访问父文档。
Setting both the allow-scripts and allow-same-origin keywords together when the embedded page has the same origin as the page containing the iframe allows the embedded page to simply remove the sandbox attribute and then reload itself, effectively breaking out of the sandbox altogether.
https://html.spec.whatwg.org/multipage/iframe-embed-object.html#attr-iframe-sandbox
但是,AMP 页面必须以某种方式构建,以便可以从不同来源(例如 cdn.ampproject.org)提供服务。如果
amp-iframe
允许为同源 iframe 设置
allow-scripts
和
allow-same-origin
,则当 AMP 文档从不同来源提供时,行为可能会中断。为避免这种情况,使用
allow-same-origin
时,iframe 需要从不同的(子)域提供。