Google Chrome won't allow IFRAME to load an HTML file

Question

I've got this iframe that is working fine on FF, but it doesn't seem to load up on Google Chrome.

Could someone tell me why this is happening?

My 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>

Escutcheon

Answer 1

Problem was with chrome version 27.xx & 28.xxx In this version chrome was having issue of url redirection,giving empty result(302 error).

Escutcheon

how to solve this version problem.. im also face iframe problem in mozilla due to new version iframe does not work.. my code correctly run on old versins of mozilla – Catcher

Answer 2

I tested it and it works OK in chrome on my end. My guess is that you have it set up so the page containing the iframe is being accessed via https. If the page is https, you cannot load a iframe on that page that is not https. It will result in a "mixed-content error" and for security purposes it will not load.

It works in FF because FF is more lax about this security restriction and Chrome happens to be more strict on mixed-content errors.

Trichinosis

Thanks for this info. I came across this problem in a test env. In chrome ver 31 it gives a helpful error message in the console if you look there: [blocked] The page at 'example.com/test.html' was loaded over HTTPS, but ran insecure content from 'example.com/iframe.html': this content should also be loaded over HTTPS. – Pandybat

What if the site is HTTP and you're trying to load HTTPS content in the iframe? – Gainless

Answer 3

i have the same issue, i dont know for what, it think is because chrome blocks for security, anyway, i can resolve like this:

in your html:

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

Financial

Answer 4

Adding the solution for someone who might be struggling like me. I solved the issue by adding the option for Content Security Policy.

<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>

Nonagon

Where do you place this? In the header? – Gainless

developer.mozilla.org/en-US/docs/Web/HTTP/CSP might help. But yes @AaronFranke - you'll need to adjust the headers your server is respnding with. "Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement to distribution of malware." – Felspar

Answer 5

I faced the issue after the latest Chrome updates. My iframe stopped working despite the fact that it was https iframe inside of the https web site.

Here is the text of my error

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)

Here is the article that explains what is COEP https://developer.chrome.com/blog/coep-credentialless-origin-trial/

In my case I fixed it by adding the following code into webpack dev server:

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

And for production mode, I added this header into my nginx config

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

Lac

Answer 6

Finally after many investigations and searches the below code solve the issue:

<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>

Jemmie

I think the problem is more of a security problem than a display problem. – Tobacconist