<amp-iframe>的来源不能等同于容器

Question

我想在我的第一个AMP项目中解决这个问题，

这就是我面临的问题：

error.js:58：

Origin of <amp-iframe> must not be equal to container

这是我的index.html中的amp-iframe代码：

<amp-iframe
    width=100
    height=100
    layout="nodisplay"
    sandbox="allow-same-origin allow-forms allow-scripts"
    src="https://www.example.com/scripts/app.js">
</amp-iframe>

当我浏览console选项卡时，我拥有以下内容：

Powered by AMP ⚡ HTML – Version 1462999126709

AMP validation successful.

我使用<amp-iframe>来使用外部javascript，我的custom.js

Answer 1

问题是，你是在试图放大-如果内容是在同一来源的AMP。出于安全原因，这是被禁止的(主要与相同来源的政策在iframes内部使用合成源的方式有关)。

修复方法是确保外部JS从一个不同的来源提供给您的AMP。因此，如果您的AMP在example.com上，那么您应该为来自SOMEOTHERORIGIN.example.com的iframed服务。

Answer 2

您可以尝试从sandbox=中删除“允许-相同来源的允许-表单允许-脚本”，但是在某些情况下它会创建新的错误。

其他可能的解决办法是确保外部JS从不同的来源提供给您的AMP。因此，如果您的AMP在example.com上，那么您应该为来自SOMEOTHERORIGIN.example.com的iframed服务。

如果上述两种修复方法都无法工作，因为您有来自您自己域的iframe源，我建议您可以尝试使用amp建议的- https://github.com/ampproject/amphtml/blob/master/spec/amp-iframe-origin-policy.md。

“通过重定向，人们可以很容易地绕过AMP的不同来源的强制执行，因为只有最初的URL被测试过。”

为了获得重定向，我尝试使用从tinyURL站点生成的url。我为我的url创建了一个tinyURL，并将其放置在src的amp-iframe中，并且它正在工作。这是一种重定向。

Answer 3

您可以通过从沙箱中删除"allow-same-origin"属性来解决这个问题。但是，您需要修改标题并将"access-control-allow-origin"设置为"*"，因为您的浏览器将从沙箱中删除该属性，从而将源检测为null。