Google Chrome不允许IFRAME加载HTML文件

5vf7fwbs  于 2024-01-04  发布在  Go
关注(0)|答案(6)|浏览(249)

我有这个iframe是工作在FF罚款,但它似乎没有加载到谷歌Chrome。
有人能告诉我为什么会这样吗?

我的iframe

<iframe src="http://tripsketch.com/page?s=TheCavendish#!Id=1024&Name=London&Type=City&view=Attraction" height="700" width="990" frameborder="0" scrolling="no">
</iframe>

字符串

1wnzp6jl

1wnzp6jl1#

我测试了它,它在我的Chrome中工作正常。我猜你已经设置了它,所以包含iframe的页面通过https访问。如果页面是https,你不能在非https的页面上加载iframe。这将导致“混合内容错误”,出于安全考虑,它不会加载。
它在FF中工作,因为FF对这种安全限制更宽松,而Chrome恰好对混合内容错误更严格。

2w3rbyxf

2w3rbyxf2#

问题是与Chrome版本27.xx和28.xxx在这个版本Chrome有问题的网址重定向,给出空的结果(302错误)。

bvpmtnay

bvpmtnay3#

为像我这样的人添加解决方案。我通过添加内容安全策略选项解决了这个问题。

<httpProtocol>
  <customHeaders>
    <add name="Content-Security-Policy" value="frame-ancestors https://www.<preferredwebsitedomain>.com" />
    <!-- Test this option as Chrome supports CSP now for Iframe opening-->
  </customHeaders>
</httpProtocol>

字符串

flmtquvp

flmtquvp4#

我也有同样的问题,我不知道是什么,它认为是因为Chrome块的安全性,无论如何,我可以这样解决:
在您的html中:

<embed src='your_path' width='100%' height='100%'  type="application/pdf" />

字符串

t3irkdon

t3irkdon5#

在最新的Chrome更新后,我遇到了这个问题。我的iframe停止工作,尽管事实上它是https网站内部的https iframe。
这是我的错误的文本

Chrome
Specify a Cross-Origin Embedder Policy to prevent this frame from being blocked
Because your site has the Cross-Origin Embedder Policy (COEP) enabled, each embedded iframe must also specify this policy. This behavior protects private data from being exposed to untrusted third party sites.
To solve this, add one of following to the embedded frame’s HTML response header:
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Embedder-Policy: credentialless (Chrome > 96)

字符串
这篇文章解释了什么是COEP https://developer.chrome.com/blog/coep-credentialless-origin-trial/
在我的例子中,我通过在webpack dev server中添加以下代码来修复它:

devServer: {
    headers: {
      'Cross-Origin-Embedder-Policy': 'credentialless'
    },
    ...
   }


对于生产模式,我在nginx配置中添加了此头文件

add_header Cross-Origin-Embedder-Policy "credentialless";

kxkpmulp

kxkpmulp6#

最后,经过多次调查和搜索,下面的代码解决了这个问题:

<style type="text/css">
iframe {
  border: none;
  width: 100%;
  height: 500px;
}

@media (min-width: 1024px) {
  .content_viewport {
    border: 0px none;
    height: 900px;
width: 100%;
  }
}
@media (max-width: 1023px) {
  .content_viewport {
    border: 0px none;
    height: 900px;
width: 100%;  }
}
@media (min-width: 768px) {
  .content_viewport {
    border: 0px none;
    height: 900px;
width: 100%;  }
}
</style>
<div style=" overflow: hidden; margin: 15px auto; max-width: 880px;"><iframe class="content_viewport" scrolling="no" src="<Your URL>"></iframe>
<p>&nbsp;</p>
</div>

字符串

相关问题