iFrame 拒绝显示

Question

我试图在我的网页中加载一个简单的iframe，但它没有显示。在Chrome中我得到了这个错误:

Refused to display 'https://cw.na1.hgncloud.com/crossmatch/index.do' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://cw.na1.hgncloud.com".


Invalid 'X-Frame-Options' header encountered when loading 'https://cw.na1.hgncloud.com/crossmatch/index.do': 'ALLOW-FROM https://cw.na1.hgncloud.com' is not a recognized directive. The header will be ignored.

这是我的iframe代码：

<p><iframe src="https://cw.na1.hgncloud.com/crossmatch/" width="680" height="500" frameborder="0"></iframe></p>

我不确定那是什么意思。我之前已经加载了很多iframe，从未遇到这样的错误。

有任何想法吗？

- Jose M.

Answer 1

这意味着位于cw.na1.hgncloud.com的http服务器发送了一些http头，告诉像Chrome这样的Web浏览器，仅允许从同一个域（cw.na1.hgncloud.com）上托管的页面加载此页面（https://cw.na1.hgncloud.com/crossmatch/）中的iframe：

Content-Security-Policy: frame-ancestors 'self' https://cw.na1.hgncloud.com
X-Frame-Options: ALLOW-FROM https://cw.na1.hgncloud.com

你应该阅读以下内容：

• https://developer.mozilla.org/zh-CN/docs/Web/Security/CSP
• https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

- Vince

---

在 src 属性中使用的资源是否应该发送 Content-Security-Policy？ - OlehZiniak

根据Mozilla的指导，与X-Frame-Options一起使用的ALLOW-FROM现已过时。您应该优先考虑上述提到的Content-Security-Policy。 - Ian Jamieson

我遇到了这样一种情况：响应头Content-Security-Policy包含允许的URL my-site.com:*，但我尝试将www.my-site.com设置为iframe的src属性。所以，这三个字母WWW是问题所在。 - MegaCasper

Answer 2

错误的原因是https://cw.na1.hgncloud.com 的主机服务器提供了一些 HTTP 标头来保护文档。其中之一是框架祖先必须来自与原始内容相同的域。似乎你试图将 iframe 放在与 iframe 内容不同的域位置，从而违反了主机设置的内容安全策略。

请查看内容安全策略的此链接以获取更多详细信息。

- David

Answer 3

如果您需要从同一服务器调用您的IFRAME，请在IFRAME页面中传递此简单的头信息：

Content-Security-Policy: frame-ancestors 'self'

或者，将其添加到您的Web服务器的CSP配置中。

- Volomike

Answer 4

在我的情况下，我嵌入的网站有一个特定的用于嵌入内容的URL，以及一个不同的用于分享的URL。我在iframe中设置的URL是：

https://site/share/2432423232

将其更改为

https://site/embed/2432423232

对我有用

- Winnipass

---

当然是YouTube。 - kokbira

Answer 5

我也遇到了同样的问题，不要在私密窗口中打开该页面。

如果需要使用不同的用户登录，您可以使用多个浏览器。

- Ebraheem Alrabeea

Answer 6

我知道这些都是好的答案，但如果没有任何URL可用，我该怎么办？（唯一可用的是“about:blank”）

<iframe id="mainframe" width="500" height="500"></iframe>
<button onclick="reassign();"> Change url </button>
<script>
function reassign () {
var e = prompt('What website/url do you want to display?','https://');
document.getElementById("mainframe").src=e;
}
</script>

当我在输入框中输入google.com时，它返回一个错误界面，并显示以下信息："www.google.com拒绝连接"。

- Preston Hudak