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>

当我浏览控制台选项卡时，这就是我所拥有的：

Powered by AMP ⚡ HTML – Version 1462999126709

AMP validation successful.

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

Answer 1

问题在于您尝试的放大器内容与AMP的内容相同。出于安全原因这是被禁止的（主要是因为同源政策在iframe中使用合成来源的方式）。

解决方法是确保外部JS从不同的源服务到您的AMP。因此，如果你的AMP在example.com上，那么你应该从SOMEOTHERORIGIN.example.com提供iframed JS

Answer 2

您可以尝试从sandbox =“ allow-same-origin allow-forms allow-scripts”中删除allow-same-origin，但在某些情况下会产生新的错误。

另一个可能的解决方法是确保从不同的来源向AMP提供外部JS。因此，如果您的AMP在example.com上，则应该从SOMEOTHERORIGIN.example.com提供iframed JS。

如果上述两种修复方法均无法正常运行，因为您拥有自己域中的iframe来源，建议您尝试按照amp建议的方式- https://github.com/ampproject/amphtml/blob/master/spec/amp-iframe-origin-policy.md

“由于只测试了初始URL，因此可以轻松地通过重定向规避AMP的不相同来源执行”。

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

Answer 3

您可以通过从沙箱中删除“允许相同来源” 属性来解决此问题。但是，您将需要修改标头并将“ access-control-allow-origin” 设置为“ *” ，因为由于以下原因，您的浏览器会检测到您的来源为空从沙箱中删除该属性。

Answer 4

只需从allow-same-origin中删除sandbox="allow-same-origin allow-forms allow-scripts"。然后，您可以从与AMP页面相同的来源提供iframed内容。

AMP：<amp-iframe>的来源不得等于容器

4 个答案: