Question

我正在开发一个简单的功能，允许我的合作伙伴（其他网站）将我们的内容嵌入到iframe中的网站上。

我正在测试，很遗憾，某些页面被允许，某些页面不允许。

例如：

<iframe frameborder="0" height="500" width="900" src="https://www.mywebsite.com"></iframe>

引发控制台错误：

Load denied by X-Frame-Options: https://www.mywebsite.com/ does not permit cross-origin framing.

与此同时：

<iframe frameborder="0" height="500" width="900" src="https://www.mywebsite.com/experience/"></iframe>

毫无疑问地提供。

可能是什么问题？

我可以明确允许从外部源在iframe中呈现我的内容吗？怎么做？

编辑

我的web.config现在看起来像这样：

<httpProtocol>
  <customHeaders>
    <remove name="X-Powered-By" />
  <add name="Cache-Control" value="public" />
    <add name="Access-Control-Allow-Origin" value="*" />
  </customHeaders>
</httpProtocol>

但是它仍然不起作用，例如。它不允许查看iframe内容。

我检查了网络响应，并且在两个iframe请求中均已正确设置了标头：

access-control-allow-origin *

但是在第一个第一个iframe请求中，我还得到了以下信息：

x-frame-options SAMEORIGIN

在第二次（体验）中x-frame-options完全没有设置。

将其添加到web.config后：

<add name="X-Frame-Options" value="ALLOW-FROM *" />

两个iframe都返回关于不允许跨域和第二种情况的跨域控制台错误

x-frame-options SAMEORIGIN

未被删除，只是：

x-frame-options ALLOW-FROM *

已添加。

Answer 1

您可以配置服务器以提供正确的http标头以允许CORS。这样可以解决您的问题。有关更多信息，请参见此处：https://enable-cors.org/server.html

CORS的工作方式是验证您试图跨过的两个域或子域（即，您的站点+ https://www.mywebsite.com）是否可以一起使用。如果不是这种情况，那么您可能会遭受攻击，因为您的网上银行托管在iframe中，但被父内容包裹着，等等，这会降低与用户的信任度。

通常，当您配置CORS时，您会在此处看到本文中指出的标题：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Access-Control-Allow-Origin，其中添加了：

Access-Control-Allow-Origin: *

星号允许所有其他网站将该内容包装到iframe等中，但是您可以使用特定的域名，这样只有您的网站才能嵌入该内容。

由于跨域框架，我自己的内容未加载到iframe中

1 个答案: